zoukankan      html  css  js  c++  java
  • 百度地图做网点地图-jeecms

      之前总觉得什么插件,框架。。都有api和既有的套路去实现,会很容易实现。。。。。然而今天把百度地图用于公司设备的网点地图,还是耗时挺多的~~这里仅仅是为了记录一下完成了这个功能!就是把所有点都显示在地图上,开始不知道有方法了,自己想应该怎么去实现,怎么才能把所有点放在地图里面,获取所有点x、y的最大最小值。。。。。哈哈,后面才发现百度已经有做这个方法,直接扔数组进去就o了~~~~~

    网站用了jeecms,这里就只放js

        var arr= [];
        var li = [];
    
        [@cms_content_list typeId='1' count='100' channelId='103' orderBy='4']
            [#list tag_list as a5]
                arr.push([${a5.attr.site}, '${a5.title}', '${a5.attr.xxdz}']);
            [/#list]
        [/@cms_content_list]
    
        for(var j=0; j<arr.length; j++){
            li.push(new BMap.Point(arr[j][0],arr[j][1]));
        }
    
        var map = new BMap.Map("map-box");  // 创建地图实例  
            map.enableScrollWheelZoom(true);
            map.setViewport(li);    //设置所有点都在地图上
    
        for(var i = 0; i<arr.length; i++){
            var opts = {
                width : 250,
                offset   : new BMap.Size(0, -22),
                title : '<span class="iwTitle" title="'+ arr[i][2] +'">'+ arr[i][2] +'</span>', // 信息窗口标题 
            };
            var content = '<span class="iwContent" title="'+ arr[i][3] +'">'+ arr[i][3] +'</span>';
            // 创建标注对象并添加到地图 
            var marker = new BMap.Marker(new BMap.Point(arr[i][0], arr[i][1]));    
            map.addOverlay(marker);
            addClickHandler(content,marker,opts);
        }
    
        function addClickHandler(content,marker,opts) {
            marker.addEventListener("click",function(e){
                openInfo(content,e,opts)}
            );
        }
        function openInfo(content,e,opts){
            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); //开启信息窗口
        }
  • 相关阅读:
    MySQL复制延时排查
    SQL优化之【类型转换】
    Twemproxy 介绍与使用
    Redis Cluster 3.0搭建与使用
    unauthenticated user reading from net
    XtraBackup之踩过的坑
    Redis学习之实现优先级消息队列
    如何保证接口的幂等性
    Redis缓存网页及数据行
    Rabbitmq 消费者的推模式与拉模式(go语言版本)
  • 原文地址:https://www.cnblogs.com/JerryWang24/p/6836879.html
Copyright © 2011-2022 走看看