1

ここでは、JSON ファイルから緯度と経度を取得する機能を作成しています。Googleマップにマーカーを表示します。

しかし、私の問題は、Google マップに表示されるマーカーが 1 つだけであることです。その他は表示されません。

ここに私のjson形式があります

  {
"Data": {
"-template": "Parallax",
 "Explore": {
 "IslandLife": {
"TourismLocation": [
  {
    "Title": "Langkawi",
    "Latitude": "6.350000",
    "Longitude": "99.800000",
    "YouTubePlaylistID": "UUnTJRksbHP4O8JSz00_XRQA",
    "VideosList": {
      "YouTubeVideoID": [
        "7HlMpaSspNs",
        "tzeRnbd77HU",
        "VkIAbDIVJCA",
        "ksJ6kwTe9wM"
      ]
    }
  },
  {
    "Title": "Rawa Island",
    "Latitude": "2.520278",
    "Longitude": "103.975833",
    "YouTubePlaylistID": "UUnTJRksbHP4O8JSz00_XRQA",
    "VideosList": { "YouTubeVideoID": "Kx0dUWaALKo" }
  },
  {
    "Title": "Perhentian Island",
    "Latitude": "5.903788",
    "Longitude": "102.753737",
    "YouTubePlaylistID": "UUnTJRksbHP4O8JSz00_XRQA",
    "VideosList": {
      "YouTubeVideoID": [
        "ZpcdGk5Ee0w",
        "TQTDOGpflZY"
      ]
    }
  },
  {
    "Title": "Sabah Marine Park",
    "Latitude": "4.623326",
    "Longitude": "118.719800",
    "YouTubePlaylistID": "UUnTJRksbHP4O8JSz00_XRQA",
    "VideosList": { "YouTubeVideoID": "VCDTEKOqpKg" }
  }
]
 }
}
}
 }

ここで、上記のjsonファイルから緯度とlognitutdeを取得している私の関数

<script type="text/javascript">

  $.getJSON('json/explore.json', function(data) {
     $.each(data, function(key, val) {
           for (var i = 0; i < val.Explore.IslandLife.TourismLocation.length; i++) {
               PlotMarker(val.Explore.IslandLife.TourismLocation[i].Latitude, val.Explore.IslandLife.TourismLocation[i].Longitude);
    }
    });
});

function PlotMarker(lat, lang) {
var mapProp = {
    center: new google.maps.LatLng(lat, lang),
    zoom: 5,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("gmap"), mapProp);
var marker = new google.maps.Marker({
    position: new google.maps.LatLng(lat, lang),
});
marker.setMap(map);
 }
 google.maps.event.addDomListener(window, 'load', PlotMarker);
    </script>


<body>
    <div id="gmap" style="width: 800px; height:500px;"></div>
</body>

地図上に複数のマーカーを表示する方法???

4

2 に答える 2

1

ここでの問題はスコープです-呼び出すたびにマップを再作成してPlotMarkerいるため、毎回マーカーが1つしか追加されません。PlotMarker次のように、関数の外側でマップを宣言します。

initialize() {
    var mapProp = {
      center: new google.maps.LatLng(lat, lang),
      zoom: 5,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("gmap"), mapProp);
}

function PlotMarker(lat, lang) {
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(lat, lang),
  });
  marker.setMap(map);
}

次にinitialize()、ページの読み込み時に呼び出します。また、PlotMarker 関数を呼び出す前にマップが存在することを確認してください。

サンプルコードを使用した別の良いSO回答: https://stackoverflow.com/a/7701386/1803682

于 2013-09-02T17:33:24.287 に答える
1

以下は、私のプロジェクトで使用する実用的なサンプルです

JS メソッドAddInfoWidnowは、InfoWindow をマーカーに追加するために使用されます。

function AddInfoWidnow(marker,message)
{
     var infowindow = new google.maps.InfoWindow({ content: message });

     google.maps.event.addListener(marker, 'click', function() {

     infowindow.open(marker.get('map'), marker);

    }); 

}

for ループ内でAddInfoWidnowメソッドを呼び出す

function ShowOnMap(ContainerId, mapItems) {

var DefaultLatLng= new google.maps.LatLng('12.967461', '79.941824');

var mapOptions = {
    center: DefaultLatLng,
    zoom: 10,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    marker: true
};

var mapCust = new google.maps.Map(document.getElementById(ContainerId), mapOptions);

var arrJsonObject = JSON.parse(mapItems);

for (var y = 1; y <= arrJsonObject.length; y++) 
{

    var myLatLng1 = new google.maps.LatLng(arrJsonObject[y - 1].Latitude, arrJsonObject[y - 1].Lonngitude);

    var marker = new google.maps.Marker({
    position: myLatLng1,
    map: mapCust,
    title: 'Marked at '+ arrJsonObject[y - 1].markedDate
});

    addInfoWindows(marker,y-1,arrJsonObject);


    marker.setMap(mapCust);

}
}

以下のスニペットを使用してマップを呼び出します

  var mapItems='[
  {
    "Latitude": "22.575897",
    "Lonngitude": "88.431754",
    "CustomerCode": "*$$$*",
    "CustomerName": "*@@@*",
    "markedDate": "2/20/2014 12:04:41 PM"
  },
  {
    "Latitude": "22.615067",
    "Lonngitude": "88.431759",
    "CustomerCode": "*$$$*",
    "CustomerName": "*@@@*",
    "markedDate": "2/20/2014 3:02:19 PM"
  }
]';
    ShowOnMap(containerId2, mapItems);
于 2014-02-28T12:47:53.707 に答える