Question

我正致力于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>

Answer 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);

Answer 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>

Phonegap插件上的多个标记google maps api v2

2 个答案: