这篇文章介绍的内容是关于php 使用高德地图(一) 画多边形及编辑 获取坐标 (简单总结)，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下
首次使用高德api的话要先申请一个高德的key
主要说明:
1. 高德地图展示
2. 高德地图点击获取坐标
3. 高德地图鼠标绘制多边形
4. 高德地图鼠标 编辑多边形并获取坐标
<style>
.map-list{float: left; margin-left: 10px;}
.pbot10{ padding-bottom: 10px;}
.marleft{ margin-left: 10px;}
</style>
<p class="panel panel-default">
<p class="panel-body">
<p>
<p id="container" style="width: 70%; height: 500px; float: left;"></p>
<p style="margin-bottom: 5px;">
<ul class="map-list-add">
<?php
foreach ($oldregionarr as $k => $v):
?>
<li>
[<?=$v;?>],
</li>
<?php endforeach;?>
</ul>
<ul class="map-list-hidden hidden">
<?php foreach ($oldlnglatarr as $key => $val):?>
<li>
<?php foreach ($val as $k => $v):?>
<span><?=$v;?></span>
<?php endforeach;?>
</li>
<?php endforeach;?>
</ul>
<textarea class="form-control hidden" name="region" rows="3">
</textarea>
</p>
<a class="btn btn-primary btn-sm fl" id="clearmarker" onclick="clearmap()">清空所有
</a>
<a class="btn btn-primary btn-sm fl marleft" id="huamarker">生成抢修范围
</a>
<br><br>
<a class="btn btn-primary btn-sm fl marleft" id="polyeditor" onclick="starteditpolygon()">开始编辑抢修范围
</a>
<a class="btn btn-primary btn-sm fl marleft" id="circleeditor" onclick="closeeditpolygon()">结束编辑抢修范围
</a>
</p>
</p>
</p>
</p>
</p>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.4&key=高德key&plugin=amap.mousetool,amap.polyeditor,amap.circleeditor">
</script>
<script type="text/javascript">
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 += '<li>[' + lnglat + ']</li>';
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 += <li>[ + posit + ],</li>;
htmltext += [ + posit + ],;
}
$('.map-list-add').html(html);
$('textarea[name=region]').val(htmltext);
}
});
</script>
参考：
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 使用高德地图(一) 画多边形及编辑 获取坐标 (简单总结)的详细内容。