Question

编辑：已解决。在问题代码下面更正代码。

我无法让代码工作。我想要做的是使用地理位置来确定用户的位置。然后我想做一个搜索来找到字符串中的东西（在这种情况下，“Systembolaget”，在半径2000，并在谷歌地图上显示结果。我在地图上得到我自己的位置，但我是在获得场地结果方面遇到大麻烦。

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

如果您对Cordova脚本感到疑惑，那么因为我正在进行手机应用程序，所以这是必要的。

<!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>

Answer 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中的代码不会加载Google地图;当函数结束时，它只会创建一些超出范围的变量。
在displayPosition功能之外，您创建了Google地图的新实例，但它引用了代码中此时不再存在的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);
}

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

1 个答案: