zoukankan      html  css  js  c++  java
  • 百度地图中的标注

    使用多个定义好的城市标注,需要用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>


    红色部分就是标注的主要地方
  • 相关阅读:
    Javascript常用代码
    Node.cluster
    swift3.0 hello swift(1)
    vs2013 linq to mysql
    ThinkPHP5作业管理系统中处理学生未交作业与已交作业信息
    ThinkPHP5 Model分层及多对多关联的建立
    ThinkPHP5中Session的使用
    用户登陆模块的后端实现
    使用BootStrapValidator来完成前端输入验证
    空间session失效的解决方法
  • 原文地址:https://www.cnblogs.com/wjm956/p/6145719.html
Copyright © 2011-2022 走看看