从谷歌地点获取附近位置，并在结果中在谷歌地图上添加标记

编辑：已解决。纠正问题代码下面的代码。从谷歌地点获取附近位置，并在结果中在谷歌地图上添加标记

我无法让我的代码正常工作。我想要做的是使用地理定位来确定用户的位置。然后我想搜索一个字符串（在这个例子中，“Systembolaget”），在2000的半径内找到一些东西，并在谷歌地图上显示结果。我在地图上找到自己的位置，但是我有

什么我做错了大麻烦的地方结果。？我没有那么多的经验从JavaScript，因此所有的帮助是很好的帮助。

如果你想知道关于科尔多瓦脚本，因为我做了PhoneGap的应用程序是必要的。

<!DOCTYPE html> 
<meta charset="UTF-8"> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<script src="cordova-1.6.0.js"></script> 
<style type="text/css"> 
    html { height: 100% } 
    body { height: 100%; margin: 0; padding: 0 } 
    #map_canvas { height: 100% } 
</style> 
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=MYAPIKEY&sensor=true"></script> 
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script> 
<script type="text/javascript"> 
// Determine support for Geolocation and get location or give error 
if (navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(displayPosition, errorFunction); 
} else { 
    alert('It seems like Geolocation, which is required for this page, is not enabled in your browser. Please use a browser which supports it.'); 
} 

// Success callback function 
function displayPosition(pos) { 
    var mylat = pos.coords.latitude; 
    var mylong = pos.coords.longitude; 
    //Load Google Map 
    var latlng = new google.maps.LatLng(mylat, mylong); 
    var myOptions = { 
    zoom: 16, 
    center: latlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

// Places 
var request = { 
    location: latlng, 
    radius: '2000', 
    name: ['Systembolaget'] 
}; 

var service = new google.maps.places.PlacesService(map); 
service.search(request, callback); 

function callback(results, status) 
{ 
    if (status == google.maps.places.PlacesServiceStatus.OK) 
    { 
     for (var i = 0; i < results.length; i++) 
     { 
      var place = results[i]; 
      var loc = place.geometry.location; 
      var marker = new google.maps.Marker 
      ({ 
       position: new google.maps.LatLng(loc.Pa,loc.Qa) 
      }); 
      marker.setMap(map); 
     } 
    } 
} 

var marker = new google.maps.Marker({ 
    position: latlng, 
    map: map, 
    title:"You are here" 
}); 
} 

// Error callback function 
function errorFunction(pos) { 
    alert('It seems like your browser or phone has blocked our access to viewing your location. Please enable this before trying again.'); 
} 
</script> 
</head> 
<body> 
     <div id="map_canvas"></div> 
</body>

已解决！正确的代码！

<!DOCTYPE html> 
<meta charset="UTF-8"> 
<html> 
<head> 
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> 

<title name="title"></title> 

<link rel="stylesheet" type="text/css" href="style.css"> 
<script src="cordova-1.6.0.js"></script> 

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script> 
<script type="text/javascript"> 

// Determine support for Geolocation and get location or give error 
if (navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(displayPosition, errorFunction); 
} else { 
    alert('It seems like Geolocation, which is required for this page, is not enabled in your browser. Please use a browser which supports it.'); 
} 

// Success callback function 
function displayPosition(pos) { 
    var mylat = pos.coords.latitude; 
    var mylong = pos.coords.longitude; 
    //Load Google Map 
    var latlng = new google.maps.LatLng(mylat, mylong); 
    var myOptions = { 
    zoom: 16, 
    center: latlng, 
    mapTypeId: google.maps.MapTypeId.HYBRID 
}; 

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

// Places 
var request = { 
    location: latlng, 
    radius: '20000', 
    name: ['whatever'] 
}; 

var service = new google.maps.places.PlacesService(map); 
service.search(request, callback); 

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

    function createMarker(place) { 
     var placeLoc = place.geometry.location; 
     var marker = new google.maps.Marker({ 
     map: map, 
     position: place.geometry.location 
     }); 
     } 

var marker = new google.maps.Marker({ 
    position: latlng, 
    map: map, 
    title:"You're here" 
}); 


} 

// Error callback function 
function errorFunction(pos) { 
    alert('It seems like your browser or phone has blocked our access to viewing your location. Please enable this before trying again.'); 
} 
</script> 
</head> 
<body> 
    <div id="map_canvas"></div> 
</body>

来源

2012-04-25 Joakim Bananskal

很难给你具体的帮助，因为你还没有真正描述你究竟是如何失败的。但我注意到的一件事情是，您似乎试图加载两次google.maps脚本，每个脚本中都有不同的sensor信息。在您的第一个google.maps脚本标记中，包含文字MYAPIKEY，这必须是不正确的。如果你有一个变量真正的关键，我希望是这样的：

src="http://maps.googleapis.com/maps/api/js?key=" + MYAPIKEY + "&sensor=true"

，然后在第二个脚本标签，你似乎可以正确加载地库，但随后传感器的标签设置为：sensor-false。您的第二个脚本标记对我来说显得更加正确，因此我建议将第一个脚本标记作为开始。

从那里，你可以提供更多关于你的页面失败的细节，也可能是一个页面的链接？

一些补充意见：

您最初的if-else看起来好像它会调用displayPosition功能，但内displayPosition代码将不会加载谷歌地图;它只是创建了一些在功能结束时超出范围的变量。
在displayPosition函数之外，您创建了一个新的Google Map实例，但它引用了myOptions，该代码中此时不再存在，因为它只存在于displayPosition函数的范围内。

我建议改变以图建立喜欢的东西相关的代码：

var map = null; 
if (navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(displayPosition, errorFunction); 
} else { 
    alert('It seems like Geolocation, which is required for this page, is not enabled in your browser. Please use a browser which supports it.'); 
} 

// Success callback function 
function displayPosition(pos) { 
    var mylat = pos.coords.latitude; 
    var mylong = pos.coords.longitude; 
    //Load Google Map 
    var latlng = new google.maps.LatLng(mylat, mylong); 
    var myOptions = { 
     zoom: 16, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
}

来源

2012-04-25 13:05:11

嘿！我以为我需要加载谷歌地图和谷歌地方库，但就像你建议的那样，它没有第一行。问题仍然是一样的，我没有在地图上得到任何结果/标记！当然，当我将代码上传到stackoverflow时，我用“myapikey”切换了我的真正apikey！ :)由于我正在寻找一个phonegapp应用程序，因此该页面只在本地工作。 – 2012-04-26 05:47:50

我可以将结果打印到控制台，所以我知道我正在获取它们，但是我没有让它们在地图上显示出来！ – 2012-04-26 05:58:46

此外，我认为这是因为我有两个变量称为“标记”，但它不起作用，即使我为我自己的位置注释掉标记。 – 2012-04-26 06:14:45

从谷歌地点获取附近位置，并在结果中在谷歌地图上添加标记

回答

相关问题