谷歌地图API的地理位置+雷达地点搜寻 [英] Google maps API geolocation + radar places search
本文介绍了谷歌地图API的地理位置+雷达地点搜寻的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图同时使用地理位置和地方从谷歌地图API来与我身边最近的地方显示的地图（我的位置）。这两个例子单独工作，却不能在一起。
谁能告诉我为什么有问题呢？我会覆盖另一个地图或做别的事情了？
＆LT;脚本类型=文/ JavaScript的
SRC =https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyA93l5zPyIvGB7oYGqzLSk28r5XuIs2Do8
＆放大器;传感器=真放;库=地方＆GT;＆LT; / SCRIPT＆GT; ＆LT;脚本＆GT;
VAR地图;
VAR服务;
VAR标记;
VAR POS;
函数初始化（）{ VAR的MapOptions = {
变焦：15
};
地图=新google.maps.Map（的document.getElementById（'地图画布'），
的MapOptions）; //尝试HTML5地理定位
如果（navigator.geolocation）{
navigator.geolocation.getCurrentPosition（功能（位置）{
POS =新google.maps.LatLng（position.coords.latitude，
position.coords.longitude）;
VAR信息窗口=新google.maps.InfoWindow（{
地图：地图，
位置：POS机，
内容：位于
}）; map.setCenter（POS）
}，函数（）{
handleNoGeolocation（真）;
}）;
}其他{
//浏览器不支持的Geolocation
handleNoGeolocation（假）;
} VAR请求= {
位置：POS机，
半径：500，
类型：'商店']
}; 信息窗口=新google.maps.InfoWindow（）;
VAR的服务=新google.maps.places.PlacesService（图）
service.nearbySearch（请求，回调）; 回调函数（结果状态）{
如果（状态== google.maps.places.PlacesServiceStatus.OK）{
对于（VAR I = 0; I＆LT; results.length;我++）{
createMarker（结果[I]）;
}
}
}
}功能createMarker（地方）{
VAR placeLoc = place.geometry.location;
VAR的标记=新google.maps.Marker（{
地图：地图，
位置：place.geometry.location
}）; google.maps.event.addListener（标记，'点击'，功能（）{
infowindow.setContent（place.name）;
infowindow.open（地图，这一点）;
}）;
}功能handleNoGeolocation（errorFlag）{
如果（errorFlag）{
VAR内容='错误：地理定位服务失败。;
}其他{
VAR内容='错误：您的浏览器没有按\\'吨支持地理位置'。
} VAR的选择= {
地图：地图，
位置：新google.maps.LatLng（60，105）
内容：内容
}; VAR信息窗口=新google.maps.InfoWindow（选件）;
map.setCenter（options.position）;
}google.maps.event.addDomListener（窗口'负荷'，初始化）;
＆LT; / SCRIPT＆GT;
的修改的
现在移动code，所以它看起来像 - 没有固定位置的问题是不确定的。
如果（navigator.geolocation）{
navigator.geolocation.getCurrentPosition（功能（位置）{ VAR请求= {
位置：POS机，
半径：500，
类型：'商店']
}; 信息窗口=新google.maps.InfoWindow（）;
VAR的服务=新google.maps.places.PlacesService（图）
service.nearbySearch（请求，回调）;
POS =新google.maps.LatLng（position.coords.latitude，
position.coords.longitude）;
VAR信息窗口=新google.maps.InfoWindow（{
地图：地图，
位置：POS机，
内容：位于
}）; map.setCenter（POS）
}，函数（）{
handleNoGeolocation（真）;
}）;'
解决方案
由于异步调用的到 navigator.geolocation.getCurrentPosition（）并立即返回，请求位置属性未定义。来电
service.nearbySearch（请求，回调）;
抱怨位置丢失。而由于 POS 未设置在那一刻，这是真的。
您必须移动code的这一部分：
VAR请求= {
位置：POS机，
半径：500，
类型：'商店']
}; 信息窗口=新google.maps.InfoWindow（）;
VAR的服务=新google.maps.places.PlacesService（图）
service.nearbySearch（请求，回调）;
到
navigator.geolocation.getCurrentPosition（功能（位置）{
...
map.setCenter（POS）
和使变量信息窗口全球
这是改变初始化（）功能：
VAR地图;
VAR服务;
VAR标记;
VAR POS;
VAR信息窗口;
函数初始化（）{ VAR的MapOptions = {
变焦：15
}; 地图=新google.maps.Map（的document.getElementById（'地图画布'）的MapOptions）;
的console.log（图） //尝试HTML5地理定位
如果（navigator.geolocation）{
navigator.geolocation.getCurrentPosition（功能（位置）{
POS =新google.maps.LatLng（position.coords.latitude，
position.coords.longitude）; 信息窗口=新google.maps.InfoWindow（{
地图：地图，
位置：POS机，
内容：位于
}）; map.setCenter（POS） VAR请求= {
位置：POS机，
半径：500，
类型：'商店']
}; 信息窗口=新google.maps.InfoWindow（）;
VAR的服务=新google.maps.places.PlacesService（图）
service.nearbySearch（请求，回调）;
}，函数（）{
handleNoGeolocation（真）;
}）;
}其他{
//浏览器不支持的Geolocation
handleNoGeolocation（假）;
} 回调函数（结果状态）{
如果（状态== google.maps.places.PlacesServiceStatus.OK）{
对于（VAR I = 0; I＆LT; results.length;我++）{
的console.log（后/到createMarker'）;
createMarker（结果[I]）;
}
}
}
}
I am trying to use both Geolocation and Places from the google maps API to display a map (at my location) with the nearest places around me. The two examples work seperately but not together.
Can anyone tell me why there is a problem with this? am I overwriting the map with another or doing something else wrong?
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyA93l5zPyIvGB7oYGqzLSk28r5XuIs2Do8
&sensor=true&libraries=places"></script>
<script>
var map;
var service;
var marker;
var pos;
function initialize() {
var mapOptions = {
zoom: 15
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
// Try HTML5 geolocation
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
var infowindow = new google.maps.InfoWindow({
map: map,
position: pos,
content: 'Located'
});
map.setCenter(pos);
}, function() {
handleNoGeolocation(true);
});
} else {
// Browser doesn't support Geolocation
handleNoGeolocation(false);
}
var request = {
location:pos,
radius:500,
types: ['store']
};
infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.nearbySearch(request,callback);
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);
});
}
function handleNoGeolocation(errorFlag) {
if (errorFlag) {
var content = 'Error: The Geolocation service failed.';
} else {
var content = 'Error: Your browser doesn\'t support geolocation.';
}
var options = {
map: map,
position: new google.maps.LatLng(60, 105),
content: content
};
var infowindow = new google.maps.InfoWindow(options);
map.setCenter(options.position);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
EDIT
Moved the code now so it looks like - Has not fixed the problem of location being undefined.
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var request = {
location:pos,
radius:500,
types: ['store']
};
infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.nearbySearch(request,callback);
pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
var infowindow = new google.maps.InfoWindow({
map: map,
position: pos,
content: 'Located'
});
map.setCenter(pos);
}, function() {
handleNoGeolocation(true);
});'
解决方案
Because of async call to navigator.geolocation.getCurrentPosition() which returns immediately, location property of request is undefined. Call to
service.nearbySearch(request,callback);
complains that location is missing. And that is true because pos is not set at that moment.
You have to move this part of code:
var request = {
location:pos,
radius:500,
types: ['store']
};
infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.nearbySearch(request,callback);
to
navigator.geolocation.getCurrentPosition(function(position) {
...
map.setCenter(pos);
and make variable infoWindow global.
This is changed initialize() function:
var map;
var service;
var marker;
var pos;
var infowindow;
function initialize() {
var mapOptions = {
zoom: 15
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
console.log(map);
// Try HTML5 geolocation
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
infowindow = new google.maps.InfoWindow({
map: map,
position: pos,
content: 'Located'
});
map.setCenter(pos);
var request = {
location:pos,
radius:500,
types: ['store']
};
infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.nearbySearch(request,callback);
}, function() {
handleNoGeolocation(true);
});
} else {
// Browser doesn't support Geolocation
handleNoGeolocation(false);
}
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
console.log('after / to createMarker');
createMarker(results[i]);
}
}
}
}
这篇关于谷歌地图API的地理位置+雷达地点搜寻的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
