如何显示城市的谷歌地图

How can I display a Google map for city?

本文关键字：城市 谷歌地图 显示 何显示      更新时间：2023-09-26

当用户搜索城市并按下搜索按钮时，我试图显示谷歌地图，但我不知道如何正确显示。这是我迄今为止完成的代码。我不知道如何获取用户输入并检查数组中的城市。如果它在数组中，那么它应该在谷歌地图上显示它。例如，如果用户键入城市名称Houston，USA，则在检查城市名称是否在我们的数据库中后，它应该显示在谷歌地图上。

脚本：

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>

您的数组需要更多的引号才能使每个索引成为自己的字符串：

//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/（我将让您试用这些指令）

您很接近，但没有正确初始化数组。

您也没有存储阵列中每个城市的正确坐标。

相反，尝试使用自定义对象来存储允许的城市名称及其坐标（纬度和经度），并查看这些名称来确定显示内容：

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();
        }
    }     
}
相关文章：