使用下拉菜單在谷歌地圖上切換位置

我是新來的谷歌地圖，我有一個帶有多個標記的地圖，我想使用下拉菜單在它們之間切換。使用下拉菜單在谷歌地圖上切換位置

我使用這個代碼來填充標記稱號的下拉菜單：

// select a marker from dropdown menu 
$("select#mySelect").change(function(){ 
     gotoMarker($(this).val()); 
}); 

function makeMarkerList() { 
     var options = ""; 
     $("select#mySelect").empty(); 
     for (var i in markers) { 
      options += "<option value='" + i + "'>" + markers[i].map.title + "</option>"; 
     } 
     $("select#mySelect").html(options); 
}

這是我迄今爲止jsfiddle

這顯示在地圖上方的下拉菜單中，但我不知道如何在下拉菜單中獲取標記標題。

我感謝您的幫助。

謝謝。

來源

2013-04-17 kumo99

我覺得你非常有它。在makeMarkerList函數中，而不是標記[i] .map.title，只需要標記[i] .title。我沒有看到任何東西調用這個函數，但你會想要做下面的事情來確保函數在文檔加載後調用：'$（document）.ready（function（）{makeMarkerList（）;}） ;' –

謝謝，我設法讓下拉菜單有標記標題作爲選項。現在，我已經添加了map.panTo（）以將選定的標記居中在地圖上，但仍然不起作用。您能幫助嗎？這是upated jsfiddle：[link]（http://jsfiddle.net/ymLvv/167/） – kumo99

關於您的第二個問題：您的原始代碼（如下所示）試圖將下拉列表中所選項目的值傳遞給panTo()方法。但是，由於您設置的方式，該值只是markers陣列中標記的索引，而不是LatLng對象。將該索引傳遞給panTo()方法會產生錯誤。

$("select#mySelect").change(function(){ 
     //gotoMarker($(this).val()); 
    map.panTo($(this).val().getPosition()); 
});

爲了解決這個問題，得到的指數，然後用相應的標記從您的markers陣列：

$("select#mySelect").change(function(){ 
    var index = $(this).val(); 
    map.panTo(markers[index].position); 
});

來源

2013-04-18 05:20:39

感謝您的幫助..現在，當我手動將LatLng值添加到select選項值時，panTo不再移動。該警報顯示正確的值，但。我很感激，如果你能檢查我更新的[jsfiddle]（http://jsfiddle.net/ymLvv/187/）謝謝 – kumo99

這是一個[基於你最新的工作小提琴]（http://jsfiddle.net/sunild/ ydmK2 /）。由於您已將'select'中的值更改爲包含緯度/經度的以逗號分隔的字符串，因此您現在需要從該字符串構造一個新的'LatLng'對象。此外，雖然你的選擇說，位置是加利福尼亞州和直流，你使用的實際緯度/經度值不在那些位置附近;） –

我錯了，認爲返回值不需要分裂..謝謝你Sunil :) – kumo99

使用下拉菜單在谷歌地圖上切換位置

回答

相關問題