jquery - 在 Jquery-ui 地图上添加多个标记

Question

我正在尝试将多个标记及其关联的信息窗口添加到 jquery-ui-map，但我无法获得任何结果。

我试过这个：

$('#map').gmap('addMarker', {'position': '<?php echo $city->city_latitude; ?>,<?php echo $city->city_longitude; ?>', 'bounds': true});

但它不起作用。

我的地图在此代码之前初始化并且可以工作：

$(function() {
    $('#map').gmap({'zoom':8, 'center': '45.558295,5.776062'});
});

有谁知道该怎么做？

Answer 1

好像您正试图在浏览器中执行 php，但这是行不通的。尝试先添加带有硬编码值的标记，然后您可以考虑如何将这些值传递给浏览器。例子：

(function() {
  var $map = $('#map');
  $map.gmap({zoom:8, center: '45.558295,5.776062'});
  $map.gmap('addMarker', {position: '45.558295,5.776062', bounds: true});
})();

如果这对您有用，那么您可以开始考虑如何将这些纬度和经度坐标从服务器传递到浏览器。例如，您可以使用数据属性或 ajax 调用。以下是使用数据属性的方法：

PHP/HTML：

<?php $city_lat_lng = "{$city->city_latitude},{$city->city_longitude}"; ?>

<div id="city-data" data-lat-lng="<?php echo $city_lat_lng; ?>" style="display:none;"></div>
...rest of your html code below

JS：

(function() {
  var $map = $('#map');
  var cityLatLng = $('#city-data').data('lat-lng');
  $map.gmap({zoom:8, center: '45.558295,5.776062'});
  $map.gmap('addMarker', {position: cityLatLng, bounds: true});
})();