将谷歌地图标记位置与Javascript变量放在一起

Question

我正在尝试在我的地图中放置一个标记，并且我通过单击<ul>将javascript变量传递到另一个php页面，当我复制警报结果(例如：{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,
});
}

Answer 1

从标记中的数据值属性解析 JSON 时似乎存在问题。有几种方法可以解决这个问题，但我认为最简单的方法是将纬度和经度值嵌入为两个单独的数据属性，然后使用 Google Maps LatLng 对象指定标记的坐标。这样，您可以避免各种 JSON 陷阱。下面是一个示例：

.HTML：

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

爪哇语

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