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

问题描述

我正在使用 Google Maps JavaScript API v3 生成具有多个位置/标记的地图.我只有这些位置的地址，没有坐标，所以我使用地理编码 API 来获取坐标.

我终于让 Google 的地理编码起作用了，所以位置标记显示在它们应该在的位置.但是，相同的内容出现在每个信息窗口中.我似乎无法将位置数组传递到地理编码函数中.(顺便说一句，我还尝试为地理编码结果创建一个变量，并将 infoWindow 函数移到地理编码函数之外，但我也无法做到这一点.)

我已经尝试了一百种不同的方法.我希望其他人能看到我没能看到的东西.

 var 位置 = [['位置 1 名称'、'位置 1 地址'、'位置 1 URL']、['位置 2 名称'，'位置 2 地址'，'位置 2 URL']，['位置 3 名称'、'位置 3 地址'、'位置 3 URL']];地理编码器 = 新的 google.maps.Geocoder();for (i = 0; i 

解决方案

这是 google map info window 通过 xml 的多个地址，只是不完全重复.地理编码器是异步的，所以当地理编码器回调运行时，地址的值是从所有调用的循环结束开始的.

答案是一样的:最简单的解决方案是使用函数闭包将geocoder的调用与返回的结果关联起来:

function geocodeAddress(locations, i) {var title = location[i][0];var address = location[i][1];var url = location[i][2];geocoder.geocode({地址":地点[i][1]},功能(结果，状态){如果(状态 == google.maps.GeocoderStatus.OK){var 标记 = 新的 google.maps.Marker({图标:'http://maps.google.com/mapfiles/ms/icons/blue.png',地图:地图，位置:结果[0].geometry.location，标题:标题，动画:google.maps.Animation.DROP，地址:地址，网址:网址})infoWindow(marker, map, title, address, url);bounds.extend(marker.getPosition());map.fitBounds(bounds);} 别的 {alert("+地址+"的地理编码失败:"+状态);}});}

工作小提琴

代码片段:

var location = [['位置 1 名称'，'纽约，纽约'，'位置 1 URL']，['位置 2 名称'，'新泽西州纽瓦克'，'位置 2 URL']，['位置 3 名称'、'宾夕法尼亚州费城'、'位置 3 URL']];var 地理编码器；无功地图；var bounds = new google.maps.LatLngBounds();函数初始化(){地图 = 新的 google.maps.Map(document.getElementById("map_canvas"), {中心:新的 google.maps.LatLng(37.4419, -122.1419)，缩放:13，mapTypeId: google.maps.MapTypeId.ROADMAP});地理编码器 = 新的 google.maps.Geocoder();for (i = 0; i 

html,身体，#map_canvas {高度:100%；宽度:100%；边距:0px；填充:0px}

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

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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>

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