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

【问题标题】：Google Map Geolocation and Showing a business type谷歌地图地理位置和显示业务类型
【发布时间】：2018-03-31 08:34:45
【问题描述】：

首先我要感谢所有可以帮助我的人，并说我是开发的初学者。

我正在尝试为 具有地理定位功能的 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>

它工作正常，但现在，我正在阅读有关地点和类型的信息，但我没有成功。

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

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

乔迪五世。 CarRentals.Deals

【问题讨论】：

标签： google-maps-api-3 types geolocation google-places-api

【解决方案1】：

Google Places JavaScript 库中的函数使您的应用程序能够搜索包含在定义区域（例如地图边界）内的地点（在此 API 中定义为场所、地理位置或显着的兴趣点），或者围绕一个固定点。

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

在我的示例中，我使用了附近搜索 - 让您可以按关键字或类型搜索指定区域内的地点。它使用 PlacesService 的 nearSearch() 方法，该方法将返回一个 PlaceResult 对象数组。要了解更多信息，您可以查看 this 链接。现在让我们看一下代码分解。

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

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

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

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。

希望对你有帮助！

【讨论】：

您好，非常感谢。完美运行！！！希望它可以帮助其他人。最好的问候。
如果我的回答对你有帮助，你介意接受吗？谢谢:)