最新公告
  • 欢迎您光临码巴巴,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • 百度地图api 设置多点标注,点击标注后出现自定义内容

    1.效果展示

     

    2.代码实现

     <!-- Unnamed (形状) -->
    <div id="container" class="ax_default _默认样式"> </div>

     

    3.js代码实现

     <script src="https://api.map.baidu.com/api?v=3.0&ak=自己的秘钥信息"></script>
    
     <script>
      var map; //Map实例
      function map_init() {
    
        var markerArr = [];
    // 后台经纬度接口
        $.ajax({url:"/jsonjie",dataType:"json",async:false,success:function(result){
            result.forEach(function (value,index) {
              markerArr[index] =  { title: value.jiankName, point: value.jiangkongweiz, address: value.indexCode, tel: "12306" };
             })
        }}); 
        map = new BMap.Map("container");
        //第1步:设置地图中心点,新华镇
        var point = new BMap.Point(107.596630, 41.058240);
        //第2步:初始化地图,设置中心点坐标和地图级别。
        map.centerAndZoom(point, 13);
        //第3步:启用滚轮放大缩小
        map.enableScrollWheelZoom(true);
        //第4步:向地图中添加缩放控件
        var ctrlNav = new window.BMap.NavigationControl({
          anchor: BMAP_ANCHOR_TOP_LEFT,
          type: BMAP_NAVIGATION_CONTROL_LARGE
        });
        map.addControl(ctrlNav);
        //第5步:向地图中添加缩略图控件
        var ctrlOve = new window.BMap.OverviewMapControl({
          anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
          isOpen: 1
        });
        map.addControl(ctrlOve);
    
        //第6步:向地图中添加比例尺控件
        var ctrlSca = new window.BMap.ScaleControl({
          anchor: BMAP_ANCHOR_BOTTOM_LEFT
        });
        map.addControl(ctrlSca);
    
        //第7步:绘制点
        for (var i = 0; i < markerArr.length; i++) {
          var p0 = markerArr[i].point.split(",")[0];
          var p1 = markerArr[i].point.split(",")[1];
          var maker = addMarker(new window.BMap.Point(p0, p1), i);
          addInfoWindow(maker, markerArr[i], i);
        }
      }
    
      // 添加标注
      function addMarker(point, index) {
        var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png",
                new BMap.Size(23, 25), {
                   offset: new BMap.Size(10, 25),
                   imageOffset: new BMap.Size(0, 0 - index * 25)
                });
        var marker = new BMap.Marker(point); //删除标注中的ABCDE
        map.addOverlay(marker);
        return marker;
      }
    
      // 添加信息窗口
      function addInfoWindow(marker, poi) {
        //pop弹窗标题
        var title = '<div style="font-weight:bold;color:#CE5521;font-size:14px">' + poi.title + '</div>';
    
    
        //pop弹窗信息
        var html = [];
        html.push('<table cellspacing="0" style="table-layout:fixed;width:100%;font:12px arial,simsun,sans-serif"><tbody>');
        html.push('<tr>');
        // html.push('<td style="vertical-align:top;line-height:16px;width:38px;white-space:nowrap;word-break:keep-all">操作</td>');
        html.push('<td style="vertical-align:top;line-height:16px;text-align: left;"><a  onclick="startVideo(\'' +poi.address +'\')" href="javascript:void(0)">查看监控内容</a> </td>');
        html.push('</tr>');
        html.push('</tbody></table>');
        var infoWindow = new BMap.InfoWindow(html.join(""), { title: title, width: 200 });
    
        var openInfoWinFun = function () {
          marker.openInfoWindow(infoWindow);
        };
        marker.addEventListener("click", openInfoWinFun);
        return openInfoWinFun;
      }
    
      //异步调用百度js
      function map_load() {
        var load = document.createElement("script");
        load.src = "http://api.map.baidu.com/api?v=1.4&callback=map_init";
        document.body.appendChild(load);
      }
      window.onload = map_load;
    
    
      function startVideo(indexCode) {
     
    
      }
    
    
     </script>
    

    1. 本站所有资源来源于用户上传和网络,如有侵权请及时联系站长!

    2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!

    3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!

    4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!

    5. 如有链接无法下载、失效或广告,请联系管理员处理!

    6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

    7. 如遇到加密压缩包,默认解压密码为"mababa.xin",如遇到无法解压的请联系管理员!


    码巴巴-优质代码创造者 » 百度地图api 设置多点标注,点击标注后出现自定义内容

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    一个高级程序员模板开发平台
    问问管理员?

    发表评论

    • 27会员总数(位)
    • 71资源总数(个)
    • 2本周发布(个)
    • 0 今日发布(个)
    • 1038稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情
    升级SVIP尊享更多特权立即升级