多地址数组Google地图Uncaught TypeError：无法读取未定义的属性'0' [英] Multi address array Google maps Uncaught TypeError: Cannot read property '0' of undefined

问题描述

未捕获的TypeError：无法读取属性' 0'未定义

循环应该如何正常工作？
http://jsfiddle.net/hugpablo/uLza5va6/1/ p>

  var map; 
 var bounds = new google.maps.LatLngBounds（）; 
 var mapOptions = {
 mapTypeId：'roadmap'
}; 
 
 //在地图上显示地图
 map = new google.maps.Map（document.getElementById（map_canvas），mapOptions）; 
 map.setTilt（45）; 
 
 //多个地址
 var addresses = [
 [First Place，Colonia providencia，Guadalajara，Jalisco，México]，
 [Second Place ，Colonia Ayuntamiento，瓜达拉哈拉，哈利斯科，墨西哥]，
 [第三名，Colonia Moderna，瓜达拉哈拉，墨西哥哈利斯科州]]，
 [第四名，Colonia Santa Edwiges ，墨西哥哈利斯科] 
]; 
 
 var geocoder = new google.maps.Geocoder（）; 
 
 //循环访问我们的地址数组&将每一个放置在地图
上（var i = 0; i< addresses.length; i ++）{
 geocoder.geocode（{address：addresses [i] [1] （结果，状态）{
 if（status == google.maps.GeocoderStatus.OK&& results.length> 0）{
 var location = results [0] .geometry.location; 
 var lat = location.lat（）; 
 var lng = location.lng（）; 
 var position = new google.maps.LatLng（lat，lng）; 
 bounds .extend（position）; 
 marker = new google.maps.Marker（{
 position：position，
 map：map，
 title：addresses [i] [0]， 
 icon：icon 
}）; 
}; 
}）; 
 //自动将贴图中的所有地址放在地图中心
 map.fitBounds（bounds）; 
}; 
 //我们的fitBounds函数运行后，覆盖地图缩放级别（确保它只运行一次）
 var boundsListener = google.maps.event.addListener（（map），'bounds_changed'，function（event ）{
 this.setZoom（5）; 
 google.maps.event.removeListener（boundsListener）; 
}）; 
  

解决方案

地理编码器是异步的。当回调运行 i == addresses.length 时，它不是数组中的有效条目。这通常使用函数闭包来解决。

代码段：
$ b

  var map; var bounds = new google.maps.LatLngBounds（）; var mapOptions = {mapTypeId：'roadmap'}; //在pagemap上显示地图= new google.maps.Map（document.getElementById map.setTilt（45）; // Multiple addressesvar addresses = [[First Place，Colonia providencia，Guadalajara，Jalisco，México]，[Second Place，Colonia Ayuntamiento，墨西哥哈利斯科州瓜达拉哈拉]，[第三名，Colonia Moderna，瓜达拉哈拉，墨西哥哈利斯科州]]，[第四名，墨西哥哈利斯科州Colonia Santa Edwiges]]; var geocoder = new google。 maps.Geocoder（）; //遍历我们的数组地址& （var i = 0; i< addresses.length; i ++）{createMarker（i）; //自动调整地图的中心位置以适应屏幕上的所有地址map.fitBounds（bounds）;}; //重写我们的地图缩放级别，一旦我们的fitBounds函数运行（确保它只运行一次）var boundsListener = google.maps.event。 addListener（（map），'bounds_changed'，function（event）{this.setZoom（5）; google.maps.event.removeListener（boundsListener）;}）; function createMarker（i）{geocoder.geocode（{address ：地址[i] [1]}，函数（结果，状态）{if（status == google.maps.GeocoderStatus.OK&& result.length> 0）{var location = results [0] .geometry （lat，lng）; bounds.extend（position）; marker = new google.maps。var; Marker（{position：position，map：map，title：addresses [i] [0]，// icon：icon}）; map.fitBounds（bounds）;};}）;}  

  #map_canvas {width：535px; height：600px;}  

< script src =https ：//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< script src =https://maps.googleapis.com/maps/ api / js>< / script>< div id =map_canvas>< / div>

p>


There is something wrong with my for loop or array but I don't know where.

Uncaught TypeError: Cannot read property '0' of undefined

How does the loop should be to work properly? http://jsfiddle.net/hugpablo/uLza5va6/1/

var map;
        var bounds = new google.maps.LatLngBounds();
        var mapOptions = {
            mapTypeId: 'roadmap'
        };

        // Display a map on the page
        map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
        map.setTilt(45);

        // Multiple addresses
        var addresses = [
      ["First Place", "Colonia providencia, Guadalajara, Jalisco, México"],
      ["Second Place", "Colonia Ayuntamiento, Guadalajara, Jalisco, Mexico"],
      ["Third Place", "Colonia Moderna, Guadalajara, Jalisco, Mexico"],
      ["Fourth Place", "Colonia Santa Edwiges, Jalisco, Mexico"]
      ];

        var geocoder = new google.maps.Geocoder();

        // Loop through our array of addresses & place each one on the map  
        for(var i = 0; i < addresses.length; i++ ) {
            geocoder.geocode( { "address": addresses[i][1] }, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK && results.length > 0) {
                var location = results[0].geometry.location;
                var lat      = location.lat();
                var lng      = location.lng();
                var position = new google.maps.LatLng(lat, lng);
                bounds.extend(position);
                marker = new google.maps.Marker({
                    position: position,
                    map: map,
                    title: addresses[i][0],
                    icon: icon
                });
            };
        });
            // Automatically center the map fitting all addresses on the screen
            map.fitBounds(bounds);
        };
// Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
    var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
        this.setZoom(5);
        google.maps.event.removeListener(boundsListener);
    });

解决方案

The geocoder is asynchronous. When the callback runs i==addresses.length which is not a valid entry in your array. This is usually solved using function closure.

code snippet:

var map;
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
  mapTypeId: 'roadmap'
};

// Display a map on the page
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
map.setTilt(45);

// Multiple addresses
var addresses = [
  ["First Place", "Colonia providencia, Guadalajara, Jalisco, México"],
  ["Second Place", "Colonia Ayuntamiento, Guadalajara, Jalisco, Mexico"],
  ["Third Place", "Colonia Moderna, Guadalajara, Jalisco, Mexico"],
  ["Fourth Place", "Colonia Santa Edwiges, Jalisco, Mexico"]
];

var geocoder = new google.maps.Geocoder();

// Loop through our array of addresses & place each one on the map  
for (var i = 0; i < addresses.length; i++) {
  createMarker(i);

  // Automatically center the map fitting all addresses on the screen
  map.fitBounds(bounds);
};
// Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
  this.setZoom(5);
  google.maps.event.removeListener(boundsListener);
});

function createMarker(i) {
  geocoder.geocode({
    "address": addresses[i][1]
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK && results.length > 0) {

      var location = results[0].geometry.location;
      var lat = location.lat();
      var lng = location.lng();
      var position = new google.maps.LatLng(lat, lng);
      bounds.extend(position);
      marker = new google.maps.Marker({
        position: position,
        map: map,
        title: addresses[i][0],
        // icon: icon
      });
      map.fitBounds(bounds);

    };
  });
}

#map_canvas {
  width: 535px;
  height: 600px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

这篇关于多地址数组Google地图Uncaught TypeError：无法读取未定义的属性'0'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！