腾讯云

开发者社区

文档建议反馈控制台

首页

文章/答案/技术大牛

发布

社区首页 >问答首页 >利用Geolocator和本地搜索的Google搜索

问利用Geolocator和本地搜索的Google搜索
EN

Stack Overflow用户

提问于 2017-11-27 18:57:15

回答 1查看 229关注 0票数 0

我正在使用这个资源指南根据用户的IP地址：https://developers.google.com/maps/documentation/javascript/geolocation建立一个动态地图位置缺省值

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

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

google-maps-api-3

媒体处理1元起

智能、强大、全面的多媒体数据处理服务，助您提升媒体质量、降低成本，媒体处理套餐低至1元

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-12-05 01:32:21

在您的例子中，我建议使用Google Places API。它可以很容易地实现与不同类型的应用程序。但是现在，我们将在web应用程序中使用它，并且我们将使用场所JavaScript库。

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

在加载Maps Javascript的脚本上，添加"libraries=places“。

库是一种代码模块，它为Maps JavaScript API提供了额外的功能，但是除非您特别请求，否则不会加载它们。

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

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

我们需要得到您的当前位置，所以我们将使用地质化。

地理定位是一种HTML5功能，它在谷歌地图上显示用户或设备的地理位置。

下面是地理定位的代码。它所做的是检查HTML5地理定位是否正确。如果是这样的话，我们将使用getCurrentPosition获取用户的当前坐标，以便以后使用。

   if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
          // add your map and Places API here.
        });
    } else {
      // Browser doesn't support Geolocation
    }
  }

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

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

然后将其用于映射的'center'属性。

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

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

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

使用Place服务，您可以执行四种类型的搜索：

附近的搜索根据用户的位置返回附近位置的列表
文本搜索根据搜索字符串返回附近位置的列表，例如。“比萨”
雷达搜索(不推荐)返回指定搜索半径内的大量位置列表，但其细节小于附近搜索或文本搜索。
Place Details请求返回有关特定位置的更详细信息，包括用户评论。

在您的例子中，附近搜索似乎是最好的选择。

附近的搜索允许您按关键字或类型搜索指定区域内的位置。

附近的搜索是通过调用PlacesService的nearbySearch()方法来启动的，该方法将返回一个PlaceResult对象数组。

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

在'location'属性上，使用我们从地理位置的方法中获得的坐标。

service.nearbySearch({
 location: coordinatesObj,
 radius: 500,
 type: ['beauty_salon']
}, callback);

请注意，当使用'location'时，您需要添加一个'radius'属性，并提供一个500米到50000米的数字。要了解更多，检查这个文档将是非常有帮助的。

还必须将回调方法传递给nearbySearch()，以处理结果对象和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]);
    }
  }
}

当' status '是google.maps.places.PlacesServiceStatus.OK时，这个回调函数会添加一个标记。换句话说，如果状态成功的话。

您还将注意到createMarker()函数。该函数接受一个参数，并在返回的每个位置上创建一个标记。

function createMarker(place) {
 var placeLoc = place.geometry.location;
 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);
 });
}

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

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

还有一件事，目前我们还没有'nail_salon'.类型这就是为什么我们在类型属性中使用的原因。有关受支持类型的列表，您可以检查场所类型以了解更多信息。

奖金：

InfoWindow在地图上方的弹出式窗口中显示特定位置的内容(通常是文本或图像)。信息窗口有一个内容区域和一个锥形阀杆。茎尖连接到地图上的指定位置。

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

以下是整个代码：

      // 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.
      var map, infowindow;
      function initMap() {
        // Try HTML5 geolocation.
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
                var coordinatesObj = {
                    lat: position.coords.latitude,
                    lng: position.coords.longitude
                };
                map = new google.maps.Map(document.getElementById('map'), {
                  center: coordinatesObj,
                  zoom: 14
                });
                infowindow = new google.maps.InfoWindow();
                var service = new google.maps.places.PlacesService(map);
                service.nearbySearch({
                    location: coordinatesObj,
                    radius: 500,
                    type: ['beauty_salon']
                }, callback);
            });
        } else {
          // Browser doesn't support Geolocation
        }
      }
      function callback(results, status) {
        if (status === google.maps.places.PlacesServiceStatus.OK) {
          for (var i = 0; i < results.length; i++) {
            createMarker(results[i]);
          }
        }
      }

      function createMarker(place) {
        var placeLoc = place.geometry.location;
        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);
        });
      }

#map {
        height: 100%;
}
      /* Optional: Makes the sample page fill the window. */
html, body {
        height: 100%;
        margin: 0;
        padding: 0;
}

<div id="map"></div>
<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCzjs-bUR6iIl8yGLr60p6-zbdFtRpuXTQ&libraries=places&callback=initMap">
    </script>