利用Geolocator和本地搜索的Google搜索
我正在使用这个资源指南根据用户的IP地址：https://developers.google.com/maps/documentation/javascript/geolocation建立一个动态地图位置缺省值
我还想做的是将搜索词传递到这个API查询中，以便它为“指甲沙龙”生成结果。
我不知道该怎么做。有人有什么建议吗？
回答 1
Stack Overflow用户
发布于 2017-12-05 09: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>
就这样！
希望这有助于和快乐的编码！
https://stackoverflow.com/questions/47523236
复制相似问题
腾讯云开发者
