Question

我正在尝试在用户搜索城市并按下搜索按钮时显示Google地图，但我不明白如何正确地执行此操作。这是我到目前为止完成的代码。我不知道如何获取用户输入并检查该城市是否在数组中。如果它在数组中，那么它应该在Google地图上显示它。例如，如果用户键入城市名称Houston，USA，则在检查城市名称是否在我们的数据库中之后，它应显示在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>

Answer 1

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

//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
    }   
}

您可以使用Google的地理编码服务将城市名称转换为经度/纬度坐标：http://code.google.com/apis/maps/documentation/geocoding/（我会让您试验这些说明）

Answer 2

你很近，但你没有正确初始化阵列。

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

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

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();
        }
    }     
}

如何显示城市的Google地图？

2 个答案: