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

最新推荐文章于 2021-09-29 16:06:22 发布

weixin_34235105

最新推荐文章于 2021-09-29 16:06:22 发布

阅读量861

点赞数

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5c0b364a6fb9a049ac78f8e8

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);
            });
        }复制代码

说明：

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);
        }
    }复制代码