0. 引言
本文主要是总结之前项目中的地图需求:
1.根据后端返回的location(坐标)在地图上marker。
2.可以搜索出该点附近的景点,酒店,餐厅等周边。(需要在地图上marker出来)
3.点击某个周边,可以跳转到Google map或Baidu map 网站上查看该周边的详细信息。
下面分别使用Google map和Baidu map实现以上功能
1.0 Google map
我们可以使用Google map Api 文档上的例子实现第一,第二个需求。这里我们稍微改造一下,让它跟符合我们的业务需求。
var map;
var infowindow;
var service;
var image = '/theme/images/google_marker/google_marker.png';
//init map
function initialize(location,keyword) {
var pyrmont = new google.maps.LatLng(location.lat, location.lng);
map = new google.maps.Map(document.getElementById('map'), {
center: pyrmont,
zoom: 15
});
service = new google.maps.places.PlacesService(map);
infowindow = new google.maps.InfoWindow();
var request = {
location: pyrmont,
radius: '500',
query: keyword
};
service.textSearch(request, callback);
}
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
var place = results[i];
searchDetail(place);
}
}
}复制代码
说明:
1.initialize
方法主要是为了初始话Google map 挂载到map元素上,因为需要查找location附近的周边,所以需要实例化Google map的PlaceService创建地点服务,并通过传入keyword
(要搜索的周边名称)调用textSearch
方法得到周边的信息数组。
2.callback
方法主要是遍历周边信息数组数据,并分别调用searchDetail
方法。由于textSearch
方法返回的每一条周边数据,只有周边的名称(name)和周边的Id(placeId),我们需要的是这个周边的详细信息,这显然是不够的。所以就有了searchDetail方法。
下面介绍searchDetail
方法
function searchDetail(place,current_location) {
service.getDetails({
placeId: place.place_id
},function(place, status) {
placeCallback(place, status, current_location);
});
}
复制代码
说明:
1.searchDetail
方法主要是通过调用Google Api的getDetails
方法,并传入周边的placeID,来获取到周边的详细信息。这里有调用getDetails
方法返回的字段信息。其中就包含了我们需要的url
(跳转到google map查看详情的链接),name
(周边的名称)和
2.回掉函数中的placeCallback
方法是为了将查出来的周边在地图上marker出对应的点,我们稍后会介绍。
1.1使用placeCallback和marker方法实现需求二
function placeCallback (place, status, current_location) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
marker(place,current_location);
}
}
复制代码
function marker(place,current_location){
var placeLoc;
if(place){
placeLoc = place.geometry.location;
}
var marker = new google.maps.Marker({
map: mapTwo,
animation: google.maps.Animation.DROP,
position: current_location || placeLoc,
icon: current_location ? '' : image
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent('<div><strong>' + place.name + '</strong><br>'+ place.formatted_address + '<br><a href="'+place.url+'" target="_blank">'+ 在Google地图上查看+'</a></div>');
infowindow.open(mapTwo, this);
});
}复制代码
说明:
1.
placeLoc
坐标传进去,这让地图上就有了周边的点了。
2.为了使点更生动,我们稍微加上了一点下落的动画效果,animation: google.maps.Animation.DROP
3.为了区分当前位置的坐标点和周边的点,我们需要需要加入icon字段,并判断,如果是当前位置的点,就使用google 自己默认的点,否则使用我们的自定义的一个图片。
4.有了点,但是不能点击查看详情,这是何等的悲催啊!所以我们还需要为marker添加点击事件。并使用infowindow.setContent
方法设置点击后要显示的内容。(这里我们只是显示了名称,地址和跳转到Google map上查看该周边的详细信息)
2.0 使用Baidu map实现以上功能
function initialize(location,keyword){
/*百度地图API功能*/
var map = new BMap.Map('map'); /* 创建Map实例*/
var point = new BMap.Point(location.lng, location.lat);
var marker = new BMap.Marker(point,{
/*指定Marker的icon属性为Symbol*/
icon: new BMap.Symbol(BMap_Symbol_SHAPE_POINT, {
scale: 1.2,/*图标缩放大小*/
fillColor: "red",/*填充颜色*/
fillOpacity: 0.8 /*填充透明度*/
})
});
map.enableScrollWheelZoom();//启用缩放功能
map.addOverlay(marker);//在地图上标上点
map.centerAndZoom(point, 15);
var opts = {
title:title,
enableMessage:false,
}
var info = new BMap.InfoWindow('',opts);/*设置打开窗口的信息,其中point也可以写成marker.getPosition()*/
marker.addEventListener("click",function(){
map.openInfoWindow(info,point);
})
//查找周边信息
if(keyword){
var local = new BMap.LocalSearch(map, {
renderOptions: {map: map, autoViewport: false}
});
local.searchNearby(keyword,point,1000);
}
}复制代码
说明:百度的实现方式跟google的基本都差不多,从代码中的注释中就可以体现出来,这里不作解析。
总结:
1.对比google和百度地图在实现相同的业务需求下,Google的更灵活很多。但是需要翻墙才能使用
2.百度地图在国内的定位比较出色,搜索到的周边也比较真实。毕竟它主要面向的是中国市场。但是在国外地区使用百度地图的话,是基本搜不出周边的。
最后附上两张google map 和baidu map的效果图