從谷歌地點獲取附近位置，並在結果中在谷歌地圖上添加標記

編輯：已解決。糾正問題代碼下面的代碼。從谷歌地點獲取附近位置，並在結果中在谷歌地圖上添加標記

我無法讓我的代碼正常工作。我想要做的是使用地理定位來確定用戶的位置。然後我想搜索一個字符串（在這個例子中，「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

從谷歌地點獲取附近位置，並在結果中在谷歌地圖上添加標記

回答

相關問題