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

Question

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

我尝试过这个:

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

但是这不起作用。

我的 map 在这段代码之前初始化并且可以工作:

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