高德地图WEB端，在所画的圆（Circle）内显示在圆（Marker）内的点

最新推荐文章于 2024-07-15 17:48:04 发布

Qssn丶

最新推荐文章于 2024-07-15 17:48:04 发布

阅读量1.5w

点赞数 1

分类专栏：个人高德地图文章标签：高德地图圆

本文链接：https://blog.csdn.net/dknightl/article/details/74787775

版权

个人同时被 2 个专栏收录

77 篇文章 0 订阅

订阅专栏

高德地图

3 篇文章 0 订阅

订阅专栏

1.圆和点都是自己定义的，如图：

2.在高德地图的示例中心测试通过，代码如下：

<!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="http://cache.amap.com/lbs/static/main1119.css"/>
    <script src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body>
<div id="container"></div>
<script>
    var map = new AMap.Map('container', {
        resizeEnable: true,
        center: [116.397428, 39.90923],
        zoom: 13
    });


    var circle = new AMap.Circle({
        center: new AMap.LngLat("116.403322", "39.920255"),// 圆心位置
        radius: 1000, //半径
            strokeColor: "#FF33FF", //线颜色
            strokeOpacity: 0.2, //线透明度
            strokeWeight: 3,    //线宽
            fillColor: "#1791fc", //填充色
            fillOpacity: 0.05//填充透明度
    });

          //声明一个list
        var list={
          "size":4,
          "data":[
            {"x":116.397428,"y": 39.921883},
            {"x":116.397428,"y": 39.920213},
            {"x":116.403322,"y": 39.922282},
            {"x":116.403322,"y": 39.920249}
          ]
        }

        for(var j = 0,map;j < list.size; j++){
            var myObj= list.data[j];
            var myLngLat=new AMap.LngLat(myObj.x,myObj.y);
            console.log(circle.contains(myLngLat));
          if(circle.contains(myLngLat)){//如果点在圆内则输出
              var marker = new AMap.Marker({
                   position: myLngLat,
                   map: map
               });
          }

        }

    circle.setMap(map);//显示圆圈
     map.setFitView();//根据地图上添加的覆盖物分布情况，自动缩放地图到合适的视野级别
</script>
</body>
</html>