百度地图 JavaScript API

最新推荐文章于 2024-08-03 16:53:18 发布

tiz198183

最新推荐文章于 2024-08-03 16:53:18 发布

阅读量1.4k

点赞数

分类专栏：百度/Google地图API

本文链接：https://blog.csdn.net/litao2/article/details/8783010

版权

百度/Google地图API 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

示例下载地址：

http://download.csdn.net/detail/tiz198183/5242330

推荐博客：

http://developer.baidu.com/map/jshome.htm 百度地图 JavaScript API

http://www.cnblogs.com/milkmap/ 酸奶小妹

http://blog.csdn.net/harderxin/article/details/7315385 可视区域显示标注

一、控件示例

1、设置版权

二、覆盖层示例

1、自定义标注

        //dataobj =数据 id =显示图层 Lat,Lng=为坐标
        function showbzNodes(dataobj, id, Lat, Lng) {
            var map1 = new BMap.Map("container"); // 创建地图实例
            var point;
            if (id == 0 || id==-1) {
               point = new BMap.Point(112.144, 32.034);//坐标不能是字符串
            } else {
                point = new BMap.Point(Lng,Lat);
            }  
            map1.centerAndZoom(point, 10); // 初始化地图，设置中心点坐标和地图级别
            map1.enableScrollWheelZoom();                  // 启用滚轮放大缩小。
            map1.enableDoubleClickZoom();

         $(dataobj["JsonStr"]).each(function (idx, item) {
             var point1 = new BMap.Point(Number(item.Lng), Number(item.Lat)); // 创建点坐标
             var myLabel = new BMap.Label("<div style='background-image: url(image/" + item.ImgUrl + ");background-repeat: no-repeat;display: block;height: 25px;width: 23px;z-index:"+item.id+"' οnclick='$(\".ComOut\").css(\"z-index\", \"1\").hide();document.getElementById(\"ComOut" + item.id + "\").style.display = \"block\";'></div>",     //为lable填写内容    
                   {offset: new BMap.Size(-11, -30),                  //定位点相对于Label左上角的偏移值(默认Label的左上角 对应 坐标点)  
                    position: point1
                });

             var myLabel2 = new BMap.Label(
             "<div id='ComOut" + item.id + "' class='ComOut'>信息..</div>", { offset: new BMap.Size(-19, -162), position: point1 });

             //label的位置
             myLabel.setStyle({                                   //给label设置样式，任意的CSS都是可以的  
               "backgroundColor": "transparent",
               "borderColor": "transparent",
                //border: "0",                    //边   
               "border-width": "0px",
               "cursor": "pointer"
                                
             });
             myLabel2.setStyle({
                "backgroundColor": "transparent",
                "borderColor": "transparent",
                "color": "#333",
                "border-width": "0px",
                "cursor": "pointer"
             });
             myLabel2.setZIndex(9999999999); //设置覆盖物的zIndex
             map1.addOverlay(myLabel);
             map1.addOverlay(myLabel2); 
          });

            if (id !== 0 && id !== -1) {
                  var a = "ComOut" + id;
                  showbz(a);
            }
            var NavControl=new BMap.NavigationControl({offset: new BMap.Size(15, 40)});//设置控件停靠的偏移量
            map1.addControl(NavControl); //地图平移缩放控件，默认位于地图左上方，它包含控制地图的平移和缩放的功能。
            map1.addControl(new BMap.ScaleControl()); //比例尺控件，默认位于地图左下方，显示地图的比例关系。
            map1.addControl(new BMap.OverviewMapControl()); //缩略地图控件，默认位于地图右下方，是一个可折叠的缩略地图。 
            map1.addControl(new BMap.MapTypeControl());  
            map1.setCurrentCity("襄阳"); // 仅当设置城市信息时，MapTypeControl的切换功能才能可用

            //$("#container div.anchorBL").remove();
        }

2、行政地图