百度地图中的标注

Posted 2020-08-22 草根级

使用多个定义好的城市标注,需要用for来循环一下,不然出现的是一个,或者不显示任何的标注

<script type="text/javascript">
      // 百度地图API功能
      var map = new BMap.Map("container");
      map.centerAndZoom(new BMap.Point(106.234, 38.54), 5);
      map.addControl(new BMap.NavigationControl()); //添加默认缩放平移控件
      map.disableAutoResize();
      //map.enableScrollWheelZoom();
      var opts = {
         width : 10,     // 信息窗口宽度
         height: 10,     // 信息窗口高度
         title : "中国主要经济特区" , // 信息窗口标题
         enableMessage:true//设置允许信息窗发送短息
      };function addClickHandler(content,marker){
         marker.addEventListener("click",function(e){
            openInfo(content,e)}
         );
      }
      function openInfo(content,e){
         var p = e.target;
         var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
         var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象
         map.openInfoWindow(infoWindow,point); //开启信息窗口
      }
      var points =[
         [116.688739,23.359289,"汕头"],
         [114.5435,22.5439,"深圳"],
         [113.7305,22.1155,"珠海"],
         [118.103886,24.489231,"厦门"],
         [110.330802,20.022071,"海口"],
         [75.999748,39.475674,"喀什"],
         [80.423594,44.211359,"霍尔果斯"],
         ];
      for( var i = 0;i < points.length; i++){
         var point = new BMap.Point(points[i][0],points[i][1]);
         // 创建标注对象并添加到地图
         var marker = new BMap.Marker(point);
         var content = points[i][2];
         addClickHandler(content,marker);
         map.addOverlay(marker);// 将标注添加到地图中
      };
</script>

 

红色部分就是标注的主要地方