谷歌地圖標記點擊並拖動特定的縮放級別

我有兩個問題。首先，我想用按鈕在我的Google地圖上放置標記，但我不知道我的錯在哪裏。其次，我的地圖只能在縮放級別16上拖動。我希望有人能幫我解決我的問題。這是我的代碼。谷歌地圖標記點擊並拖動特定的縮放級別

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<style type="text/css"> 
    html { height: 100% } 
    body { height: 100%; margin: 0px; padding: 0px } 
    #map_canvas { height: 100% } 
</style> 
<script type="text/javascript" 
    src="http://maps.google.com/maps/api/js?sensor=true"> 
</script> 
<script type="text/javascript"> 
    function initialize() { 
    var latlng = new google.maps.LatLng(52.502648,13.529278); 
    var myOptions = { 
     zoom: 15, 
     center: latlng, 
     disableDefaultUI: true, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     center: new google.maps.LatLng(52.502648, 13.529278), 
     minZoom: 15, 
     maxZoom: 16 
    }; 
    var map = new google.maps.Map(document.getElementById("map_canvas"), 
     myOptions); 

    var strictBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(52.50, 13.525), 
    new google.maps.LatLng(52.506, 13.534) 
    ); 

    // Listen for the dragend event 
    google.maps.event.addListener(map, 'dragend', function() { 
     if (strictBounds.contains(map.getCenter())) return; 

    // We're out of bounds - Move the map back within the bounds 

    var c = map.getCenter(), 
     x = c.lng(), 
     y = c.lat(), 
     maxX = strictBounds.getNorthEast().lng(), 
     maxY = strictBounds.getNorthEast().lat(), 
     minX = strictBounds.getSouthWest().lng(), 
     minY = strictBounds.getSouthWest().lat(); 

    if (x < minX) x = minX; 
    if (x > maxX) x = maxX; 
    if (y < minY) y = minY; 
    if (y > maxY) y = maxY; 

    map.setCenter(new google.maps.LatLng(y, x)); 
    }); 

    // Listen for the dragend event 
    google.maps.event.addListener(map, 'bounds_changed', function() { 
     if (strictBounds.contains(map.getCenter())) return; 

    // We're out of bounds - Move the map back within the bounds 

    var c = map.getCenter(), 
     x = c.lng(), 
     y = c.lat(), 
     maxX = strictBounds.getNorthEast().lng(), 
     maxY = strictBounds.getNorthEast().lat(), 
     minX = strictBounds.getSouthWest().lng(), 
     minY = strictBounds.getSouthWest().lat(); 

    if (x < minX) x = minX; 
    if (x > maxX) x = maxX; 
    if (y < minY) y = minY; 
    if (y > maxY) y = maxY; 

    map.setCenter(new google.maps.LatLng(y, x)); 
    }); 

    var imageBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(52.4952, 13.5189), 
    new google.maps.LatLng(52.51, 13.53957) 
    ); 

    var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(52.503971,13.52073), 
     map:map, 
     title:"Hello World!" 
    }); 

    marker.setMap(map); 

    var groundoverlay = new google.maps.GroundOverlay('pics/karte2.png', imageBounds); 
    groundoverlay.setMap(map); 
    groundoverlay.setOpacity(1); 

    } 

var wcs = [ 
    ['Klo1', 52.504971, 13.52063, 1], 
    ['Klo2', 52.504071, 13.53023, 2], 
]; 

var gastro = [ 
    ['Cafeteria', 52.504541,13.529014, 1], 
    ['Imbiss', 52.500121,13.532913, 2], 
]; 

    function setMarkers(map,locations){ 
     for (var i=0; i < locations.length; i++) { 
      var loc = locations[i]; 
      var locLatLng = new google.maps.LatLng(loc[1], loc[2]); 
      var locmarker = new google.maps.Marker({ 
       position:locLatLng, 
       map:map, 
       title: loc[0], 
       zIndex: loc[3] 
      }); 
     }; 

     locmarker.setMap(map); 
    } 

    /*google.maps.event.addListener(map, 'zoom_changed', function() { 
     if (map.zoom!=15){map.setOptions({draggable:true});} 
     else map.setOptions({draggable:false}); 
    });*/ 

</script> 
</head> 
<body onload="initialize()"> 
    <div id="map_canvas" style="width:480px; height:560px"></div> 
    <form name="Test" action=""> 
    <input type="button" value="WCs" onclick="setMarkers(map,wcs)"> 
    <input type="button" value="Gastro" onclick="setMarkers(map,gastro)"> 
    </form> 
</body> 
</html>

來源

2012-12-11 Cabanaramma

您可以指定「拖動」屬性：

var myOptions = { 
    zoom: 15, 
    center: latlng, 
    disableDefaultUI: true, 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    center: new google.maps.LatLng(52.502648, 13.529278), 
    minZoom: 15, 
    maxZoom: 16, 
    draggable : false 
}; 
var map = new google.maps.Map(document.getElementById("map_canvas"), 
    myOptions);

這：

google.maps.event.addListener(map, "zoom_changed", function() { 
    map.setOptions({ 
    draggable : map.getZoom() == 16 
    }); 
})

來源

2012-12-13 02:19:36 wf9a5m75

我在代碼中添加了一些代碼。請檢查差異。

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<style type="text/css"> 
    html { height: 100% } 
    body { height: 100%; margin: 0px; padding: 0px } 
    #map_canvas { height: 100% } 
</style> 
<script type="text/javascript" 
    src="http://maps.google.com/maps/api/js?sensor=true"> 
</script> 
<script type="text/javascript"> 
    function initialize() { 
    var latlng = new google.maps.LatLng(52.502648,13.529278); 
    var myOptions = { 
     zoom: 15, 
     center: latlng, 
     disableDefaultUI: true, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     center: new google.maps.LatLng(52.502648, 13.529278), 
     minZoom: 15, 
     maxZoom: 16 
    }; 
    var map = new google.maps.Map(document.getElementById("map_canvas"), 
     myOptions); 

    var strictBounds = new google.maps.LatLngBounds(
     new google.maps.LatLng(52.50, 13.525), 
     new google.maps.LatLng(52.506, 13.534) 
    ); 

    // Listen for the dragend event 
    google.maps.event.addListener(map, 'dragend', function() { 
     if (strictBounds.contains(map.getCenter())) return; 

    // We're out of bounds - Move the map back within the bounds 

    var c = map.getCenter(), 
     x = c.lng(), 
     y = c.lat(), 
     maxX = strictBounds.getNorthEast().lng(), 
     maxY = strictBounds.getNorthEast().lat(), 
     minX = strictBounds.getSouthWest().lng(), 
     minY = strictBounds.getSouthWest().lat(); 

    if (x < minX) x = minX; 
    if (x > maxX) x = maxX; 
    if (y < minY) y = minY; 
    if (y > maxY) y = maxY; 

    map.setCenter(new google.maps.LatLng(y, x)); 
    }); 

    // Listen for the dragend event 
    google.maps.event.addListener(map, 'bounds_changed', function() { 
     if (strictBounds.contains(map.getCenter())) return; 

    // We're out of bounds - Move the map back within the bounds 

    var c = map.getCenter(), 
     x = c.lng(), 
     y = c.lat(), 
     maxX = strictBounds.getNorthEast().lng(), 
     maxY = strictBounds.getNorthEast().lat(), 
     minX = strictBounds.getSouthWest().lng(), 
     minY = strictBounds.getSouthWest().lat(); 

    if (x < minX) x = minX; 
    if (x > maxX) x = maxX; 
    if (y < minY) y = minY; 
    if (y > maxY) y = maxY; 

    map.setCenter(new google.maps.LatLng(y, x)); 
    }); 

    var imageBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(52.4952, 13.5189), 
    new google.maps.LatLng(52.51, 13.53957) 
    ); 

    var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(52.503971,13.52073), 
     map:map, 
     title:"Hello World!" 
    }); 


    google.maps.event.addListener(map, "zoom_changed", function() { 
     marker.setDraggable(map.getZoom() == 16); 
    }) 

    //var groundoverlay = new google.maps.GroundOverlay('pics/karte2.png', imageBounds); 
    //groundoverlay.setMap(map); 
    //groundoverlay.setOpacity(1); 

    var wcBtn = document.getElementById("btn_WCs"); 
    google.maps.event.addDomListener(wcBtn, "click", function() { 
     setMarkers(map,wcs); 
    }); 

    var gastroBtn = document.getElementById("btn_Gastro"); 
    google.maps.event.addDomListener(gastroBtn, "click", function() { 
     setMarkers(map,gastro); 
    }); 
    } 

var wcs = [ 
    ['Klo1', 52.504971, 13.52063, 1], 
    ['Klo2', 52.504071, 13.53023, 2], 
]; 

var gastro = [ 
    ['Cafeteria', 52.504541,13.529014, 1], 
    ['Imbiss', 52.500121,13.532913, 2], 
]; 

    function setMarkers(map,locations){ 
     for (var i=0; i < locations.length; i++) { 
      var loc = locations[i]; 
      var locLatLng = new google.maps.LatLng(loc[1], loc[2]); 
      var locmarker = new google.maps.Marker({ 
       position:locLatLng, 
       map:map, 
       title: loc[0], 
       zIndex: loc[3] 
      }); 
     }; 

     locmarker.setMap(map); 
    } 


</script> 
</head> 
<body onload="initialize()"> 
    <div id="map_canvas" style="width:480px; height:560px"></div> 
    <form name="Test" action=""> 
    <input type="button" value="WCs" id="btn_WCs"> 
    <input type="button" value="Gastro" id="btn_Gastro" > 
    </form> 
</body> 
</html>

來源

2012-12-11 23:03:25 wf9a5m75

第一部分作品。謝謝！但在第二部分，標記不應該拖動，地圖應該只能在特定的縮放級別拖動。 – Cabanaramma

谷歌地圖標記點擊並拖動特定的縮放級別

回答

相關問題