如何从使用 geonames webservice 的下拉菜单中提取位置值来构建更新的 google 地图

Question

我有一个下拉菜单，它使用 geonames webservice 在层次结构中显示 country/state/city 的列表当我 select 此下拉菜单中的某个位置时，它应该会自动更新此菜单下 div 中的 google 地图并放大该位置。如何从此下拉菜单中提取位置以构建基于 google 地图位置的位置？我的菜单代码如下：

 <script type="text/javascript" src="http://vikku.info/programming/js/geodata-jsr-class.js"></script>
<script type="text/javascript">
var whos=null;
function getplaces(gid,src)
{   
    whos = src

//  var  request = "http://ws.geonames.org/childrenJSON?geonameId="+gid+"&callback=getLocation&style=long";
    var request = "http://www.geonames.org/childrenJSON?geonameId="+gid+"&callback=listPlaces&style=long";
    aObj = new JSONscriptRequest(request);
    aObj.buildScriptTag();
    aObj.addScriptTag();    
}

function listPlaces(jData)
{
    counts = jData.geonames.length<jData.totalResultsCount ? jData.geonames.length : jData.totalResultsCount
    who = document.getElementById(whos)
    who.options.length = 0;

    if(counts)who.options[who.options.length] = new Option('Select','')
    else who.options[who.options.length] = new Option('No Data Available','NULL')

    for(var i=0;i<counts;i++)
        who.options[who.options.length] = new Option(jData.geonames[i].name,jData.geonames[i].geonameId)

    delete jData;
    jData = null        
}

window.onload = function() { getplaces(6295630,'continent'); }
</script>



<div class='main'>
<h1></h1>
<form id="myform" >
<div class="contents">
<b>*Select area</b>
<p><span>Continent:</span>  <select   name="continent" id="continent" onchange="getplaces(this.value,'country');">
<option value=""></option>                      
</select>
</p>
<p><span>Country:</span> <select name="country" id="country" onchange="getplaces(this.value,'province');">
<option value=""></option>                      
</select>
</p>
<p><span>State / Provice:</span> <select name="province" id="province" onchange="getplaces(this.value,'region')">
<option value=""></option>
</select>
</p>
<p><span>County / Region:</span> <select name="region" id="region" onchange="getplaces(this.value,'city')">
<option value=""></option>
</select>
</p>
<p><span>City:</span> <select name="city" id="city">
<option value=""></option>
</select>
</p>
</div>
</form>

这是菜单的工作演示： http://liveweave.com/6dfhN3

Answer 1

geonames 服务提供坐标。正确缩放地图是棘手的部分。下面的 fiddle 使用 Google 地图地理编码器进行缩放（地理编码器无法找到所有地名 "names"）。

proof of concept fiddle

var whos = null;
var placedata = [];
var map;
var geocoder = new google.maps.Geocoder();

function getplaces(gid, src) {
    if ( !! placedata[gid]) {
        map.setCenter({
            lat: parseFloat(placedata[gid].lat),
            lng: parseFloat(placedata[gid].lng)
        });
        switch (src) {
            case "continent":
                map.setZoom(3);
                break;
            case "country":
                map.setZoom(5);
                break;
            case "province":
                map.setZoom(6);
                break;
            case "region":
                map.setZoom(7);
                break;
            case "city":
                map.setZoom(8);
                break;
        }
    }
    whos = src;

    var request = "http://www.geonames.org/childrenJSON?geonameId=" + gid + "&callback=listPlaces&style=long";
    aObj = new JSONscriptRequest(request);
    aObj.buildScriptTag();
    aObj.addScriptTag();
}

function listPlaces(jData) {
    counts = jData.geonames.length < jData.totalResultsCount ? jData.geonames.length : jData.totalResultsCount;
    who = document.getElementById(whos);
    who.options.length = 0;

    if (counts) who.options[who.options.length] = new Option('Select', '');
    else who.options[who.options.length] = new Option('No Data Available', 'NULL');

    for (var i = 0; i < counts; i++) {
        who.options[who.options.length] = new Option(jData.geonames[i].name, jData.geonames[i].geonameId);
        placedata[jData.geonames[i].geonameId] = jData.geonames[i];
    }

    delete jData;
    jData = null;
}
function zoomto(gid) {
   if ( !! placedata[gid]) {
        map.setCenter({
            lat: parseFloat(placedata[gid].lat),
            lng: parseFloat(placedata[gid].lng)
        });
       map.setZoom(14);
   }
}
window.onload = function () {
    getplaces(6295630, 'continent');
    map = new google.maps.Map(document.getElementById('map_canvas'), {
        zoom: 3,
        center: {
            lat: 0,
            lng: 0
        }
    });
};

html, body, #map_canvas {
    height: 500px;
    width: 500px;
    margin: 0px;
    padding: 0px
}

<script src="http://vikku.info/programming/js/geodata-jsr-class.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div class='main'>
    
<h1></h1>

    <form id="myform">
        <div class="contents">
<b>*Select area</b>

            <p><span>Continent:</span> 
                <select name="continent" id="continent" onchange="getplaces(this.value,'country');">
                    <option value=""></option>
                </select>
            </p>
            <p><span>Country:</span> 
                <select name="country" id="country" onchange="getplaces(this.value,'province');">
                    <option value=""></option>
                </select>
            </p>
            <p><span>State / Provice:</span> 
                <select name="province" id="province" onchange="getplaces(this.value,'region')">
                    <option value=""></option>
                </select>
            </p>
            <p><span>County / Region:</span> 
                <select name="region" id="region" onchange="getplaces(this.value,'city')">
                    <option value=""></option>
                </select>
            </p>
            <p><span>City:</span> 
                <select name="city" id="city" onchange="zoomto(this.value)">
                    <option value=""></option>
                </select>
            </p>
        </div>
    </form>
    <div id="map_canvas"></div>

如何从使用 geonames webservice 的下拉菜单中提取位置值来构建更新的 google 地图

How can extract locations values from a dropdown menu that use geonames webservice for build a updated google map

google-maps

menu

geonames

drop-down-menu