使用Javascript变量放置Google Maps Marker位置

Question

我正在尝试在地图中放置一个标记，并在复制警报结果时通过单击<ul>将javascript变量传递到另一个php页面中（例如：{lat：-25.4025，lng：-49.2643 }）并直接放在'position'字段中可以正常工作，但是当我将变量放在其上时，它就没有效果。

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,
  });
}

Answer 1

从标记中的data-value属性解析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
    });
}