0

次のコードでわかるように、MySQL データベースからデータを取得していますが、取得した「場所」を使用して Google マップ上のマーカーの「位置」を設定したいときに行き詰まりました。

<head>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxxxxxxxxxxx&sensor=true"></script>
<script>
  $.getJSON('http://www.wawhost.com/appProject/fetchmarker.php?callback=?', function(data) {
    for (var i = 0; i < data.length; i++) {
      localStorage.loc = data[i].location;
    }
  });
</script>
<script>
  function initialize() {
    var myLatlng = new google.maps.LatLng(-25.363882, 131.044922);
    var mapOptions = {
      zoom: 4,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

    var marker = new google.maps.Marker({
      position: 'new google.maps.LatLng(' + localStorage.loc + ')',
      map: map,
      title: 'Hello World!'
    });
  }
</script>
</head>

<body onload="initialize()">
<div id="map_canvas"></div>
</body>

ありがとうございました！

4

1 に答える 1

1

ページが読み込まれたときにリクエストを行いinitialize、AJAX 成功コールバックから関数を呼び出します。

$(function() {
  $.getJSON('http://www.wawhost.com/appProject/fetchmarker.php?callback=?', function(data) {
     for (var i = 0; i < data.length; i++) {
       localStorage.loc = data[i].location;
     }
     initialize();
  });
});

また、この線は少し大雑把に見えます。position新しい であるはずgoogle.maps.LatLngです。

position: 'new google.maps.LatLng(' + localStorage.loc + ')'.

LatLngオブジェクトを構築するために緯度と経度の引数を取ります。リクエストから保存したのは、コンマで区切られた緯度と経度の値を持つstringです。

// First split the string into lat and long.
var pos = localStorage.loc.split(",");
// Parse the strings into floats.
var lat = parseFloat(pos[0]);
var lng = parseFloat(pos[1]);    
// Create a new marker with the values from the request.  
var marker = new google.maps.Marker({
  position: new google.maps.LatLng(lat, lng),
  map: map,
  title: 'Hello World!'
});

ここで試してみてください。

于 2013-01-10T03:32:47.917 に答える