javascript - 显示多个标记、变量和数组问题

Question

我尝试在 map 上显示多个标记。我通过我的 php 文件将多个位置放在 adata-attribute 中。然后我尝试在我的 javascript 中获取此信息。

如果我直接粘贴坐标，则会出现标记。如果我引用数据属性，他们不会。 (唯一的区别在于 以 var 位置开头的行。)

此代码有效:

function GoogleMapsInit(){
setTimeout(function initialize() {
    var emplacements = $('#iframecarte').attr("data-emplacements");
    // Emplacements returns [[45.5314817,-73.1835154], [45.570004,-73.448701] ]
    var mapOptions = {
        zoom: 12,
        center: new google.maps.LatLng(45.5580421, -73.7303025)
    };
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    var locations = [[45.5314817,-73.1835154], [45.570004,-73.448701] ];

    var marker, i;
    var markers = new Array();

    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][0], locations[i][1]),
        map: map
      });

      markers.push(marker);

    }

}, 500);
}

这个没有:

function GoogleMapsInit(){
setTimeout(function initialize() {
    var emplacements = $('#iframecarte').attr("data-emplacements");
    // Emplacements returns [[45.5314817,-73.1835154], [45.570004,-73.448701] ]
    var mapOptions = {
        zoom: 12,
        center: new google.maps.LatLng(45.5580421, -73.7303025)
    };
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    var locations = emplacements;

    var marker, i;
    var markers = new Array();

    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][0], locations[i][1]),
        map: map
      });

      markers.push(marker);

    }

}, 500);
}

当变量位置引用 emplacements 变量时，变量位置出了什么问题，导致标记不显示？

Answer 1

非工作版本的位置是一个字符串，而不是一个数组。

将字符串转换为 JavaScript 数组:

var locations = JSON.parse(emplacements);

proof of concept fiddle

代码片段:

function GoogleMapsInit() {
  setTimeout(function initialize() {
    var emplacements = $('#iframecarte').attr("data-emplacements");
    // Emplacements returns [[45.5314817,-73.1835154], [45.570004,-73.448701] ]
    var mapOptions = {
      zoom: 9,
      center: new google.maps.LatLng(45.5580421, -73.7303025)
    };
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    var locations = JSON.parse(emplacements);

    var marker, i;
    var markers = new Array();

    for (i = 0; i < locations.length; i++) {
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][0], locations[i][1]),
        map: map
      });

      markers.push(marker);

    }

  }, 500);
}
GoogleMapsInit();

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

<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>
<div id="iframecarte" data-emplacements="[[45.5314817,-73.1835154], [45.570004,-73.448701], [45.6066487,-73.712409]]"></div>