4

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

我无法让我的代码正常工作。我想要做的是使用地理位置来确定用户的位置。然后我想做一个搜索以从一个字符串中找到一些东西（在这种情况下，“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>

4

1 回答 1

2

很难给你具体的帮助，因为你还没有真正描述你是如何失败的。但我马上注意到的一件事是，您似乎试图加载 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-25T13:05:11.393 回答