景点地图开发实战

  几个月前作过一个小程序，虽然没什么访问量，可是我以为没有一个相对应的官网就不是一个完整的网站，因而拖拖拉拉了好几个月终于开始了官网的制做，因为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();
});

　　至此，一个景点地图就搞定了，在线预览请点击  徒游记