百度地图画多边形

最新推荐文章于 2025-04-16 14:39:48 发布

阿磊_kb

最新推荐文章于 2025-04-16 14:39:48 发布

阅读量1.2k

点赞数

分类专栏：百度地图文章标签：百度地图

本文链接：https://blog.youkuaiyun.com/luweihualulei/article/details/75646450

版权

百度地图专栏收录该内容

2 篇文章

订阅专栏

该博客介绍了如何在百度地图上通过点击一系列点并拉伸中点来创建多边形，用户可以保存多边形并获取其精确的坐标点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
        #allmap {height:500px; width: 100%;}
        #control{width:100%;}
    </style>
    <script type="text/javascript" src="/js/jquery/jquery.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=GxNhfawaxLTS1MBYVkdxm7KI"></script>
    <title>绘制多边形</title>
</head>
<body>
    <div id="allmap" style="width:100%; height: 800px;"></div>
    <input type="hidden" value="" id="lng"/>
    <input type="hidden" value="" id="lat"/>
    <input type="button" value="保存" onclick="save()">

    <script type="text/javascript">
        // 百度地图API功能
        var map = new BMap.Map("allmap",{minZoom:14,maxZoom:19});
        var point = new BMap.Point(104.072222, 30.663469);
        map.centerAndZoom(point, 12);

        var navigationControl = new BMap.NavigationControl({
            anchor : BMAP_ANCHOR_TOP_LEFT,
            type : BMAP_NAVIGATION_CONTROL_LARGE,
            enableGeolocation : true
        });
        map.addControl(navigationControl);

        var points=new Array();
        var num=0;
        var markers=new Array();
        var secRingPolygon=new BMap.Polygon();
        map.addEventListener("click", function(e) {
            num++;
            if(num<=3){
                var point = e.point;
                var marker = new BMap.Marker(point);
                map.addOverlay(marker);
                points.push(point);
                markers.push(marker);
                if(num==3){
                    secRingPolygon = new BMap.Polygon(points, {strokeColor:"red", strokeWeight:3, strokeOpacity:0.5});  //画多边形
                    map.addOverlay(secRingPolygon);   //增加多边形 
                    secRingPolygon.enableEditing();
                }
            }
            if(num>3){
                markers[0].remove();
                markers[1].remove();
                markers[2].remove();
            } 
        }); 
        function save(){
            if(num>0 && num<3){
                alert("二级片区至少需要3个点");
            }else{
                var ayy=secRingPolygon.getPath();
                var lngs_value = "";
                var lats_value = "";
                for(var i=0;i<ayy.length;i++){
                    if(i!=ayy.length-1){
                        lngs_value+=secRingPolygon.getPath()[i].lng+",";
                        lats_value+=secRingPolygon.getPath()[i].lat+",";
                    }else{
                        lngs_value+=secRingPolygon.getPath()[i].lng;
                        lats_value+=secRingPolygon.getPath()[i].lat;
                    }
                } 
                alert("多边形所有点的坐标为："+lngs_value+"|"+lats_value);
            }
        }

    </script>
</body>
</html>`这里写代码片`