Gmaps地图按黄页显示列表

Question

我已经使用Gmaps.js创建了地图并传递了位置并靠近它的位置，但是当我点击下面的图片时，它通过yellowpages.ca显示列表解释了问题。我是Google maps api的新手。

var map;
var loc;
    $(document).ready(function(){
      map = new GMaps({
        el: '#map',
        lat: -12.043333,
        lng: -77.028333,
        zoom:15,
      });

        GMaps.geocode({
          address: $('#address').val().trim(),
          callback: function(results, status){
            if(status=='OK'){
              var latlng = results[0].geometry.location;
                 lat=latlng.lat();
           lng=latlng.lng();         
    map.setCenter(latlng.lat(), latlng.lng());
              map.addMarker({
                lat: latlng.lat(),
                lng: latlng.lng(),
         icon:$('#mainPin').val().trim(),
              });

 loc=new google.maps.LatLng(latlng.lat(),latlng.lng());
}}});
});
function showplaces(place,urll){
map.removeMarkers();
GMaps.geocode({
          address: $('#address').val().trim(),
          callback: function(results, status){
            if(status=='OK'){
              var latlng = results[0].geometry.location;
              map.setCenter(latlng.lat(), latlng.lng());
              map.addMarker({
                lat: latlng.lat(),
                lng: latlng.lng(),
        icon:$('#mainPin').val().trim(),
              });
      map.addLayer('places', {
          location : loc,
          radius : 500,
          types : [place],
          search: function (results, status) {
            if (status == google.maps.places.PlacesServiceStatus.OK) {
              for (var i = 0; i < results.length; i++) {
                var place = results[i];
                map.addMarker({
                  lat: place.geometry.location.lat(),
                  lng: place.geometry.location.lng(),
                  title : place.name,
                  icon:urll,

                });

              }
            } 
          }
        });  

      }
          }
        });

if(place=='shopping_mall')
   {
   GMaps.geocode({
          address: $('#address').val().trim(),
          callback: function(results, status){
            if(status=='OK'){
              var latlng = results[0].geometry.location;
              map.setCenter(latlng.lat(), latlng.lng());
              map.addMarker({
                lat: latlng.lat(),
                lng: latlng.lng(),
        icon:$('#mainPin').val().trim(),
              });
      map.addLayer('places', {
          location : loc,
          radius : 500,
          types : ['shoe_store','store','department_store'],
          search: function (results, status) {
            if (status == google.maps.places.PlacesServiceStatus.OK) {
              for (var i = 0; i < results.length; i++) {
                var place = results[i];
                map.addMarker({
                  lat: place.geometry.location.lat(),
                  lng: place.geometry.location.lng(),
                  title : place.name,
                  icon:urll,

                });
              }
            } 
          }
        });  

      }
          }
        });



  }



 else if(place=='movie_theater')
   {
   GMaps.geocode({
          address: $('#address').val().trim(),
          callback: function(results, status){
            if(status=='OK'){
              var latlng = results[0].geometry.location;
              map.setCenter(latlng.lat(), latlng.lng());
              map.addMarker({
                lat: latlng.lat(),
                lng: latlng.lng(),
        icon:$('#mainPin').val().trim(),
              });
      map.addLayer('places', {
          location :loc,
          radius : 500,
          types : ['movie_theater','zoo','stadium','night_club'],
          search: function (results, status) {
            if (status == google.maps.places.PlacesServiceStatus.OK) {
              for (var i = 0; i < results.length; i++) {
                var place = results[i];
                map.addMarker({
                  lat: place.geometry.location.lat(),
                  lng: place.geometry.location.lng(),
                  title : place.name,
                  icon:urll,

                });
              }
            } 
          }
        });  

      }
          }
        });

   }


}

Answer 1

你看到的是归属，它是展示它们所必需的。

当然，它不需要多次显示它们。

问题是（你可能称之为bug，我称之为糟糕的实现......天堂知道为什么这么多人使用这些第三方地图 - 只引入错误而不是有用功能的库）。

＆＃34;错误＆＃34;：每次拨打map.addLayer('places')时，都会创建google.maps.places.PlacesService的新实例。每个实例都会打印单独的属性。

Gmaps.js没有选项：

• 定义归属的放置位置
• 使用placesService
的单个实例

我的建议是放弃这个＆＃34;图书馆＆＃34;

如果没有它，请在showplaces的开头检查是否有对象map.singleLayers.places。当它发生时，它是placesService-instance。将此实例用于nearbySearch，而不是map.addLayer('places')。