Question

给定JSON数据，例如真实，唯一，有效地址列表：

var data = [
    { "address": "48 rue des Grands Moulins, 75013, Paris"},
    { "address": "12_rue_des_Grands_Moulins,_75013,_Paris"},
    { "address": "65_rue_des_Grands_Moulins,_75013,_Paris"},
    { "...": "..."},
    ];

这几百个地址中的每一个都足够详细，在地球上是独一无二的。

和给出html，例如：

<div id="map" style="height:40%;"></div>

如何使用此数据创建并自动填充Google地图？ JSfiddle赞赏。

编辑：my fiddle here的当前进展。我将数据迁移到JSON并添加一个循环来明天迭代每个对象。

注意：使用街道地址，我们可以使用以下内容获取JSON格式的地理信息：this query

Answer 1

像（未经测试）;

var location, map, objectID;

objectID  = "dom-id";

// Your gMap
//
map       = new google.maps.Map( document.getElementById( objectID ), {} );

// Put the following lines in your loop
// 
geocoder.geocode({ "address" : the_address_to_map }, function( results, status )
{
    if ( status == google.maps.GeocoderStatus.OK )
    {
        var latitude         = results[ 0 ].geometry.location.lat()
        ,   longitude        = results[ 0 ].geometry.location.lng()
        ;

        location = new google.maps.LatLng( latitude, longitude );

        if( location ) 
        {
            var marker          = new google.maps.Marker(
            {
                position    : location,
                title       : "",
                // other settings
            });

            marker.setMap( map );
        }
    }
});

调用此服务是有限制的。我每天考虑2500个请求，但您可以在API控制台中查找。

Answer 2

geoCodeLookupLL: function(addressstring, markerTitle, markerListeners) { 

  this.geocoder = new GClientGeocoder(); 
  this.markerStreetAddr = addressstring; 
  var map = this.getMap(); // Existing Map Object

  this.geocoder.getLatLng(addressstring, 

      function(point,markerTitle) { 

      if (!point) { 

      }else{ 
        Ext.applyIf(markerTitle,G_DEFAULT_ICON);         

        var new_icon = new GIcon()  

        new_icon.image = "https://maps.gstatic.com/mapfiles/ms2/micons/green-dot.png"  
        new_icon.size = new GSize(16,16)  
        new_icon.iconAnchor = new GPoint(9,34)
        new_icon.infoWindowAnchor = new GPoint(9,2)
        new_icon.title = markerTitle

        var mark = new GMarker(point,new_icon); 

        map.addOverlay(mark); 

      }
    })

我在现有地图上使用地址作为新标记，因此新的图标对象。您也可以找到一些V2 api方法。

谷歌地图/ JS：如何使用街道地址列表填写谷歌地图？

2 个答案: