Phonegap插件谷歌地圖上的多個標記api v2

我正在處理phonegap google maps plugin（v2）但我只獲得一個標記。我想顯示多個標記。你可以幫我嗎？謝謝你，這裏是我的代碼：Phonegap插件谷歌地圖上的多個標記api 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>

來源

2015-03-30 bertran escolà

？在你的代碼中有一個位置指出了標記。 – Banik 2015-03-31 09:35:07

無論在哪個位置，我只需要知道如何設置多個標記，如： marker1 =（41.3,2.16） marker2 =（41,7,2.53） marker3 =（42,2.69） – 2015-03-31 15:58:20

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

來源

2015-04-01 07:12:44 Banik

它的作品！非常感謝你！你幫了我很多！ – 2015-04-01 10:35:03

對不起，@Banik，它的工作原理，因爲我問，但現在我想實現的是使每個標記的不同字段（標題，片段...） – 2015-04-01 10:58:10

使位置列表作爲一個對象數組將包含拉特，長，標題和片段 – Banik 2015-04-01 11:03:12

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

在哪個位置要設置其他標誌物

來源

2017-03-17 11:21:36

Phonegap插件谷歌地圖上的多個標記api v2

回答

相關問題