为循环追加变量js

Appending Variable js for loop

本文关键字:js 变量 追加 循环      更新时间:2023-09-26

我正试图循环浏览一些坐标集,在谷歌地图上绘制矢量,但似乎无法获得正确的语法,无法在中绘制坐标

var buildingCoords1 = [
    new google.maps.LatLng(51.49609,-0.27609),
    new google.maps.LatLng(51.49604,-0.27502),
    new google.maps.LatLng(51.49586,-0.27504),
    new google.maps.LatLng(51.49588,-0.27533),
    new google.maps.LatLng(51.49563,-0.27537),
    new google.maps.LatLng(51.49568,-0.2764),
    new google.maps.LatLng(51.49585,-0.27637),
    new google.maps.LatLng(51.49584,-0.27613)
];
var buildingCoords2 = [
    new google.maps.LatLng(51.49548,-0.27586),
    new google.maps.LatLng(51.49504,-0.27593),
    new google.maps.LatLng(51.4951,-0.27701),
    new google.maps.LatLng(51.49555,-0.27695)
];
// plot and add listeners to buildings 1 through 2
var buildings = [];
for (i = 1; i < 3; i++) { 
    buildings[i] = new google.maps.Polygon({
        paths: buildingCoords[i],
        strokeColor: '#fccf25',
        strokeOpacity: 0.8,
        strokeWeight: 1,
        fillColor: '#fccf25',
        fillOpacity: 0.35
    });
    buildings[i].setMap(map);
} //end for

我认为线路径:buildingCoords[i]应该有效,如果我将其更改为路径:building Coords1,它将正确地获得第一个集合。我收到的错误信息是

未捕获引用错误:未定义buildingCoords

如何正确地附加"I"变量以获得坐标。?

非常感谢

使用buildingCoords可以引用未定义的变量。添加以下行应该可以解决您的问题:

var buildingCoords = [buildingCoords1,buildingCoords2];
  1. 您的代码中没有buildingCoords数组。正如SimonR所指出的,您需要创建var buildingCoords = [buildingCoords1,buildingCoords2];

  2. 你只有两个数组,这个for (i = 1; i < 3; i++)没有意义,应该是for (i = 0; i < buildingCoords.length; i++)

工作小提琴

代码片段:

var geocoder;
var map;
function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(51.49609, -0.27609),
      zoom: 17,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var buildingCoords1 = [
    new google.maps.LatLng(51.49609, -0.27609),
    new google.maps.LatLng(51.49604, -0.27502),
    new google.maps.LatLng(51.49586, -0.27504),
    new google.maps.LatLng(51.49588, -0.27533),
    new google.maps.LatLng(51.49563, -0.27537),
    new google.maps.LatLng(51.49568, -0.2764),
    new google.maps.LatLng(51.49585, -0.27637),
    new google.maps.LatLng(51.49584, -0.27613)
  ];
  var buildingCoords2 = [
    new google.maps.LatLng(51.49548, -0.27586),
    new google.maps.LatLng(51.49504, -0.27593),
    new google.maps.LatLng(51.4951, -0.27701),
    new google.maps.LatLng(51.49555, -0.27695)
  ];
  var buildingCoords = [buildingCoords1, buildingCoords2];
  // plot and add listeners to buildings 1 through 2
  var buildings = [];
  for (i = 0; i < buildingCoords.length; i++) {
    buildings[i] = new google.maps.Polygon({
      path: buildingCoords[i],
      strokeColor: '#fccf25',
      strokeOpacity: 0.8,
      strokeWeight: 1,
      fillColor: '#fccf25',
      fillOpacity: 0.35
    });
    buildings[i].setMap(map);
  } //end for
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>