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（周边的名称）和

formatted_address（周边的详细地址）。

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.

marker方法主要是调用了实例化了Google的Marker方法，并将对应的周边坐标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的效果图

转载于:https://juejin.im/post/5c0b364a6fb9a049ac78f8e8