0

给定 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 赞赏。

编辑：我的小提琴的当前进展在这里。明天我会将数据迁移到 JSON 中并添加一个循环来迭代每个对象。

注意：使用街道地址，我们可以使用 JSON 格式获取 geoloc 信息：此查询

4

2 回答 2

2

类似的东西（未测试）；

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 控制台中查找。

于 2013-02-25T10:18:20.713 回答
0 
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 方法。

于 2013-02-25T16:38:08.117 回答