利用百度地图API进行GPS坐标转换成百度地图坐标，创建点，标签，多边形

最新推荐文章于 2023-08-23 13:34:04 发布

卖身买镜头

最新推荐文章于 2023-08-23 13:34:04 发布

阅读量401

点赞数

文章标签： javascript html

本文链接：https://blog.csdn.net/qq_40922589/article/details/105620982

版权

利用百度地图API进行GPS坐标转换成百度地图坐标，创建点，标签，多边形

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,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
        </style>
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你自己百度api key"></script>
        <title>百度地图</title>
    </head>
    <body>
        <div id="allmap"></div>
    </body>
    </html>
    <script type="text/javascript">
    
    // 百度地图API功能
      var map = new BMap.Map("allmap");
      map.centerAndZoom("吉林",12);

      map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放  
      
      //添加混合地图
      var mapType1 = new BMap.MapTypeControl(
            {
                mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP],
                anchor: BMAP_ANCHOR_TOP_LEFT
            }
      );
    
    
        var overView = new BMap.OverviewMapControl();
        var overViewOpen = new BMap.OverviewMapControl({isOpen:true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT});
        //添加地图类型和缩略图
    
        map.addControl(mapType1);          //2D图，混合图
        map.addControl(overView);          //添加默认缩略地图控件
        map.addControl(overViewOpen);      //右下角，打开
    
    
        //添加城市列表
        var size = new BMap.Size(10, 20);
        map.addControl(new BMap.CityListControl({
            anchor: BMAP_ANCHOR_TOP_RIGHT,
            offset: size,
            // 切换城市之前事件
            // onChangeBefore: function(){
            //    alert('before');
            // },
            // 切换城市之后事件
            // onChangeAfter:function(){
            //   alert('after');
            // }
        }));
        //定义点
        var points1 = [new BMap.Point(126.559902,43.872105),
                        new BMap.Point(126.56908145602,43.87305),
                        new BMap.Point(126.55136,43.85723), 
                        new BMap.Point(126.566736,43.867276),
                        //new BMap.Point(126.416781,43.998281),
                        new BMap.Point(126.576647,43.861497),
                        new BMap.Point(126.56513,43.85111),
                        new BMap.Point(126.571492,43.837029),
                        new BMap.Point(126.5484023,43.88186216),
                        new BMap.Point(126.590386111111,43.839225),
                        new BMap.Point(126.557552,43.883093),
                        new BMap.Point(126.56193,43.8797),
                        new BMap.Point(126.5765977,43.87548923)
            ]; 
        //创建点和标签函数

        Create_points = function(points){
        // 添加点和标签
            for (var i = 0; i < points.length; i++) {
                translateCallback = function (data){
                if(data.status === 0) {
                    var marker = new BMap.Marker(data.points[0]);
                    map.addOverlay(marker);
                    var str1 = "转换后的百度坐标点";
                    var str2 = i;
                    var str3 = str1.concat(str2);
                    var label = new BMap.Label(str3,{offset:new BMap.Size(0,0)});
                    marker.setLabel(label); //添加百度label
                    //map.setCenter(data.points[0]);
                }
                }
                //经纬度转换功能
                var convertor = new BMap.Convertor();
                var pointArr = [];
                pointArr.push(points[i]);
                convertor.translate(pointArr, 1, 5, translateCallback);
            }
        }
        //调用函数创建点和标签
        Create_points(points1);

        //创建多边形的点
        var Polygon_points = [
                        new BMap.Point(126.559902,43.872105),
                        new BMap.Point(126.55136,43.85723),
                        new BMap.Point(126.416781,43.998281),
                        new BMap.Point(126.5484023,43.88186216),
                        new BMap.Point(126.56193,43.8797)
        ]
            
        //创建多边形添加函数
        Create_Polygon = function(points){
            //创建多边形
            Polygon_translateCallback = function (data){
                if(data.status === 0) {
                    var polygon = new BMap.Polygon(data.points, {
                        strokeColor:"red", //线颜色
                        strokeWeight:2, //线宽度
                        strokeOpacity:1,//线透明度
                        fillColor:"blue", //填充颜色
                        fillOpacity:0.5,//填充透明度
                        enableClicking:true//是否相应点击，默认为true
                        });                      
                    map.addOverlay(polygon);  
                    
                }
            }
            //多边形坐标转换
            var convertor = new BMap.Convertor();
            convertor.translate(points, 1, 5, Polygon_translateCallback);
        }
        //调用创建多边形添加函数
        Create_Polygon(Polygon_points);

        //显示行政区
        function getBoundary(C_name){       
            var bdary = new BMap.Boundary();
            bdary.get(C_name, function(rs){       //获取行政区域
                //map.clearOverlays();        //清除地图覆盖物       
                var count = rs.boundaries.length; //行政区域的点有多少个
                if (count === 0) {
                    alert('未能获取当前输入行政区域');
                    return ;
                }
                var pointArray = [];
                for (var i = 0; i < count; i++) {
                    var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#ff0000"}); //建立多边形覆盖物
                    map.addOverlay(ply);  //添加覆盖物
                    pointArray = pointArray.concat(ply.getPath());
                }    
                //map.setViewport(pointArray);    //根据对象调整视野  
                //addlabel();               
            });   
        }
        //var names = ["昌邑区","龙潭区"	,"船营区"	,"丰满区"	,"永吉县"	,"蛟河市",	"桦甸市",	"舒兰市",	"磐石市"]
        var names = ["长春市","吉林市"]
        for (var i = 0; i < names.length; i++) {
            getBoundary(names[i]);
        }
    </script>

最后HTML呈现效果如下：
在这里插入图片描述

卖身买镜头

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
利用百度地图API进行GPS坐标转换成百度地图坐标，创建点，标签，多边形

利用百度地图API进行GPS坐标转换成百度地图坐标，创建点，标签，多边形HTML代码如下：<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" conten...
复制链接

扫一扫