从谷歌地方获取附近的位置并从结果中在谷歌地图上添加标记答案

【问题标题】：Fetching nearby locations from google places and adding markers on google map from results从谷歌地方获取附近的位置并从结果中在谷歌地图上添加标记
【发布时间】：2012-05-06 01:59:47
【问题描述】：

编辑：已解决。更正问题代码下方的代码。

我无法让我的代码正常工作。我想要做的是使用地理位置来确定用户的位置。然后我想做一个搜索以从一个字符串中找到一些东西（在这种情况下，“Systembolaget”，半径为 2000，并在谷歌地图上显示结果。我在地图上得到了自己的位置，但我很难获得地点结果。

我做错了什么？我没有太多的 javascript 经验，所以所有的帮助都是很好的帮助。

如果您对 cordova 脚本有疑问，这是必要的，因为我正在做一个 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>

【问题讨论】：

标签： javascript google-maps-api-3 geolocation google-places-api

【解决方案1】：

很难给你具体的帮助，因为你还没有真正准确地描述你是如何失败的。但我马上注意到的一件事是，您似乎试图加载 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，此时代码中不再存在，因为它只存在于@987654328 的范围内@函数。

我建议将与地图创建相关的代码更改为：

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);
}

【讨论】：

嘿！我以为我需要加载谷歌地图和谷歌地方图书馆，但就像你建议的那样，它在没有第一行的情况下工作。问题还是一样，我在地图上没有得到任何结果/标记！当然，当我将代码上传到 stackoverflow 时，我用“myapikey”切换了我的真实 apikey！ :) 该页面仅在我处理时是本地的，因为我要使用 phonegapp 应用程序。
我可以将结果打印到控制台，所以我知道我得到了它们，但我没有让它们显示在地图上！
另外，我还以为是因为我有两个变量叫做“marker”，但即使我为自己的位置注释掉标记，它也不起作用。
请查看我对上面原始答案的补充。
谢谢肖恩！可悲的是，这根本没有显示任何内容。