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