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 编辑多边形后如何获取多边形的路径？