JavaScript数组推（盐ñ佩帕风格） [英] Javascript array push it (Salt n Pepa style)

查看：133 发布时间：2016/5/31 21:12:55 javascript arrays google-maps google-maps-api-3

本文介绍了JavaScript数组推（盐ñ佩帕风格）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

嘿所有我需要一些帮助，增加了我的数组中的谷歌地图API V3

下面是我的code来填充位置标记在地图：

  VAR地理codeR;
VAR地图;
VAR信息窗口= NULL;
变种地址= [];
变种theMarkers = [];函数初始化（）{
    VAR centerMap =新google.maps.LatLng（45.3517923，6.3101660）;    地理codeR =新google.maps.Geo codeR（）;
    addresses.push（11111，22222，33333）;    为（i的地址）{
          VAR地址=地址[I]          地理coder.geo code（{'地址'：地址}，功能（结果状态）{
            如果（状态== google.maps.Geo coderStatus.OK）{
                VAR边界=新的google.maps.LatLngBounds（）;                map.setCenter（结果[0] .geometry.location）;                VAR的标记=新google.maps.Marker（{
                    地图：地图，
                    位置：结果[0] .geometry.location
                }）;                VAR tmpAddress =结果[0] .formatted_address;                tmpAddress = tmpAddress.split（，）;
                theMarkers.push（[tmpAddress [0]，结果[0] .geometry.location.lat（），结果[0] .geometry.location.lng（），我，这个位置是'+ tmpAddress [0]） ;
            }其他{
                警报（'地理code不成功，原因如下：'+状态）;
            }
          }）;
    }    / * theMarkers = [
        ['city1'，00.0000，-00.000000，1，这是HTML测试1']，
        ['城2'，00.00000，-00.000000000，2，这是HTML测试2']，
        ['请分享帮助'，00.00000，-00.000000，3，这是HTML测试3']
    ]; * /    VAR的MapOptions = {
        变焦倍数：0，
        中心：centerMap，
        panControl：假的，
        zoomControl，用于：假的，
        scaleControl：假的，
        将streetViewControl：假的，
        MapTypeControl中：假的
    }    地图=新google.maps.Map（的document.getElementById（'地图画布'）的MapOptions）;
    setZoom（地图，theMarkers）;
    setMarkers（地图，theMarkers）;    信息窗口=新google.maps.InfoWindow（{
        内容：载入中...
    }）;
}功能setZoom（地图，标记）{
    VAR boundbox =新的google.maps.LatLngBounds（）;    对于（VAR I = 0; I＆LT; markers.length;我++）
    {
      boundbox.extend（新google.maps.LatLng（标记[I] [1]，标记物[I] [2]））;
    }    map.setCenter（boundbox.getCenter（））;
    map.fitBounds（boundbox）;
}功能setMarkers（地图，标记）{
    对于（VAR I = 0; I＆LT; markers.length;我++）{
        VAR位置=标记[I]
        VAR位置=标记[I]
        VAR siteLatLng =新google.maps.LatLng（网站[1]，的网站[2]）;
        VAR的标记=新google.maps.Marker（{
            位置：siteLatLng，
            地图：地图，
            标题：现场[0]
            zIndex的：网站[3]
            HTML：网站[4]
            拖动：假的，
            //标记砸在地图上
            动画：google.maps.Animation.DROP
        }）;        google.maps.event.addListener（标记，点击功能（）{
            infowindow.setContent（this.html）;
            infowindow.open（地图，这一点）;
            //marker.setAnimation(google.maps.Animation.BOUNCE）;
        }）;
    }
}

虽然它的工作原理没有错误上面我再也不用绕标志物区域变焦，我设置的时候曾经有过在 theMarkers 静态

在使用 theMarkers.push 在作为（我的地址）{} 地图上看起来是这样的：

但是，当我手动进行的 theMarkers 的之后的完成作为（我的地址）{}

  theMarkers = [
    ['city1'，00.0000，-00.000000，1，这是HTML测试1']，
    ['城2'，00.00000，-00.000000000，2，这是HTML测试2']，
    ['请分享帮助'，00.00000，-00.000000，3，这是HTML测试3']
];

然后，地图看起来是这样的：

我哪需要得到它的循环内做的。

解决方案

地缘codeR是异步的，你需要设置缩放在过去的回调运行。简单的解决办法，将bounds.extend / fitBounds进入回调，使全球范围：

  bounds.extend（结果[0] .geometry.location）;
地理codedResults ++;
如果（GEO codedResults＆GT; =（addresses.length  -  1））map.fitBounds（边界）;

更新初始化函数：

 函数初始化（）{
    VAR centerMap =新google.maps.LatLng（45.3517923，6.3101660）;    地理codeR =新google.maps.Geo codeR（）;
    地址= [纽约，纽约，新泽西州纽瓦克，费城];    对于（VAR I = 0; I＆LT; addresses.length;我++）{
        VAR地址=地址[I]
        地理coder.geo code（{
            地址：地址
        }，功能（结果状态）{
            如果（状态== google.maps.Geo coderStatus.OK）{
                map.setCenter（结果[0] .geometry.location）;                VAR的标记=新google.maps.Marker（{
                    地图：地图，
                    位置：结果[0] .geometry.location
                }）;                VAR tmpAddress =结果[0] .formatted_address;                tmpAddress = tmpAddress.split（，）;
                theMarkers.push（[tmpAddress [0]，结果[0] .geometry.location.lat（），结果[0] .geometry.location.lng（），我，这个位置是'+ tmpAddress [0]） ;
                bounds.extend（结果[0] .geometry.location）;
                地理codedResults ++;
                如果（GEO codedResults＆GT; =（addresses.length  -  1））map.fitBounds（边界）;
            }其他{
                警报（'地理code不成功，原因如下：'+状态）;
            }
        }）;
    }    VAR的MapOptions = {
        变焦倍数：0，
        中心：centerMap，
        panControl：假的，
        zoomControl，用于：假的，
        scaleControl：假的，
        将streetViewControl：假的，
        MapTypeControl中：假的
    };    地图=新google.maps.Map（的document.getElementById（'地图画布'）的MapOptions）;
    setMarkers（地图，theMarkers）;    信息窗口=新google.maps.InfoWindow（{
        内容：载入中...
    }）;
}

工作拨弄

code片断：

 VAR地图;\r
VAR边界=新的google.maps.LatLngBounds（）;\r
VAR信息窗口= NULL;\r
变种地址= [];\r
变种theMarkers = [];\r
VAR地理codedResults = 0;\r
\r
功能地理codeAddress（地址，我）{\r
  地理coder.geo code（{\r
    地址：地址\r
  }，功能（结果状态）{\r
    如果（状态== google.maps.Geo coderStatus.OK）{\r
      map.setCenter（结果[0] .geometry.location）;\r
\r
      VAR的标记=新google.maps.Marker（{\r
        地图：地图，\r
        位置：结果[0] .geometry.location\r
      }）;\r
\r
      VAR tmpAddress =结果[0] .formatted_address;\r
\r
      tmpAddress = tmpAddress.split（，）;\r
      theMarkers.push（[tmpAddress [0]，结果[0] .geometry.location.lat（），结果[0] .geometry.location.lng（），我，这个位置是'+ tmpAddress [0]） ;\r
      bounds.extend（结果[0] .geometry.location）;\r
      地理codedResults ++;\r
      如果（GEO codedResults＆GT; =（addresses.length  -  1））\r
        map.fitBounds（边界）;\r
    }其他{\r
      警报（'地理code不成功，原因如下：'+状态）;\r
    }\r
  }）;\r
}\r
\r
函数初始化（）{\r
  VAR centerMap =新google.maps.LatLng（45.3517923，6.3101660）;\r
\r
  地理codeR =新google.maps.Geo codeR（）;\r
  地址= [纽约，纽约，新泽西州纽瓦克，费城];\r
\r
  对于（VAR I = 0; I＆LT; addresses.length;我++）{\r
    VAR地址=地址[I]\r
    地理codeAddress（地址，I）;\r
  }\r
\r
  VAR的MapOptions = {\r
    变焦倍数：0，\r
    中心：centerMap，\r
    panControl：假的，\r
    zoomControl，用于：假的，\r
    scaleControl：假的，\r
    将streetViewControl：假的，\r
    MapTypeControl中：假的\r
  };\r
\r
  地图=新google.maps.Map（的document.getElementById（'地图画布'）的MapOptions）;\r
  // setZoom（地图，theMarkers）;\r
  setMarkers（地图，theMarkers）;\r
\r
  信息窗口=新google.maps.InfoWindow（{\r
    内容：载入中...\r
  }）;\r
}\r
\r
功能setZoom（地图，标记）{\r
  VAR boundbox =新的google.maps.LatLngBounds（）;\r
\r
  对于（VAR I = 0; I＆LT; markers.length;我++）{\r
    boundbox.extend（新google.maps.LatLng（标记[I] [1]，标记物[I] [2]））;\r
  }\r
\r
  map.setCenter（boundbox.getCenter（））;\r
  map.fitBounds（boundbox）;\r
}\r
\r
功能setMarkers（地图，标记）{\r
  对于（VAR I = 0; I＆LT; markers.length;我++）{\r
    VAR位置=标记[I]\r
    VAR siteLatLng =新google.maps.LatLng（网站[1]，的网站[2]）;\r
    VAR的标记=新google.maps.Marker（{\r
      位置：siteLatLng，\r
      地图：地图，\r
      标题：现场[0]\r
      zIndex的：网站[3]\r
      HTML：网站[4]\r
      拖动：假的，\r
      //标记砸在地图上\r
      动画：google.maps.Animation.DROP\r
    }）;\r
\r
    google.maps.event.addListener（标记，点击功能（）{\r
      infowindow.setContent（this.html）;\r
      infowindow.open（地图，这一点）;\r
      //marker.setAnimation(google.maps.Animation.BOUNCE）;\r
    }）;\r
  }\r
}\r
google.maps.event.addDomListener（窗口'负荷'，初始化）;

＆LT;脚本SRC =http://maps.googleapis.com/maps / API / JS＆GT;＆LT; / SCRIPT＆GT;\r
＆LT; DIV ID =地图画布的风格=高度：500像素;宽度：500像素;＆GT;＆LT; / DIV＆GT;

Hey all I am in need of some help with adding to my array for the Google Maps API V3.

Below is my code to populate the map with location marks:

var geocoder;
var map;
var infowindow = null;
var addresses = [];
var theMarkers = [];

function initialize() {
    var centerMap = new google.maps.LatLng(45.3517923, 6.3101660);

    geocoder = new google.maps.Geocoder();    
    addresses.push("11111","22222","33333");

    for(i in addresses) {
          var address = addresses[i];

          geocoder.geocode( { 'address': address}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                var bounds = new google.maps.LatLngBounds();

                map.setCenter(results[0].geometry.location);

                var marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location
                });

                var tmpAddress = results[0].formatted_address;

                tmpAddress = tmpAddress.split(',');             
                theMarkers.push([tmpAddress[0], results[0].geometry.location.lat(), results[0].geometry.location.lng(), i, 'This location is ' + tmpAddress[0]]);
            } else {
                alert('Geocode was not successful for the following reason: ' + status);
            }
          });
    }

    /*theMarkers = [
        ['city1', 00.0000, -00.000000, 1, 'This is HTML Test 1'],
        ['city2', 00.00000, -00.000000000, 2, 'This is HTML Test 2'],
        ['city3', 00.00000, -00.000000, 3, 'This is HTML Test 3']
    ];*/

    var mapOptions = {
        zoom: 0,
        center: centerMap,
        panControl: false,
        zoomControl: false,
        scaleControl: false,
        streetViewControl: false,
        mapTypeControl: false
    }

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
    setZoom(map, theMarkers);
    setMarkers(map, theMarkers);    

    infowindow = new google.maps.InfoWindow({
        content: "Loading..."
    });
}

function setZoom(map, markers) {
    var boundbox = new google.maps.LatLngBounds();

    for ( var i = 0; i < markers.length; i++ )
    {
      boundbox.extend(new google.maps.LatLng(markers[i][1], markers[i][2]));
    }

    map.setCenter(boundbox.getCenter());
    map.fitBounds(boundbox);
}

function setMarkers(map, markers) {
    for (var i = 0; i < markers.length; i++) {
        var site = markers[i];
        var site = markers[i];
        var siteLatLng = new google.maps.LatLng(site[1], site[2]);      
        var marker = new google.maps.Marker({
            position: siteLatLng,
            map: map,
            title: site[0],
            zIndex: site[3],
            html: site[4],
            draggable: false,
            //Markers drop on the map
            animation: google.maps.Animation.DROP
        });

        google.maps.event.addListener(marker, "click", function () {
            infowindow.setContent(this.html);
            infowindow.open(map, this);
            //marker.setAnimation(google.maps.Animation.BOUNCE);
        });
    }
}

Although it works without errors above I no longer have the zoom in area around the markers that I used to have when setting the theMarkers statically.

When using the theMarkers.push inside the for(i in addresses) {} the map looks like this:

But when I manually make theMarkers after finishing the for(i in addresses) {}:

theMarkers = [
    ['city1', 00.0000, -00.000000, 1, 'This is HTML Test 1'],
    ['city2', 00.00000, -00.000000000, 2, 'This is HTML Test 2'],
    ['city3', 00.00000, -00.000000, 3, 'This is HTML Test 3']
];

Then the map looks like this:

Which I am in need of getting it to do within the loop.

解决方案

The geocoder is asynchronous, you need to set the zoom in the last callback to run. Simplest fix, move the bounds.extend/fitBounds into the callback and make the bounds global:

bounds.extend(results[0].geometry.location);
geocodedResults++;
if (geocodedResults >= (addresses.length - 1)) map.fitBounds(bounds);

updated initialize function:

function initialize() {
    var centerMap = new google.maps.LatLng(45.3517923, 6.3101660);

    geocoder = new google.maps.Geocoder();
    addresses = ["New York, NY", "Newark, NJ", "Philadelphia, PA"];

    for (var i = 0; i < addresses.length; i++) {
        var address = addresses[i];
        geocoder.geocode({
            'address': address
        }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);

                var marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location
                });

                var tmpAddress = results[0].formatted_address;

                tmpAddress = tmpAddress.split(',');
                theMarkers.push([tmpAddress[0], results[0].geometry.location.lat(), results[0].geometry.location.lng(), i, 'This location is ' + tmpAddress[0]]);
                bounds.extend(results[0].geometry.location);
                geocodedResults++;
                if (geocodedResults >= (addresses.length - 1)) map.fitBounds(bounds);
            } else {
                alert('Geocode was not successful for the following reason: ' + status);
            }
        });
    }

    var mapOptions = {
        zoom: 0,
        center: centerMap,
        panControl: false,
        zoomControl: false,
        scaleControl: false,
        streetViewControl: false,
        mapTypeControl: false
    };

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    setMarkers(map, theMarkers);

    infowindow = new google.maps.InfoWindow({
        content: "Loading..."
    });
}

working fiddle

code snippet:

var map;
var bounds = new google.maps.LatLngBounds();
var infowindow = null;
var addresses = [];
var theMarkers = [];
var geocodedResults = 0;

function geocodeAddress(address, i) {
  geocoder.geocode({
    'address': address
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);

      var marker = new google.maps.Marker({
        map: map,
        position: results[0].geometry.location
      });

      var tmpAddress = results[0].formatted_address;

      tmpAddress = tmpAddress.split(',');
      theMarkers.push([tmpAddress[0], results[0].geometry.location.lat(), results[0].geometry.location.lng(), i, 'This location is ' + tmpAddress[0]]);
      bounds.extend(results[0].geometry.location);
      geocodedResults++;
      if (geocodedResults >= (addresses.length - 1))
        map.fitBounds(bounds);
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}

function initialize() {
  var centerMap = new google.maps.LatLng(45.3517923, 6.3101660);

  geocoder = new google.maps.Geocoder();
  addresses = ["New York, NY", "Newark, NJ", "Philadelphia, PA"];

  for (var i = 0; i < addresses.length; i++) {
    var address = addresses[i];
    geocodeAddress(address, i);
  }

  var mapOptions = {
    zoom: 0,
    center: centerMap,
    panControl: false,
    zoomControl: false,
    scaleControl: false,
    streetViewControl: false,
    mapTypeControl: false
  };

  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  // setZoom(map, theMarkers);
  setMarkers(map, theMarkers);

  infowindow = new google.maps.InfoWindow({
    content: "Loading..."
  });
}

function setZoom(map, markers) {
  var boundbox = new google.maps.LatLngBounds();

  for (var i = 0; i < markers.length; i++) {
    boundbox.extend(new google.maps.LatLng(markers[i][1], markers[i][2]));
  }

  map.setCenter(boundbox.getCenter());
  map.fitBounds(boundbox);
}

function setMarkers(map, markers) {
  for (var i = 0; i < markers.length; i++) {
    var site = markers[i];
    var siteLatLng = new google.maps.LatLng(site[1], site[2]);
    var marker = new google.maps.Marker({
      position: siteLatLng,
      map: map,
      title: site[0],
      zIndex: site[3],
      html: site[4],
      draggable: false,
      //Markers drop on the map
      animation: google.maps.Animation.DROP
    });

    google.maps.event.addListener(marker, "click", function() {
      infowindow.setContent(this.html);
      infowindow.open(map, this);
      //marker.setAnimation(google.maps.Animation.BOUNCE);
    });
  }
}
google.maps.event.addDomListener(window, 'load', initialize);

<script src="http://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas" style="height: 500px; width:500px;"></div>

这篇关于JavaScript数组推（盐ñ佩帕风格）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

JavaScript数组推（盐ñ佩帕风格） [英] Javascript array push it (Salt n Pepa style)

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

JavaScript数组推（盐ñ佩帕风格） [英] Javascript array push it (Salt n Pepa style)

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭