如何顯示城市的Google地圖？

我試圖在用戶搜索城市並按下搜索按鈕時顯示Google地圖，但我不明白如何正確執行此操作。這是我迄今爲止完成的代碼。我不知道如何接受用戶輸入並檢查城市是否在陣列中。如果它在數組中，那麼它應該顯示在Google地圖上。例如，如果用戶輸入城市名稱Houston，USA，那麼在檢查城市名稱是否在我們的數據庫中後，它應該顯示在Google地圖上。如何顯示城市的Google地圖？

腳本：

function searchResult(cityname) { 
    var namesOfCity = ["houston,boston,newyork,florida"]; 

    //check the user input 

    //if match display it on google map  
} 

function initialize() 
{ 
     if(GBrowserIsCompatible()) { 
      var map = new GMap2(document.getElementById("map")); 
      map.setCenter(new GLatLng(37.4419, -122.1419), 13); 
      map.setUIToDefault(); 
     } 
    }

HTML

<body onload="initialize()" onunload="GUnload()"> 


<input type="text" id="cityname" value="" name=""/> 
    <input id="search" type="button" value="Search" onclick="searchResult('cityname')" /> 
    <div id="map" style="width: 100%; height: 450px; position: relative; background-color: rgb(229, 227, 223);"></div> 

</body>

來源

2012-01-10 Somi Meer

**僅供參考：**谷歌地圖現在使用API版本3，不再需要'body'標籤中的inline JavaScript'onload'和'onunload'等其他巨大改進。請參閱http://code.google.com/apis/maps/documentation/javascript/basics.html – Sparky 2012-01-10 23:45:00

你是接近的，但你沒有正確初始化您的數組。

您還沒有存儲陣列中每個城市的正確座標。

相反，嘗試使用自定義對象存儲允許城市的名字和它們的座標（經度和緯度），看着它來確定如何顯示：

function searchResult(cityname) { 
    var cities = { 
     houston: { 
      lat: /* ... */, 
      long: /* ... */ 
     }, 
     boston: { 
      lat: /* ... */, 
      long: /* ... */ 
     }, 
     'new york': { // note the quotes due to a space in the name 
      lat: /* ... */, 
      long: /* ... */ 
     }, 
     florida: { 
      lat: /* ... */, 
      long: /* ... */ 
     } 
    }; 

    //check the user input 
    var textfield = document.getElementById(cityname); 

    if (textfield) { 
     // look up the lowercase version of the value typed in 
     var coords = cities[textfield.value.toLowerCase()]; 
     //if match display it on google map 
     if (coords) { 
      var map = new GMap2(document.getElementById("map")); 
      map.setCenter(new GLatLng(coords.lat, coords.long), 13); // you could also make the zoom level a property of each city, which would allow you to customise that per city 
      map.setUIToDefault(); 
     } 
    }  
}

來源

2012-01-10 23:38:40 GregL

如何找出經緯度？ – 2012-01-11 08:03:15

查看每個城市的Google地圖或Google地球，以確定要使用的最佳中心點和縮放級別。這會給你最可靠和可靠的結果。 – GregL 2012-01-11 08:44:27

但如何自動獲得？ – 2012-01-11 09:20:15

你的陣列需要更多的報價，使各指標的一個字符串自己：

//instead of using the inline click handler, this will bind a click event handler to your search button 
$('#search').bind('click', searchResults); 

//this is the click event handler for the search button 
function searchResult(event) { 

    //stop the default behavior of the button 
    event.preventDefault(); 

    //cache whitelist of cities and the city that the user typed into the input 
    var namesOfCity = ["houston", "boston", "newyork", "florida"], 
     inputValue = $('#cityname').val().toLowerCase(),//notice the input has been made lower-case to attempt to match it to an index in the namesOfCity array 
     inputAccepted = false; 

    //iterate through the array of accepted city names 
    for (var i = 0, len = namesOfCity.length; i < len; i++) { 

     //check if the current index is equal to user's input 
     if (inputValue == namesOfCity[i]) { 

      //if the current index is equal to the user's input then set a flag to show that fact and stop the loop from iterating any further 
      inputAccepted = true; 
      break; 
     } 
    } 

    //if match display it on google map 
    if (inputAccepted === true) { 
     //update the map here 
    } 
}

您可以使用谷歌的地理編碼服務，把一個城市的名字爲經度/緯度座標：http://code.google.com/apis/maps/documentation/geocoding/（我會告訴你這些指示實驗）

來源

2012-01-10 23:38:55 Jasper

iam nt得到如何得到你可以請舉個例子 – 2012-01-11 09:20:54

如何顯示城市的Google地圖？

回答

相關問題