Google maps api 3 使用地理定位器和本地搜索的谷歌地图API搜索

我正在使用此资源指南根据用户的IP地址建立动态地图位置默认值：

我还想做的是将搜索词传递到这个API查询中，以便它为美甲沙龙生成结果

---

我不知道该怎么做。有人有什么建议吗？

在你的情况下，我建议使用。它可以很容易地用不同类型的应用程序实现。但是现在，我们将把它用于web应用程序，我们将使用它

首先，创建一个简单的地图。你可以复制代码。只需确保使用您自己的API密钥即可。要了解有关如何创建简单地图的更多信息，可以查看

在加载Maps Javascript API的脚本上，添加libraries=places

库是代码模块，为 主映射JavaScript API，但除非您 特别要求他们

若要了解有关Places Library的更多信息，可以查看链接。您的脚本现在如下所示：

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap" async defer></script>

var coordinatesObj = {
   lat: position.coords.latitude,
   lng: position.coords.longitude
};

getCurrentPosition是一个接受参数的方法。该参数返回一个对象，该对象具有很酷的属性，如：纬度、经度。这些属性将在创建地图和PlacesAPI方面发挥重要作用。理想的做法是创建一个可变对象，然后将其用于获取的坐标。大概是这样的：

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap" async defer></script>

var coordinatesObj = {
   lat: position.coords.latitude,
   lng: position.coords.longitude
};

然后将其用于地图的“中心”属性

 map = new google.maps.Map(document.getElementById('map'), {
       center: coordinatesObj,
       zoom: 14
 });

创建一个变量“service”。在这个变量中，我们将创建PlacesService的一个新实例。此对象接受一个参数，即映射ID

var service = new google.maps.places.PlacesService(map);

使用Place service，您可以执行四种搜索：

附近搜索根据用户的位置返回附近地点的列表 文本搜索根据搜索字符串返回附近位置的列表，例如Pizza。 Radar Search deprecated返回指定搜索半径内的大量位置列表，但其详细程度低于邻近搜索或文本搜索。 Place Details请求返回有关特定地点的更详细信息，包括用户评论。 在你的情况下，似乎是最好的选择

附近搜索允许您通过以下方式搜索指定区域内的位置： 关键字或类型

通过调用PlacesService的nearbySearch方法启动PlacesNearnear搜索，该方法将返回一个对象数组

service.nearbySearch({
  location: , // place the coordinates here
  radius: 500,
  type: ['beauty_salon']
}, callback);

在“location”属性上，使用我们从Geolocations的getCurrentPosition方法获取的坐标

请注意，在使用“位置”时，您需要添加一个“半径”属性，并提供500到50000米的数字。要了解更多信息，请检查此选项将非常有用

您还必须将回调方法传递给nearbySearch，以处理results对象和google.maps.places.PlacesServiceStatus响应

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

您还会注意到这个google.maps.event.addListener。它使用地图响应用户事件，如鼠标或键盘事件

这些事件可能看起来像标准DOM事件，但实际上它们是Maps JavaScript API的一部分。因为不同的浏览器实现不同的DOM事件模型，所以Maps JavaScript API提供了这些机制来侦听和响应DOM事件，而无需处理各种跨浏览器特性。这些事件通常还会在事件中传递参数，并注意一些UI状态，如鼠标位置。要了解更多信息，您可以查看

还有一件事，目前我们没有“美甲沙龙”类型。这就是为什么我们在类型属性中使用“美容沙龙”。有关受支持类型的列表，您可以查看以了解更多信息

奖金：

在地图上方的一个弹出窗口中，在给定位置显示内容（通常为文本或图像）。“信息”窗口有一个内容区和一个锥形柄。茎尖连接到地图上的指定位置

var infowindow = new google.maps.InfoWindow();

整个代码如下：

//注意：此示例要求您在以下情况下同意位置共享： //由浏览器提示。如果您在地理定位服务中看到错误 //失败。这意味着您可能没有授予浏览器访问的权限 //找到你。 var映射，信息窗口； 函数初始化映射{ //试试HTML5地理定位。 if navigator.geolocation{ navigator.geolocation.getCurrentPositionfunctionposition{ var坐标Bj={ 纬度：位置坐标纬度， lng:position.coords.longitude }; map=new google.maps.Mapdocument.getElementById'map'{ 中心：协调中心， 缩放：14 }; infowindow=新建google.maps.infowindow； var service=new google.maps.places.PlacesServicemap； 服务，近距离搜索{ 地点：北京协调中心， 半径：500， 类型：[“美容沙龙”] }，回调； }; }否则{ //浏览器不支持地理位置 } } 函数回调结果、状态{ 如果状态===google.maps.places.PlacesServiceStatus.OK{ 对于变量i=0；i你考虑过了吗？我可以看到API键正在其他一些映射上工作，但我似乎无法让代码按照上面所示运行。为了清楚起见，我可以简单地复制上面的所有代码，并将其用作用我自己的API密钥替换API密钥吗？是的，您可以。如果我的回答对你有帮助，你介意投票/接受它吗？谢谢：我正在把这段代码粘贴到和结束标记中。当我回顾它时，我只看到了代码，而没有看到实际的结果。然而，我真的很喜欢学习这个。我觉得我错过了一步。我就快到了，现在有了相对于我位置的地图，我只是在解决没有地方的问题，这是我现在开始做的。搞定它。在对上述问题进行故障排除和解构时，我缺少&libraries=places&callback=initMap。

var infowindow = new google.maps.InfoWindow();