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

Dear 丶 2022-05-27 12:13 516阅读 0赞

首次使用高德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>

![SouthEast][]

参考：

[http://lbs.amap.com/api/javascript-api/guide/create-map/show-map][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_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_marker_marker-content]  点标注例子

[http://lbs.amap.com/api/javascript-api/example/overlayers/polyline-circle-polygon][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_api_javascript-api_example_mouse-operate-map_mouse-draw-overlayers] 鼠标绘制点线面

[http://lbs.amap.com/faq/web/javascript-api/327][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_api_javascript-api_example_overlayers_edit-polyline-circle-polygon] 编辑折线、多边形、圆

[http://lbs.amap.com/faq/web/javascript-api/editpolygon-getpath][http_lbs.amap.com_faq_web_javascript-api_editpolygon-getpath] 编辑多边形后如何获取多边形的路径？

[SouthEast]: /images/20220527/2b73364ba60349a19a649c4333113f21.png
[http_lbs.amap.com_api_javascript-api_guide_create-map_show-map]: 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/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/marker/marker-content
[http_lbs.amap.com_api_javascript-api_example_overlayers_polyline-circle-polygon]: 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/api/javascript-api/example/mouse-operate-map/mouse-draw-overlayers
[http_lbs.amap.com_faq_web_javascript-api_327]: 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/api/javascript-api/example/overlayers/edit-polyline-circle-polygon
[http_lbs.amap.com_faq_web_javascript-api_editpolygon-getpath]: http://lbs.amap.com/faq/web/javascript-api/editpolygon-getpath

发表评论取消回复

表情：

评论列表（有 0 条评论，516人围观）

还没有评论，来说两句吧...

相关阅读

相关地图：nuxt3高德地图简单使用

一、官方网站 [https://lbs.amap.com/api/jsapi-v2/guide/abc/prepare][https_lbs.amap.com_api_jsa

川长思鸟来/ 2024年03月30日 17:33/ 0 赞/ 44 阅读

相关获取地图多边形点坐标

一、百度地图AK密钥申请 1、密钥申请地址：http://lbsyun.baidu.com/apiconsole/key 2、密钥申请配置：（1）应用类型：浏览器端；

水深无声/ 2023年03月14日 05:30/ 0 赞/ 281 阅读

相关 PHP高德地图描点,引用高德地图描点画行动轨迹

arr数组中存放地址的经纬度 function initMap(arr)\{ mapObj = new AMap.Map("staff\_track\_index\_map

秒速五厘米/ 2022年11月19日 01:25/ 0 赞/ 248 阅读

相关 uniapp 使用高德地图

<template> <view> <view class="map" id="map"></view> </view> </t

分手后的思念是犯贱/ 2022年09月02日 12:50/ 0 赞/ 404 阅读

相关高德地图API的简单使用

<meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">

港控/mmm°/ 2022年06月03日 09:45/ 0 赞/ 392 阅读

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

首次使用高德api的话要先申请一个高德的key 主要说明: 1. 高德地图展示 2. 高德地图点击获取坐标 3. 高德地图鼠标绘制多边形 4. 高

Dear 丶/ 2022年05月27日 12:13/ 0 赞/ 517 阅读

相关高德地图点击获取坐标

<link href="<?=Yii::getAlias('@resUrl/css/manage.css');?>" rel="stylesheet">

刺骨的言语ヽ痛彻心扉/ 2022年05月17日 11:09/ 0 赞/ 459 阅读

相关 Kibana使用高德地图

说明目前Kibana默认自带的地图全部是英文，更换高德地图对地图汉化修改配置 1. 编辑kibana配置文件kibana.yml，最后面添加 ti

秒速五厘米/ 2022年02月26日 07:24/ 0 赞/ 329 阅读

相关 Vue - 高德地图获取所点击位置的经纬度坐标

一. 在最外层的html.js中引入高德key ![在这里插入图片描述][20200519103055746.png] ![在这里插入图片描述][watermark_t

本是古典何须时尚/ 2021年07月26日 02:52/ 0 赞/ 1967 阅读

相关高德地图基本使用

1、引入 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15

比眉伴天荒/ 2021年07月24日 22:01/ 0 赞/ 607 阅读