php用高德地图api坐标返回市_php 使用高德地图(一) 画多边形及编辑 获取坐标 (简单总结)...
这篇文章介绍的内容是关于php 使用高德地图(一) 画多边形及编辑 获取坐标 (简单总结),有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下
首次使用高德api的话要先申请一个高德的key
主要说明:
1. 高德地图展示
2. 高德地图点击获取坐标
3. 高德地图鼠标绘制多边形
4. 高德地图鼠标 编辑多边形并获取坐标
.map-list{float: left; margin-left: 10px;}
.pbot10{ padding-bottom: 10px;}
.marleft{ margin-left: 10px;}
foreach ($oldRegionArr as $k => $v):
?>
[=$v;?>],
<?php foreach ($oldLngLatArr as $key => $val):?>
<?php foreach ($val as $k => $v):?>
=$v;?>
清空所有
生成抢修范围
开始编辑抢修范围
结束编辑抢修范围
var city = '济南';
//生成地图
var map = new AMap.Map('container',{
resizeEnable: true, zoom: 13
});
//地图上添加工具
AMap.plugin(['AMap.ToolBar','AMap.Scale','AMap.OverView'],
function() {
map.addControl(new AMap.ToolBar());
map.addControl(new AMap.Scale());
});
//设置地图中心
var lngLat = map.getCenter();
var lng = lngLat.lng;
var lat = lngLat.lat;
if(city) {
map.setCity("" + city + "");
} else {
map.setCenter([lng, lat]);
}
//清空地图
function clearMap()
{
map.clearMap();
$('.map-list-add').html('');
positions = [];
$('textarea[name=region]').val('');
$('.map-list-hidden').html('');
}
//点击地图获取坐标
function huaNew()
{
var positions = [];
//地图上点击事件
map.on('click', function(e)
{
//显示点击的坐标
var lngLat = e.lnglat.getLng() + ',' + e.lnglat.getLat();
//将坐标填的 ul
var html = $('.map-list-add').html();
html += '
[' + lngLat + ']';
positions.push([e.lnglat.getLng(), e.lnglat.getLat()]);
$('.map-list-add').html(html);
});
}
//画多边形的参数
var xian = {
strokeColor: "#FF33FF", //线颜色
strokeOpacity: 0.2, //线透明度
strokeWeight: 3, //线宽
fillColor: "#1791fc", //填充色
fillOpacity: 0.35//填充透明度
};
//画多边形
var mouseTool = new AMap.MouseTool(map);
//在地图中添加MouseTool插件
AMap.event.addDomListener(document.getElementById('huaMarker'), 'click', function()
{
clearMap();
huaNew();
mouseTool.polygon(xian);
}, false);
//默认加载的多边形
$(function ()
{
var markers = [], positions = [];
var valRegion = '[116.97174,36.707879],[116.986675,36.681658],[116.983241,36.677665],[116.954059,36.675256],';
var len = $('.map-list-hidden li').length;
for(var p=0; p < len; p++) {
var posit = [];
var defaultLng = $('.map-list-hidden li:eq('+p+') span:eq(0)').html();
var defaultLat = $('.map-list-hidden li:eq('+p+') span:eq(1)').html();
posit.push(parseFloat(defaultLng));
posit.push(parseFloat(defaultLat));
positions.push(posit);
}
$('textarea[name=region]').val(valRegion);
//编辑多边形
var _polygon = (function(){
var arr = positions;
xian.path = positions;
xian.map = map;
return new AMap.Polygon(xian);
})();
//编辑多边形初始化
_polygonEditor = new AMap.PolyEditor(map, _polygon);
//开始编辑
startEditPolygon = function(){
_polygonEditor.open();
}
//结束编辑
closeEditPolygon = function(){
var html = '', htmlText = '';
_polygonEditor.close();
var a = _polygon.getPath();
for(var q = 0; q < a.length; q++) {
var posit = [];
posit.push(parseFloat(a[q]['lng']));
posit.push(parseFloat(a[q]['lat']));
html += "
[" + posit + "],";
htmlText += "[" + posit + "],";
}
$('.map-list-add').html(html);
$('textarea[name=region]').val(htmlText);
}
});
参考:
http://lbs.amap.com/api/javascript-api/guide/create-map/show-map 显示地图
http://lbs.amap.com/api/javascript-api/guide/draw-on-map/marker-point 点标注
http://lbs.amap.com/api/javascript-api/example/marker/marker-content 点标注例子
http://lbs.amap.com/api/javascript-api/example/overlayers/polyline-circle-polygon 折线、多边形、圆例子
http://lbs.amap.com/api/javascript-api/example/mouse-operate-map/mouse-draw-overlayers 鼠标绘制点线面
http://lbs.amap.com/faq/web/javascript-api/327 鼠标工具绘制覆盖物,如何获取覆盖物的位置/范围/路径?
http://lbs.amap.com/api/javascript-api/example/overlayers/edit-polyline-circle-polygon 编辑折线、多边形、圆
http://lbs.amap.com/faq/web/javascript-api/editpolygon-getpath 编辑多边形后如何获取多边形的路径?
php用高德地图api坐标返回市_php 使用高德地图(一) 画多边形及编辑 获取坐标 (简单总结)...相关推荐
- 高德地图api,利用鼠标工具完成电子围栏-----圆形,矩形,自定义并获取坐标
需求:根据下拉框选择的不同,在地图上绘制不同的图形并获取坐标.这篇文章只完成了部分功能,电子围栏最终版在我的另一篇文章中,大家可以选择性查看.电子围栏终版 注意,这个要在全局中引入amap 1,先下载 ...
- php用高德地图api坐标返回市_php百度坐标转高德坐标(示例代码)
php处理表里存储的坐标进行转换 基于thinkphp3.2框架写的方法 public function gaoDe() { set_time_limit(0); //防止超时 $VillageDb= ...
- vue调用百度地图API实现点击相应位置切换地图定位
vue调用百度地图API实现点击相应位置切换地图定位 1.需求分析 在页面显示地图,初始状态显示上海市,地图上有特定地点的标注. 左侧为建筑(地点)列表,点击某个地点右侧地图定位到其地理位置并显示具体 ...
- 基于百度地图API在AI Studio上的卫星地图块图像处理与分类
基于百度地图API在AI Stduio上的瓦片地图块图像处理与分类 项目介绍 本项目基于百度地图API获取了不同的瓦片地图并进行合并等处理,可用于遥感和抽象地图的地图块的图像分类.分割.检测等数据的制 ...
- 【百度地图API】如何制作一张魔兽地图!!——CS地图也可以,哈哈哈
[百度地图API]如何制作一张魔兽地图!!--CS地图也可以,哈哈哈 原文:[百度地图API]如何制作一张魔兽地图!!--CS地图也可以,哈哈哈 摘要: 你玩魔兽不?你知道如何做一张魔兽地图不?! 快 ...
- 高德地图api调用demo_微信小程序----高德地图API实现的DEMO
[实例简介] 微信小程序----高德地图API实现的周边,天气,路线规划,地址详情等的DEMO.简单的效果,问一下官方能不能不要乱涨积分,你们涨积分,作者被骂!我真的很失望,再这样,我就不上传资源了! ...
- html高德地图api使用教程,快速上手-入门-教程-地图 JS API | 高德地图API
按照「准备」篇完成页面准备工作之后就可以真正开始地图的开发工作了.本篇带您快速了解:地图.图层.点标记.矢量图形.信息窗体.事件的最基本使用方法. HELLO,AMAP! 简单创建一个地图只需要一行代 ...
- [WEB地图] 2017高德地图API WEB开发(key申请,地图搭建)简约教程
前端时间因为公司需要研究 了一下百度的教程 然后写个简约的笔记记录一下自己学习的收获,只为了满足自己暂时的写作热情 高德地图WEB开发(key申请.api)简约教程 1.首先我们需要去"高德 ...
- 用百度地图API打造方便自己使用的手机地图
有钱人咱就不说了,因为偶是个穷银--因为穷,所以去年买的Huawei C8650+到现在还在上岗,对于没有钱买好的配置的手机的童鞋来说,类似于百度,谷歌,高德等商家的地图在自己的机器上跑起来确实是有点 ...
- 百度地图API快速调用,一键生成百度地图
对于在网站或者网页之内插入百度地图插件,可能很多编程技术人员都知道如何来做,但是做起来所花费的时间都比较长,那么下面跟大家分享一下如何快速调用百度地图API,一件生成百度地图的方法,这种方法适用于任何 ...
最新文章
- OpenStack环境搭建(一:Virtual Box 5.1 环境的安装及配置)
- 我学UML建模系列之核心元素 -------- 参与者
- centos代码切换图形_沙迪克慢走丝代码大全,G代码、T代码、M代码(值得收藏)...
- python爬虫今日头条_python爬虫—分析Ajax请求对json文件爬取今日头条街拍美图
- csv导入mysql_mysql导入超大csv指南
- 机器学习算法_无监督机器学习算法:主成分分析
- java中new与newitance_你真的弄明白 new 了吗
- 一、struts入门
- voice VLAN配置案例
- 元宇宙里过节,英伟达快速打造「冬日仙境」,占地 16 万平米!
- 云社区博客博客详情火瞳智慧通行助力疫情防控及安全出行
- Spring Boot 支持 HTTPS 如此简单,So easy!
- VS报错:没有足够的内存继续执行程序
- VCS(DVE)仿真波形的存储和打开.vpd
- HTTP Status 406 -with characteristics not acceptable according to the request accept headers.
- 银联支付宝微信共同构筑刷脸支付新生态
- 文本生成图像工作简述3--技术难点、研究意义、应用领域和目前的局限性
- 初次体验PDF.JS,非常好用的pdf前台包
- 服务器安装erp系统教程视频教程,erp服务器客户端如何安装教程
- Log4J的rootLogger的理解