GoogleMaps/JS：如何使用街道地址列表填充Google Map？

鉴于JSON数据，如真实的，独特的，有效的地址的列表：GoogleMaps/JS：如何使用街道地址列表填充Google Map？

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>

如何创建并自动填充谷歌地图这个数据？ JSfiddle赞赏。

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

注：使用街道ADRESS我们可以用得到JSON格式的geoloc信息：this query

来源

2013-02-25 Hugolpz

有趣的谈话[这里]（http://stackoverflow.com/questions/7499862/how-to-geocode-an-address-into-lat-long-with-google-maps#7500182），和[如何可以我自动在Google或OpenStreetMap上绘制地址标记？]（http://stackoverflow.com/questions/3782776/how-can-i-automatically-plot-markers-for-addresses-on-a-google-or- OpenStreetMap的）。缺少JSfiddle。 – Hugolpz 2013-02-25 11:27:52

[Google地理编码API]（https://developers.google.com/maps/documentation/geocoding/?hl=fr）提供了很好的定义（但没有工作示例）：地理编码是转换地址的过程（如“1600 Amphitheatre Parkway，Mountain View，CA“）转换为地理坐标（如纬度37.423021和经度-122.083739），您可以使用它们放置标记或放置地图。 – Hugolpz 2013-02-25 20:19:45

[地理编码服务>地理编码响应>状态码]（https://developers.google.com/maps/documentation/javascript/geocoding#GeocodingStatusCodes）：在本节结尾处，有一个代码示例和一个链接单个标记推到地图上。 – Hugolpz 2013-02-25 20:32:20

喜欢的东西（未测试）;

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-25 10:18:20 Haje

只需要+200，所以它应该没问题。 :) – Hugolpz 2013-02-25 10:20:52

注意：我将数据更新为JSON格式和语法。我也+1你的答案，但我会尽力使它在JSfiddle上工作，然后再接受它。请添加FOR循环，以便代码独立运行。我将你的价值编辑到the_street_address_to_map，这是更好的。 – Hugolpz 2013-02-25 11:18:44

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-25 16:38:08 Ankit

GoogleMaps/JS：如何使用街道地址列表填充Google Map？

回答

相关问题