2013-03-08 5 views
0

Capture: http://imageshack.us/a/img59/8541/72825985.pngAPI Google Maps JS v3 marqueur unique cercles multiples

Le résultat ci-dessus est fournie par de multiples marqueurs (avec un rayon différent) sur la même place.

Je voudrais faire glisser un seul marqueur à la fois, pas plusieurs marqueurs. Deuxièmement, la fenêtre d'information est rendue disponible pour un rayon différent.

Toute aide est grandement appréciée!

var locations = [ 
    ['US gov suggested', 1.8833, 102.7833, 5, 'green', 80000], 
    ['agricultural contamination', 1.8833, 102.7833, 4, 'blue', 60000], 
    ['Chernobyl_Exclusion_Zone (fallout)', 1.8833, 102.7833, 3, 'yellow', 30000], 
    ['Fukushima evacuation zone', 1.8833, 102.7833, 2, 'red', 20000], 
    ['emergency zone', 1.8833, 102.7833, 1, 'black', 5000] 

]; 

et

var infowindow = new google.maps.InfoWindow(); 

var marker, i; 

for (i = 0; i < locations.length; i++) { 
    marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
    draggable: true, 
    map: map 
    }); 

    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
    return function() { 
     infowindow.setContent(locations[i][0]); 
     infowindow.open(map, marker); 
    } 
    })(marker, i)); 

var circle = new google.maps.Circle({ 
     map: map, 
     fillColor:locations[i][4], 
     //fillOpacity:0.3, 
     //strokeColor:locations[i][4], 
     strokeOpacity:0.1, 
     //strokeWeight:1, 
     radius: locations[i][5] // 30 km 
}); 

circle.bindTo('center', marker, 'position'); 

} 

Références: Google Maps JS API v3 - Simple Multiple Marker Example

http://code.google.com/p/gmaps-samples-v3/source/browse/trunk/circle-overlay/circle-overlay.html?r=67

http://plugins.svn.wordpress.org/google-maps-v3-shortcode-multiple-markers/trunk/

Répondre

1

Créer des cercles autant que vous voulez et lier le center -property de chaque cercle à la position -property du marqueur en utilisant la méthode bindTo() des cercles

+0

Tout d'abord, grâce à @ Dr.Molle –

0
var infowindow = new google.maps.InfoWindow() 

var marker, i; 
    marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(locations[0][1], locations[0][2]), 
    draggable: true, 
    map: map 
    }); 

for (i = 0; i < locations.length; i++) { 

    var circle = new google.maps.Circle({ 
    map: map, 
    clickable:true, 
    fillColor:locations[i][4], 
    //fillOpacity:0.3, 
    //strokeColor:locations[i][4], 
    strokeOpacity:0.1, 
    //strokeWeight:1, 
    radius: locations[i][5] // 30 km 
    }); 

circle.bindTo('center', marker, 'position'); 

En second lieu, il pas facile d'ajouter infowindow pour les superpositions de plusieurs cercles. Des idées ou des astuces? Par exemple, http://img443.imageshack.us/img443/8198/overlap.jpg

Référence: google maps v3 adding an info window to a circle

Questions connexes