Phonegap插件谷歌地图api v2上的多个标记答案

【问题标题】：Multiple markers on Phonegap plugin google maps api v2Phonegap插件谷歌地图api v2上的多个标记
【发布时间】：2015-06-03 21:40:30
【问题描述】：

我正在开发phonegap google maps plugin (v2) 但我只得到一个标记。我想显示多个标记。你能帮助我吗？谢谢，这是我的代码：

<script type="text/javascript">
    document.addEventListener("deviceready", function() {
        var mapDiv = document.getElementById("map_canvas");
        const TEST = new plugin.google.maps.LatLng(41.3772614,2.167013,15);
        var map = plugin.google.maps.Map.getMap(mapDiv, {
        'camera': {
        'latLng': TEST,
        'zoom': 17,
        }
     });

        map.addEventListener(plugin.google.maps.event.MAP_READY, function() {
            map.addMarker({
            'position': TEST,
            'title': "Aqui esta el test!",
            'snippet': "Texto del snippet!",
        }, function(marker) {
           // marker.showInfoWindow(); // Show infowindow
        });
      });
    });
 </script>

【问题讨论】：

您想在哪个位置设置其他标记？在您的代码中，为标记指出了一个位置。
不管在哪个位置，我只需要知道如何设置多个标记，比如：marker1=(41.3 , 2.16) marker2=(41,7 , 2.53) marker3=(42 , 2.69)

标签： javascript cordova google-maps-markers phonegap-plugins google-maps-api-2

【解决方案1】：

    document.addEventListener("deviceready", function()  {
             var mapDiv = document.getElementById("map_canvas");
             var locatonList = [
                    {lat : 41.3772614 , long : 2.16701315, title : 'Title A' ,snippet : 'Snippet A'},
                    {lat : 41.7 , long : 2.53, title : 'Title B' ,snippet : 'Snippet B'},
                    {lat : 42 , long : 2.69, title : 'Title C' ,snippet : 'Snippet C'}
             ];

             const TEST = new plugin.google.maps.LatLng(locatonList[0].lat,locatonList[0].long);                             
             var map = plugin.google.maps.Map.getMap(mapDiv, {
                    'camera': {
                        'latLng': TEST,
                        'zoom': 17
                    }
             });

             map.addEventListener(plugin.google.maps.event.MAP_READY, function() {

                    for(var locIndex = 0;locIndex<locatonList.length;locIndex++){
                            var locObj = new plugin.google.maps.LatLng(locatonList[locIndex].lat,locatonList[locIndex].long);
                            map.addMarker({
                                   'position': locObj,
                                   'title': locatonList[locIndex].title,
                                   'snippet': locatonList[locIndex].snippet
                            }, function(marker) {
                                 // marker.showInfoWindow(); // Show infowindow
                            });
                    }
              });

     },false);

【讨论】：

对不起@Banik，以前的代码可以按我的要求工作，但现在我想要实现的是为每个标记（标题，sn-p ...）制作不同的字段跨度>
将位置列表制作为一个对象数组，其中将包含 lat、long、title 和 sn-p
抱歉来晚了。我刚刚更新了代码。您现在可以查看。
谢谢@Banik！你太棒了！！它就像一个魅力！ ^__^

【解决方案2】：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript">
    var map;
   document.addEventListener("deviceready", function() {
  var mapDiv = document.getElementById("map_canvas");

  const GOOGLE = new plugin.google.maps.LatLng( -33.890542, 151.274856);

  var map = plugin.google.maps.Map.getMap(mapDiv, {
    'camera': {
      'latLng': GOOGLE,
      'zoom': 17
    }
  });

  map.addEventListener(plugin.google.maps.event.MAP_READY, function() {

  var data = [
  {'title': 'marker1', 'position': new plugin.google.maps.LatLng(-33.890542, 151.274856),'icon': 'https://www.google.com/intl/en_us/mapfiles/ms/icons/blue-dot.png','snippet': 'And the description of this marker.'},
  {'title': 'marker2', 'position': new plugin.google.maps.LatLng(-33.923036, 151.259052), 'icon': 'https://www.google.com/intl/en_us/mapfiles/ms/icons/blue-dot.png','snippet': 'And the description of this marker.'
   },
  {'title': 'markerN', 'position': new plugin.google.maps.LatLng(-34.028249, 151.157507), 'icon': 'https://www.google.com/intl/en_us/mapfiles/ms/icons/blue-dot.png','snippet': 'And the description of this marker.'
   }
];
for(var i = 0; i < data.length;i++){

addMarkers(data, function(markers) {
console.log("hellooooo");
  markers[markers.length - 1].showInfoWindow();
});
}
function addMarkers(data, callback) {
  var markers = [];
  function onMarkerAdded(marker) {
    markers.push(marker);
    if (markers.length === data.length) {
      callback(markers);
    }
  }
  data.forEach(function(markerOptions) {
    map.addMarker(markerOptions, onMarkerAdded);
  });

}
   });
});



    </script>
</head>
<body>
<h3>PhoneGap-GoogleMaps-Plugin</h3>
<div style="width:100%;height:400px" id="map_canvas"></div>
<button id="button">Full Screen</button>
</body>
</html>

【讨论】：