如何使用具有多个位置(地址和邮政编码)的api v3绘制谷歌地图?

时间:2014-05-09 05:57:26

标签: javascript google-maps google-maps-api-3

我处于需要使用具有多个位置的api v3绘制Google地图的情况。这些位置可以是静态地址字符串,如"新德里,印度"或110005,但它们将有几个数字 - 可以用逗号分隔或数组 - 我不知道它们究竟是如何放入代码中的。但我只是想绘制具有多个位置的gmap,因此给定的地图将同时具有9或10个位置。怎么做?你能不能给我一些关于jsfiddle的工作代码。现在我的代码只用一个位置(只有地址而不是邮政编码)来绘制一个gmap,如下所示 -

JavaScript -

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"></script>
<script type="text/javascript">
var geocoder;
var map;
var marker;
function initialize() 
{
    geocoder = new google.maps.Geocoder();
    var myOptions = {
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

function codeAddress()
{
    //var address = "Talwara Township, Punjab";
    var address = document.getElementById("txtaddress").value;
    geocoder.geocode({'address': address}, function(results, status){       
        if(status == google.maps.GeocoderStatus.OK)
        {
            map.setCenter(results[0].geometry.location);
            marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location
            });

            var infowindow = new google.maps.InfoWindow({
            content: "New Delhi, India"
            });
            infowindow.open(map, marker);

            // Click the marker to Zoom to 9
            google.maps.event.addListener(marker, 'click', function() {
                map.setZoom(9);
                map.setCenter(marker.getPosition());
            });
        } 
    });
}
</script>

HTML -

<body onLoad="initialize();codeAddress();">
<form method="get" action="">
<input type="text" id="txtaddress" name="txtaddress" size="30" value="New Delhi, India" />
<input type="submit" name="btnsubmit" value="Generate Map" />
</form>
<br /><br />
<div id="map_canvas" style="width:500px; height:380px; border:1px solid #AFAFAF;"></div>
</body>

1 个答案:

答案 0 :(得分:0)

您要问的是批量地理编码将多个地址更改为地理位置的过程称为批量地理编码。

Google Maps API is not directly supporting BatchGeocoding. 
By using Google Maps API , We do geocode a single address at a time. 

To acheive BatchGeoCoding, We need to iterate a list of Address.(Not too difficult I think)

最佳实践:GeoCode Example

BatchGeocode参考:

以下是在线批量地理编码网站。有它可供参考。

Ref 1Ref 2

Working Demo

工作演示只是概念的证明。它必须以多种方式进行改进。请查看参考资料以生成更好的代码。