3

複数のマーカーとそれに関連する情報ウィンドウを 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'});
});

誰も方法を知っていますか?

4

1 に答える 1

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});
})();
于 2012-12-31T16:55:57.993 に答える