使用 Javascript 变量放置 Google 地图标记位置答案

【问题标题】：Putting a Google Maps Marker position with a Javascript variable使用 Javascript 变量放置 Google 地图标记位置
【发布时间】：2019-02-26 05:17:56
【问题描述】：

我试图在我的地图中放置一个标记，当我复制警报结果时（例如：{lat: -25.4025, lng : -49.2643} ）并直接放在“位置”字段中它工作正常，但是当我把变量放在它上面时，它就不行了。

PHP
$History_Assoc = mysqli_fetch_array($HistoryQuery);


      echo '<ul class="repoFolder" data-value=" {lat: '.(float)$History_Assoc['latitude'].', lng: '.(float)$History_Assoc['longitude'] .'}  ">';
      echo '<br>';



JAVASCRIPT
var folders = document.getElementsByClassName("repoFolder");
for (let i = 0; i < folders.length; i++) {
  folders[i].onclick = function() {rootFolder.call(this)}; // note that I am passing in the context to rootFolder. 
}

function rootFolder() {

  var variable =  this.getAttribute('data-value');

  alert(variable);

  var markersHistory = new google.maps.Marker({
    position: variable,
    map: map,
    icon: iconBlue2,
  });
}

【问题讨论】：

您的变量是否包含正确的数据？你能检查它产生的结果吗？
是的，当我“警告”变量时它会显示坐标，当我复制相同的坐标并放入 de position 字段时它可以工作，但是当我放入变量时它不会

标签： javascript php google-maps google-maps-api-3 google-maps-markers

【解决方案1】：

看起来从标记中的数据值属性解析 JSON 时出现问题。有几种方法可以处理这个问题，但我认为最简单的方法是将纬度和经度值嵌入为两个单独的数据属性，然后使用 Google Maps LatLng 对象来指定标记的坐标。这样您就可以避免各种 JSON 陷阱。这是一个例子：

HTML：

<ul class="repoFolder" data-lat="-25.4025" data-lng="-49.2643">
    <li>Clicky</li>
</ul>

Javascript

function rootFolder() 
{
    var latitude =  this.getAttribute('data-lat');
    var longitude =  this.getAttribute('data-lng');

    var latLng = new google.maps.LatLng(latitude, longitude);

    var markersHistory = new google.maps.Marker({
        position: latLng,
        map: map
    });
}

【讨论】：