php 使用高德地图(一) 画多边形及编辑 获取坐标 (简单总结)

时间：2024-03-27 22:12:34
首次使用高德api的话要先申请一个高德的key
主要说明:
1. 高德地图展示
2. 高德地图点击获取坐标
3. 高德地图鼠标绘制多边形

4. 高德地图鼠标 编辑多边形并获取坐标

<style>
    .map-list{float: left; margin-left: 10px;}
    .pbot10{ padding-bottom: 10px;}
    .marleft{ margin-left: 10px;}
</style>
<div class="panel panel-default">
    <div class="panel-body">
        <div>
            <div id="container" style="width: 70%; height: 500px; float: left;"></div>
                <div 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>
                </div>
                <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>
            </div>
        </div>
    </div>
</div>
</div>
<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>
php 使用高德地图(一) 画多边形及编辑 获取坐标 (简单总结)


参考：

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

相关文章