Question

首先，我要感谢大家可以帮助我，并说我是开发人员的先驱。

我正在尝试设置带有地理位置的Google地图的代码，仅显示租车类型的地方标记。我的想法是，当我的网页访问者进入网站时，地图会将访客位置进行地理定位，地图只显示附近的租车地点。

我收到了地理定位的Google代码：

<div id="map" style="width: 100%; height: 500px;"></div>
<script>
  // Note: This example requires that you consent to location sharing when
  // prompted by your browser. If you see the error "The Geolocation service
  // failed.", it means you probably did not give permission for the browser to
  // locate you.

  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: -34.397, lng: 150.644},
      zoom: 6
    });
    var infoWindow = new google.maps.InfoWindow({map: map});

    // Try HTML5 geolocation.
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        var pos = {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        };

        infoWindow.setPosition(pos);
        infoWindow.setContent('Location found.');
        map.setCenter(pos);
      }, function() {
        handleLocationError(true, infoWindow, map.getCenter());
      });
    } else {
      // Browser doesn't support Geolocation
      handleLocationError(false, infoWindow, map.getCenter());
    }
  }

  function handleLocationError(browserHasGeolocation, infoWindow, pos) {
    infoWindow.setPosition(pos);
    infoWindow.setContent(browserHasGeolocation ?
                          'Error: The Geolocation service failed.' :
                          'Error: Your browser doesn\'t support geolocation.');
  }
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=[MYAPIKEY]&callback=initMap">
</script>

它运作良好，但现在，我正在阅读地方和类型，我不会成功。

有什么想法吗？有人可以帮帮我吗？

提前致以最诚挚的问候和谢意。

Jordi V. CarRentals.Deals

Answer 1

Google Places JavaScript库中的功能使您的应用程序可以搜索定义区域中包含的位置（在此API中定义为场所，地理位置或突出的兴趣点），例如地图的边界，或者在固定点附近。

Google Places API提供了一项自动填充功能，您可以使用该功能为您的应用提供Google地图搜索字段的预先键入搜索行为。当用户开始键入地址时，自动填充将填写其余部分。有关详情，请参阅 autocomplete documentation 。

在我的示例中，我使用附近搜索 - 允许您按关键字或类型搜索指定区域内的地点。它使用PlacesService的nearbySearch（）方法，该方法将返回PlaceResult对象的数组。要了解详情，您可以查看 this 链接。现在让我们来看看代码细分。

 var service = new google.maps.places.PlacesService(map);
        service.nearbySearch({
                  location: location,
                  radius: 500,
                  type: ['car_rental']
 }, callback);

您可以使用属性＆＃39; bounds＆＃39;或者＆＃39; location＆＃39;，在我们的例子中，我们正在使用＆＃39; location＆＃39;。请注意，如果您使用＆＃39; location＆＃39;，您还需要提供＆＃39; radius＆＃39;属性。允许的最大半径＆＃39;是5万米。我们还使用了＆＃39; type＆＃39;属性。它将结果限制为与指定类型匹配的位置。只能指定一种类型（如果提供了多种类型，则忽略第一个条目后面的所有类型）。请参阅 list of supported types 。

回调函数接受两个参数。结果和状态。您可以创建自己的参数名称。这个（回调）是我们将添加您想要执行的代码的地方，如果状态为＆＃39;论证没问题。回调函数：

function( results, stat ){
          if (stat === google.maps.places.PlacesServiceStatus.OK) {
             for (var i = 0; i < results.length; i++) {
              var place = results[i];
              createMarker(results[i], map);           
             }           
          }     
        });     

 });

如果结果没问题，则返回的值在数组中，因此您需要遍历每个数组并将其显示为Google Markers。要详细了解Google标记，您可以查看 this 。这是createMarker函数的定义：

function createMarker(place, map) {
    var placeLoc = place.geometry.location;
    infowindow = new google.maps.InfoWindow();
    var marker = new google.maps.Marker({
      map: map,
      position: place.geometry.location
});
  google.maps.event.addListener(marker, 'click', function() {
      infowindow.setContent(place.name);
      infowindow.open(map, this);
  });
}

此处填写完整代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title></title>
  <style>
    html,body,#map {
      width:100%;
      height:100%;
    }
  </style>
</head>
<body>
<div id="map"></div> 
<script async defer
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=places">
</script>
<script>
function initMap() {
var map;
var infowindow;
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
var location = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
map = new google.maps.Map(document.getElementById('map'), {
    center:location,
     zoom: 12
});
var service = new google.maps.places.PlacesService(map);
service.nearbySearch({
location: location,
radius: 500,
type: ['car_rental']
}, function( results, stat ){
if (stat === google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
var place = results[i];
createMarker(results[i], map);           
}           
}     
});     
});
} else {
alert("Browser doesn't support Geolocation");
}
} 
function createMarker(place, map) {
var placeLoc = place.geometry.location;
infowindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
    map: map,
    position: place.geometry.location
});

google.maps.event.addListener(marker, 'click', function() {
  infowindow.setContent(place.name);
  infowindow.open(map, this);
});
}    
</script>  
</body>
</html>

演示 here 。

希望它有所帮助！

谷歌地图地理位置和显示业务类型

1 个答案: