高德地图通过地图点击复制经纬度数据 ——限定地图围栏范围内

╰半橙微兮° 2022-09-03 04:25 10阅读 0赞

## 高德地图通过地图点击复制经纬度数据 ——限定地图围栏范围内 ##

如果只要获得对应省市区县看我上一篇文章  
[高德地图通过地图点击 复制指定行政区域的经纬度数据][Link 1]

继续上次的指定行政区域获得经纬度，此次再来新增一个烂笔记。

**下面先说下需求：**

在高德地图上有一个指定的园区，园区里面有一堆企业。但是呢，只给了该园区的地理围栏数据，在地图上已经渲染了该园区的位置。那么，对应企业呢，要放上去。经纬度只要求在该园区内就行。那么问题来了，怎么才能快速获得一个在该园区范围内的点呢？那么，请继续往下走。

不说太多 了，直接上干货：

直接复制下面代码，放在[高德官方示例-获取鼠标点击经纬度][-]

![111][]

**直接复制下面代码哦**

<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
        <title>鼠标拾取地图坐标</title>
        <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
        <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
    </head>
    <style type="text/css">
        html,body{
            width: 100%;
            height: 100%;
            margin: 0px;
        }
        .map{
            height: 100%;
            width: 100%;
            float: left;
        }
    </style>
    <body>
    <div id="container" class="map"></div>
    <div class="input-card">
        <h4>左击获取经纬度：</h4>
        <div class="input-item">
          <input type="text" readonly="true" id="lnglat">
        </div>
    </div>
    
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&plugin=AMap.Autocomplete"></script>
    <script type="text/javascript">
        var map = new AMap.Map("container", {
            resizeEnable: true
        });
        //为地图注册click事件获取鼠标点击出的经纬度坐标
        map.on('click', function(e) {
            document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat()
        });
       function showInfoP(e){
            //var text = '您在 [ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ] 的位置点击了多边形！'
            //document.querySelector("#text").innerText = text;
            document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat()
    
        }
      //下面替换成你自己的地图围栏数据就行
      var polygonArr = [[116.403322, 39.920255],
            [116.410703, 39.897555],
            [116.402292, 39.892353],
            [116.389846, 39.891365]];
        var polygon = new AMap.Polygon({
            map: map,
            path: polygonArr,//设置多边形边界路径
            strokeColor: "#FF33FF", //线颜色
            strokeOpacity: 0.2, //线透明度
            strokeWeight: 3,    //线宽
            fillColor: "#1791fc", //填充色
            fillOpacity: 0.35//填充透明度
        });
        polygon.on('click', showInfoP);
        map.setFitView();
    </script>
    </body>
    </html>

**可能上面的不规则区域看的不明显，  
那么来个正常的地理围栏数据**  
![1图片][1]

下面来个正常点的地理围栏数据（安徽某个工业园区）的用例  
同样是直接复制下面代码，放在[高德官方示例-获取鼠标点击经纬度][-]

<!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
        <title>鼠标拾取地图坐标</title>
        <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
        <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
    </head>
    <style type="text/css">
        html,body{
            width: 100%;
            height: 100%;
            margin: 0px;
        }
        .map{
            height: 100%;
            width: 100%;
            float: left;
        }
    </style>
    <body>
    <div id="container" class="map"></div>
    <div class="input-card">
        <h4>左击获取经纬度：</h4>
        <div class="input-item">
          <input type="text" readonly="true" id="lnglat">
        </div>
    </div>
    
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&plugin=AMap.Autocomplete"></script>
    <script type="text/javascript">
        var map = new AMap.Map("container", {
            resizeEnable: true
        });
        //为地图注册click事件获取鼠标点击出的经纬度坐标
        map.on('click', function(e) {
            document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat()
        });
       function showInfoP(e){
            //var text = '您在 [ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ] 的位置点击了多边形！'
            //document.querySelector("#text").innerText = text;
            document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat()
    
        }
      //下面替换成你自己的地图围栏数据就行
      var polygonArr = [
        [
            118.56084116578201,
            30.059856027277235
        ],
        [
            118.5592683209207,
            30.058725545033163
        ],
        [
            118.55749887045171,
            30.05710354876993
        ],
        [
            118.55975983493985,
            30.054695130076038
        ],
        [
            118.56030050036094,
            30.054990038487535
        ],
        [
            118.5623157078395,
            30.052581619793642
        ],
        [
            118.56393770410273,
            30.050861320726575
        ],
        [
            118.56482242933723,
            30.049976595492083
        ],
        [
            118.56560885176788,
            30.048944416051842
        ],
        [
            118.5684104816771,
            30.046732602965616
        ],
        [
            118.57224429102656,
            30.050124049697832
        ],
        [
            118.56988502373459,
            30.052827376803222
        ],
        [
            118.56811557326562,
            30.054842584281786
        ],
        [
            118.56605121438513,
            30.056612034750767
        ],
        [
            118.56379024989698,
            30.058234031014003
        ],
        [
            118.56157843681076,
            30.0600526328849
        ],
        [
            118.56098861998777,
            30.059856027277235
        ],
        [
            118.56098861998777,
            30.059856027277235
        ],
        [
            118.56084116578201,
            30.059856027277235
        ]
    ];
        var polygon = new AMap.Polygon({
            map: map,
            path: polygonArr,//设置多边形边界路径
            strokeColor: "#FF33FF", //线颜色
            strokeOpacity: 0.2, //线透明度
            strokeWeight: 3,    //线宽
            fillColor: "#1791fc", //填充色
            fillOpacity: 0.35//填充透明度
        });
        polygon.on('click', showInfoP);
        map.setFitView();
    </script>
    </body>
    </html>

![图片2][2]

[Link 1]: https://blog.csdn.net/IDOshi201109/article/details/117560226
[-]: https://lbs.amap.com/demo/javascript-api/example/map/click-to-get-lnglat
[111]: /images/20220829/03fbef6c11b04d02afaf6a39515814d1.png
[1]: /images/20220829/9f0b95d66395409589069dc316ac64d1.png
[2]: /images/20220829/9d62e1185829402783dad9b9d25b1841.png