百度地圖作網點地圖-jeecms

  以前總以爲什麼插件,框架。。都有api和既有的套路去實現,會很容易實現。。。。。然而今天把百度地圖用於公司設備的網點地圖,仍是耗時挺多的~~這裏僅僅是爲了記錄一下完成了這個功能!就是把全部點都顯示在地圖上,開始不知道有方法了,本身想應該怎麼去實現,怎麼才能把全部點放在地圖裏面,獲取全部點x、y的最大最小值。。。。。哈哈,後面才發現百度已經有作這個方法,直接扔數組進去就o了~~~~~api

網站用了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); //開啓信息窗口
    }
相關文章
相關標籤/搜索