2016-07-21 8 views
1

Ich habe eine Schaltfläche, die ziehbare Option für die Karte aktivieren/deaktivieren.Wie kann Google-Karte ziehbar gemacht werden und Marker in der Mitte des Bildschirms bleiben?

Und ich muss den Marker in der Mitte der Karte behalten, während Benutzer die Karte ziehen wird.

var map; 
 

 
function toggleMapDraggable() { 
 
    if (map.get("draggable")) { 
 
    map.set("draggable", false); 
 
    } else { 
 
    map.set("draggable", true); 
 
    } 
 
} 
 

 
function initialize() { 
 

 
    var locations = [ 
 
    ['WELWYN GARDEN CITY ', 51.805616, -0.192647, 2], 
 
    ['STANMORE  ', 51.603199, -0.296803, 1] 
 
    ]; 
 

 
    map = new google.maps.Map(document.getElementById('map_canvas'), { 
 
    navigationControl: true, 
 
    scrollwheel: false, 
 
    scaleControl: false, 
 
    draggable: false, 
 
    zoom: 10, 
 
    center: new google.maps.LatLng(51.75339, -0.210114), 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 

 
    var infowindow = new google.maps.InfoWindow(); 
 
    var image = 'http://maps.google.com/mapfiles/ms/micons/blue.png'; 
 

 
    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]), 
 
     map: map, 
 
     icon: image, 
 
     zIndex: 10 
 
    }); 
 

 
    window.google.maps.event.addListener(map , 'drag', function (event) { 
 
      marker.setPosition(map .getCenter()); 
 
    }); 
 

 
    google.maps.event.addListener(marker, 'mouseover', (function(marker, i) { 
 
     return function() { 
 
     infowindow.setContent(locations[i][0]); 
 
     infowindow.open(map, marker); 
 
     } 
 
    })(marker, i)); 
 
    } 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize);
html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<input type="button" value="toggle draggable" onclick="toggleMapDraggable();" /> 
 
<div id="map_canvas"></div>

+0

möglich Duplikat [Fixed Marker in der Mitte und ziehen Karte zu bekommen lat, lang] (http://stackoverflow.com/questions/36722930/fixed-marker-in- -center-and-drag-map-to-get-lat-long) – geocodezip

+0

mögliches Duplikat von [google maps float pin in der Mitte und am Zielort] (http://stackoverflow.com/questions/27195422/google-maps-float -pin-in-center-and-return-location) – geocodezip

+0

Duplikat von [Fester Marker in der Mitte und Drag-Map, um lat, long] (http://stackoverflow.com/questions/36722930/fixed-marker-in-center -und-ziehen-map-to-get-lat-long) – geocodezip

Antwort

1

Für ziehbar sollten Sie setOptions

map.setOptions({draggable: true}); 

und für Marker in der Mitte verwenden

marker.setPosition(map.getCenter(););