使用Google Maps JavaScript API v3和Geocoding API映射多个位置 [英] Mapping multiple locations with Google Maps JavaScript API v3 and Geocoding API

查看：109
本文介绍了使用Google Maps JavaScript API v3和Geocoding API映射多个位置的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我使用Google Maps JavaScript API v3来生成包含多个位置/标记的地图。我只有这些位置的地址，而不是坐标，因此我使用Geocoding API来获取坐标。



我最终让Google的地理编码工作，所以位置标记显示出它们应该在的位置。但是，每个InfoWindow中都会显示相同的内容。我似乎无法将位置数组传递给地理编码功能。 （顺便说一下，我也尝试为地理编码结果创建一个变量，并将地理编码函数之外的infoWindow函数移动到 之外，但我无法做到这一点。）



我已经试过了这一百种不同的方式。 

  var locations = [
 ['位置1名称'，'位置1地址'，'位置1 URL']，
 ['位置2名称'，'位置2地址'，'位置2 URL']，
 ['位置3名称'，'位置3地址'，'位置3 URL'] 
]; 
 
 geocoder = new google.maps.Geocoder（）; 
 
 for（i = 0; i< locations.length; i ++）{
 
 title = locations [i] [0]; 
 address = locations [i] [1]; 
 url = locations [i] [2]; 
 
 geocoder.geocode（{'address'：locations [i] [1]}，function（results，status）{
 marker = new google.maps.Marker（{
图标：'marker_blue.png'，
地图：地图，
位置：结果[0] .geometry.location，
标题：标题，
动画：google.maps。 Animation.DROP，
 address：address，
 url：url 
}）
 infoWindow（marker，map，title，address，url）; 
}）
 
 
 
 function infoWindow（marker，map，title，address，url）{
 google.maps.event.addListener（marker，'click'，function（） {
 var html =< div>< h3>+ title +< / h3>< p>+ address +< br>< / div>< a href = '+ url +'>查看位置< / a>< / p>< / div>; 
 iw = new google.maps.InfoWindow（{content：html，maxWidth：350}） ; 
 iw.open（地图，标记物）; 
}）; 
}


解决方案

一个href =https://stackoverflow.com/questions/13278368/google-map-info-window-multiple-addresses-via-xml>谷歌地图信息窗口多个地址通过XML ，只是不是一个确切的重复。地理编码器是异步的，所以当地理编码器回调运行时，地址的值就是所有调用的循环结尾的值。

答案是一样的：最简单的解决方案是使用函数闭包将调用与返回结果关联到地理编码器： 

 函数geocodeAddress（locations，i ）{
 var title = locations [i] [0]; 
 var address = locations [i] [1]; 
 var url = locations [i] [2]; 
 geocoder.geocode（{$ b $'address'：locations [i] [1] 
}，
 
函数（结果，状态）{
 if （状态== google.maps.GeocoderStatus.OK）{
 var marker = new google.maps.Marker（{
 icon：'http://maps.google.com/mapfiles/ms/icons /blue.png'，
 map：map，
 position：results [0] .geometry.location，
 title：title，
 animation：google.maps.Animation.DROP ，
地址：地址，
 url：url 
））
 infoWindow（标记，地图，标题，地址，网址）; 
 bounds.extend（marker.getPosition （））; 
 map.fitBounds（bounds）; 
} else {
 alert（geocode of+ address +failed：+ status）; 
} 
}）; 
}

工作小提琴



代码片段： 

  var locations = [['Location 1 Name'，'New York，NY'，'Location 1 URL']，['Location 2 Name'，'Newark， NJ'，'Location 2 URL']，['Location 3 Name'，'Philadelphia，PA'，'Location 3 URL']]; var geocoder; var map; var bounds = new google.maps.LatLngBounds（）; function initialize（）{map = new google.maps.Map（document.getElementById（map_canvas），{center：new google.maps.LatLng（37.4419，-122.1419），zoom：13，mapTypeId：google.maps.MapTypeId。 ROADMAP}）; geocoder = new google.maps.Geocoder（）; for（i = 0; i< locations.length; i ++）{geocodeAddress（locations，i）; }} google.maps.event.addDomListener（window，load，initialize）;函数geocodeAddress（locations，i）{var title = locations [i] [0];}} var address = locations [i] [1]; var url = locations [i] [2]; geocoder.geocode（{'address'：locations [i] [1]}，function（results，status）{if（status == google.maps.GeocoderStatus.OK）{var marker = new google.maps.Marker（{图标：'http://maps.google.com/mapfiles/ms/icons/blue.png'，地图：地图，位置：结果[0] .geometry.location，标题：标题，动画：google.maps.Animation .DROP，address：address，url：url}）infoWindow（marker，map，title，address，url）; bounds.extend（marker.getPosition（））; map.fitBounds（bounds）;} else {alert（geocode + address +失败：+ status）;}}）;} function infoWindow（marker，map，title，address，url）{google.maps.event.addListener（marker，'click'，function（）{ var html =< div>< h3>+ title +< / h3>< p>+ address +< br>< / div>< a href ='+ url + '>查看位置< / a>< / p>< / div>; iw = new google.map s.InfoWindow（{content：html，maxWidth：350}）; iw.open（地图，标记）; }）;} function createMarker（results）{var marker = new google.maps.Marker（{icon：'http://maps.google.com/mapfiles/ms/icons/blue.png'，map：map，position ：results [0] .geometry.location，title：title，animation：google.maps.Animation.DROP，address：address，url：url}）bounds.extend（marker.getPosition（））; map.fitBounds（边界）; infoWindow（标记，地图，标题，地址，网址）;返回标记;}  

  html，body，＃map_canvas {height ：100％;宽度：100％; margin：0px; < script src =https：//


I'm using Google Maps JavaScript API v3 to generate a map with multiple locations/markers. I only have the address for these locations, not the coordinates, so I'm using the Geocoding API to get the coordinates.

I finally got Google's geocoding to work, so the location markers are showing up where they are supposed to be. However, the same content is showing up in every InfoWindow. I seem to be unable to pass the location arrays into the geocode function. (Incidentally, I also tried creating a variable for the geocode results and moving the infoWindow function outside of the geocode function, but I couldn't make that work either.)

I've tried this a hundred different ways already. I hoping someone else will see what I haven't been able to see.

    var locations = [
        ['Location 1 Name', 'Location 1 Address', 'Location 1 URL'],
        ['Location 2 Name', 'Location 2 Address', 'Location 2 URL'],
        ['Location 3 Name', 'Location 3 Address', 'Location 3 URL']
    ];

    geocoder = new google.maps.Geocoder();

    for (i = 0; i < locations.length; i++) {

        title = locations[i][0];
        address = locations[i][1];
        url = locations[i][2];

        geocoder.geocode({ 'address' : locations[i][1] }, function(results, status) {
          marker = new google.maps.Marker({
              icon: 'marker_blue.png',
              map: map,
              position: results[0].geometry.location,
              title: title,
              animation: google.maps.Animation.DROP,
              address: address,
              url: url
          })
          infoWindow(marker, map, title, address, url);
        })

    }

    function infoWindow(marker, map, title, address, url) {
        google.maps.event.addListener(marker, 'click', function() {
            var html = "<div><h3>" + title + "</h3><p>" + address + "<br></div><a href='" + url + "'>View location</a></p></div>";
            iw = new google.maps.InfoWindow({ content : html, maxWidth : 350});
            iw.open(map,marker);
        });
    }

解决方案

This is a duplicate of google map info window multiple addresses via xml, just not an exact duplicate. The geocoder is asynchronous, so when the geocoder callback runs, the value of address is that from the end of the loop for all the calls.

The answer is the same: The simplest solution is to use function closure to associate the call to the geocoder with the returned result:

function geocodeAddress(locations, i) {
    var title = locations[i][0];
    var address = locations[i][1];
    var url = locations[i][2];
    geocoder.geocode({
        'address': locations[i][1]
    },

    function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var marker = new google.maps.Marker({
                icon: 'http://maps.google.com/mapfiles/ms/icons/blue.png',
                map: map,
                position: results[0].geometry.location,
                title: title,
                animation: google.maps.Animation.DROP,
                address: address,
                url: url
            })
            infoWindow(marker, map, title, address, url);
            bounds.extend(marker.getPosition());
            map.fitBounds(bounds);
        } else {
            alert("geocode of " + address + " failed:" + status);
        }
    });
}

Working fiddle

code snippet:

var locations = [
  ['Location 1 Name', 'New York, NY', 'Location 1 URL'],
  ['Location 2 Name', 'Newark, NJ', 'Location 2 URL'],
  ['Location 3 Name', 'Philadelphia, PA', 'Location 3 URL']
];

var geocoder;
var map;
var bounds = new google.maps.LatLngBounds();

function initialize() {
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  geocoder = new google.maps.Geocoder();

  for (i = 0; i < locations.length; i++) {


    geocodeAddress(locations, i);
  }
}
google.maps.event.addDomListener(window, "load", initialize);

function geocodeAddress(locations, i) {
  var title = locations[i][0];
  var address = locations[i][1];
  var url = locations[i][2];
  geocoder.geocode({
      'address': locations[i][1]
    },

    function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        var marker = new google.maps.Marker({
          icon: 'http://maps.google.com/mapfiles/ms/icons/blue.png',
          map: map,
          position: results[0].geometry.location,
          title: title,
          animation: google.maps.Animation.DROP,
          address: address,
          url: url
        })
        infoWindow(marker, map, title, address, url);
        bounds.extend(marker.getPosition());
        map.fitBounds(bounds);
      } else {
        alert("geocode of " + address + " failed:" + status);
      }
    });
}

function infoWindow(marker, map, title, address, url) {
  google.maps.event.addListener(marker, 'click', function() {
    var html = "<div><h3>" + title + "</h3><p>" + address + "<br></div><a href='" + url + "'>View location</a></p></div>";
    iw = new google.maps.InfoWindow({
      content: html,
      maxWidth: 350
    });
    iw.open(map, marker);
  });
}

function createMarker(results) {
  var marker = new google.maps.Marker({
    icon: 'http://maps.google.com/mapfiles/ms/icons/blue.png',
    map: map,
    position: results[0].geometry.location,
    title: title,
    animation: google.maps.Animation.DROP,
    address: address,
    url: url
  })
  bounds.extend(marker.getPosition());
  map.fitBounds(bounds);
  infoWindow(marker, map, title, address, url);
  return marker;
}

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

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>

这篇关于使用Google Maps JavaScript API v3和Geocoding API映射多个位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆