景點地圖開發實戰

  幾個月前作過一個小程序，雖然沒什麼訪問量，可是我以爲沒有一個相對應的官網就不是一個完整的網站，因而拖拖拉拉了好幾個月終於開始了官網的製做，因爲pc端權限的事情，因此官網只能是展現一些基礎信息，其中最複雜的即是景點地圖。

    大致效果：

 關於景點地圖，我選取了高德地圖進行二次開發，雖然高德地圖也能夠經過搜索景點+城市來搜索完整的城市，可是畢竟自由度不高，本身想隨機修改調整一些東西不是很方便，因此我選擇抓取數據到服務器。  

    

    一.抓取數據

    經過對各大旅遊網站的分析，用php抓取了各類景點的信息及相對應的圖片並存到本身的服務器（北京）。

    

    二.建立地圖

    a.建立覆蓋物

    關於建立地圖高德的api講的很詳細，這裏很少描述。景點信息是從數據庫查詢的，因爲數據量太大，採起了分頁的形式，經過ajax獲取數據並添加到地圖上。

    自定義marker很簡單，只須要本身製做一張圖片便可。

function create_marker(data){
    var marker_data = {
        icon : '/static/images/marker.png',//自定義圖片
        position : [data.longitude,data.latitude],  
        offset : new AMap.Pixel(-12,-12),
        map : map,
        content : ''
    })
    return new AMap.Marker(data);
}

$.each(data,function(i,val){  // 對ajax的數據進行解析
    var marker = create_marker(val);
    marker.setExtData(val);  // setExtData用於將本身的數據存儲到marker上，由於後面有一個聯動的操做
    setTimeout(function(){
        // 對marker綁定點擊，鼠標通過事件
        AMap.event.addListener(marker, 'click', that.marker_click.bind(that));
        AMap.event.addListener(marker, 'mouseover', that.marker_over.bind(that));
        AMap.event.addListener(marker, 'mouseout', that.mouseout.bind(that));
    },0)
    markers.push(marker);  // 定義一個數組來存儲全部marker
})

     

    b.綁定事件

    每個自定義的marker有以下事件：1.鼠標通過顯示景點名稱，同時將該marker層級調整到最高；2.鼠標點擊顯示景點詳細信息

marker_over : function(e){
    this.ismouseover = true;
    this.showWindow(e.target); // 咱們須要的信息都在e.target裏
},
showWindow : function(marker){  // 鼠標通過顯示景點名稱
    //實例化信息窗體
    var that = this;
    // marker.getExtData()獲取以前自定義的內容
    var title = (marker.getExtData()).name;
    var infoWindow = new AMap.InfoWindow({
        isCustom: true,  //isCustom設置爲true時表示使用自定義窗體，這時content將會爲信息窗口顯示的內容
        content: that.create_simple_window(title), // 該函數返回dom
        offset: new AMap.Pixel(16, -20)
    });

    infoWindow.open(map, marker.getPosition());
    marker.setTop({isTop:true})
},
create_simple_window : function(title, content){ 
    // 拼接自定義的信息窗口，包括內容 class 等，固然用jquery的話最方便
    var wraper = document.createElement("div");
    wraper.className = 'map_info_wraper';
    var info = document.createElement("div");
    info.className = "map_title_info";
    info.innerHTML = title;
    wraper.appendChild(info);
    return wraper;
},

// 點擊事件與mouseover相似，不一樣的是點擊須要獲取更多的信息，生成的dom結構也要更復雜一些，這裏再也不贅述。

   

    c.左側列表與marker聯動

    左側列表點擊或鼠標通過的時候直接觸發marker的點擊（marker_click）或hover(marker_hover)事件。

$('.tourist_list').on('click','li',function(){  
    // 列表與marker之間經過惟一的id來關聯，在對列表進行操做的時候，咱們只須要判斷當前id與哪一個marker對應便可
    $(this).toggleClass('active');
    var id = $(this).attr('tid');
    render_map.marker_click({target : that.check_target(id)})
})   

// 找出列表對應的marker
var ele ;
$.each(this.markers,function(i,val){  
    // 經過對咱們以前存儲的marker列表進行循環找出對應的marker。
    if((val.getExtData()).id === id){
        ele = val;
        return false;
    }
})
return ele;

   

    d.行程路線

    這塊內容比較簡單，惟一須要注意的是若是要經過下面形式調用路徑查詢功能，咱們在引入高德地圖的js後面必須加上plugin=對應的插件，多個也能夠這麼加：

   <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.2&key=key&plugin=AMap.Transfer,AMap.Driving,AMap.Riding"></script>​

var trans,drive,walk;
var transOptions = {
    map: map,
    city: '北京市',
    panel: 'route_result'
};

var transfer = new AMap.Transfer(transOptions);

var routes = {
    'transfer' : new AMap.Transfer(transOptions),
    'riding'   : new AMap.Riding({
        map: map,
        panel: "route_result"
    }) ,
    'driving'  : new AMap.Driving({
        map: map,
        panel: "route_result"
    })
}

// 查詢的時候直接調用便可
var search_route = [
    {keyword: start,city:'北京'},
    {keyword: end,city:'北京'}
];
var flag = $('.route_line_tab .active').attr('fn');
routes[flag].search(search_route,function(){
    $('#route_result .waiting').remove();
});

　　至此，一個景點地圖就搞定了，在線預覽請點擊  徒遊記