Google map 和Baidu map搜索目标地点周边

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值