谷歌地圖API v3 - 放大後如何

我想獲取谷歌地圖加載，然後放大到我的標記，但我有我的JavaScript的錯誤，因爲地圖的範圍不可見，儘管它是全球定義。谷歌地圖API v3 - 放大後如何

任何想法我做錯了什麼？

非常感謝

馬克

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Geolocation</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <script src="js/jquery-1.10.1.min.js"></script>  
    <link href="css/default.css" rel="stylesheet"> 
    <!-- 
    Include the maps javascript with sensor=true because this code is using a 
    sensor (a GPS locator) to determine the user's location. 
    See: https://developers.google.com/apis/maps/documentation/javascript/basics#SpecifyingSensor 
    --> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.12&sensor=true"></script> 

    <script> 

//START Global Variables 
var geocoder; 
var map; 
var marker; 
var initialZoomLevel = 7; 
var endZoomLevel = 16; 
var zoomTimeInterval_ms = 1000; 
var mapIcon = { 
    url: "images/im_here.png", 
    // This marker is 130 pixels wide by 120 pixels tall 
    size: new google.maps.Size(130,120), 
    //scale image so it works with retina displays 
    scaledSize: new google.maps.Size(65,60), 
    // The origin for this image is 0,0. 
    origin: new google.maps.Point(0,0), 
    // The anchor point is be middle of the base 
    anchor: new google.maps.Point(32.5,60) 
}; 
var mapIcon_shadow = { 
    url: "images/im_here_shadow.png", 
    // This shadow is 191 pixels wide by 120 pixels tall 
    size: new google.maps.Size(191,120), 
    //scale image so it works with retina displays 
    scaledSize: new google.maps.Size(95.5,60), 
    // The origin for this image is 0,0. 
    origin: new google.maps.Point(0,0), 
    // The anchor point is be middle of the base 
    anchor: new google.maps.Point(32.5,60) 
}; 
//Enable the visual refresh 
google.maps.visualRefresh = true; 
//END Global Variables 

/** Initialise function to render the map */ 
function initialize() { 
    geocoder = new google.maps.Geocoder(); 
    var mapOptions = { 
    zoom: initialZoomLevel, 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    mapTypeControl: false, 
    panControl: false, 
    streetViewControl: false, 
    zoomControl: false 
    }; 
    map = new google.maps.Map(document.getElementById('map-canvas'), 
     mapOptions); 

    // Try HTML5 geolocation 
    if(navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(function(position) { 
     var pos = new google.maps.LatLng(position.coords.latitude, 
             position.coords.longitude); 

     // set home location 
     home = new google.maps.LatLng(position.coords.latitude, 
            position.coords.longitude); 

     // the marker where you are 
     marker = new google.maps.Marker({ 
     map: map, 
     position: pos, 
     icon: mapIcon, 
     shadow: mapIcon_shadow, 
     draggable: true 
     }); 

     codeLatLng(pos); 
     map.panTo(pos); 

     google.maps.event.addListener(marker, 'dragend', function(a) { 
     //alert('LatLng is '+a.latLng.lat()+ " "+ a.latLng.lng()); 
     codeLatLng(a.latLng); 
     }); 

    }, function() { 
     handleNoGeolocation(true); 
    }); 
    } else { 
    // Browser doesn't support Geolocation 
    handleNoGeolocation(false); 
    } 

    // Create the DIV to hold the control and 
    // call the HomeControl() constructor passing 
    // in this DIV. 
    //var homeControlDiv = document.createElement('div'); 
    //var homeControl = new HomeControl(homeControlDiv, map); 

    //homeControlDiv.index = 1; 
    //map.controls[google.maps.ControlPosition.TOP_CENTER].push(homeControlDiv); 

    smoothZoom(map, endZoomLevel, map.getZoom()); // call smoothZoom, parameters map, final zoomLevel, and starting zoom level 
} 

function handleNoGeolocation(errorFlag) { 
    if (errorFlag) { 
    var content = 'Error: The Geolocation service failed.'; 
    } else { 
    var content = 'Error: Your browser doesn\'t support geolocation.'; 
    } 

    var options = { 
    map: map, 
    position: new google.maps.LatLng(60, 105), 
    content: content 
    }; 

    var infowindow = new google.maps.InfoWindow(options); 
    map.setCenter(options.position); 
} 

function codeLatLng(markerLatLang) { 
    //var latlng = new google.maps.LatLng(latLng.lat(), latLng.lng()); 
    geocoder.geocode({'latLng': markerLatLang}, function(results, status) { 
    if (status == google.maps.GeocoderStatus.OK) { 
     if (results[0]) { 
     name = results[0].formatted_address; 
     latlongStr = "LAT = ["+markerLatLang.lat()+"] LNG = ["+markerLatLang.lng()+"]"; 
     //alert("name = "+name);  
     $('#address').html(name); 
     $('#latlong').html(latlongStr); 
     } else { 
     alert('No results found'); 
     } 
    } else { 
     alert('Geocoder failed due to: ' + status); 
    } 
    }); 
} 

/** 
* The HomeControl adds a control to the map that simply 
* returns the user to home. This constructor takes 
* the control DIV as an argument. 
* @constructor 
*/ 
/** TODO need to rewite this as normal div, not on map **/ 
function HomeControl(controlDiv, map) { 

    // Set CSS styles for the DIV containing the control 
    // Setting padding to 5 px will offset the control 
    // from the edge of the map 
    controlDiv.style.padding = '5px'; 

    // Set CSS for the control border 
    var controlUI = document.createElement('div'); 
    controlUI.style.backgroundColor = 'white'; 
    controlUI.style.borderStyle = 'solid'; 
    controlUI.style.borderWidth = '2px'; 
    controlUI.style.cursor = 'pointer'; 
    controlUI.style.textAlign = 'center'; 
    controlUI.title = 'Click to set the map to Start Location'; 
    controlDiv.appendChild(controlUI); 

    // Set CSS for the control interior 
    var controlText = document.createElement('div'); 
    controlText.style.fontFamily = 'Helvetica,sans-serif'; 
    controlText.style.fontSize = '16px'; 
    controlText.style.paddingLeft = '4px'; 
    controlText.style.paddingRight = '4px'; 
    controlText.style.zIndex = "100"; 
    controlText.innerHTML = '<b>Reset Map</b>'; 
    controlUI.appendChild(controlText); 

    // Setup the click event listeners: simply set the map back to home 
    google.maps.event.addDomListener(controlUI, 'click', function() { 
    marker.setPosition(home); 
    map.setCenter(home); 
    }); 
} 

// the smooth zoom function 
function smoothZoom (map, max, cnt) { 
    if (cnt >= max) { 
      return; 
     } 
    else { 
     z = google.maps.event.addListener(map, 'zoom_changed', function(event){ 
      google.maps.event.removeListener(z); 
      self.smoothZoom(map, max, cnt + 1); 
     }); 
     setTimeout(function(){map.setZoom(cnt)}, zoomTimeInterval_ms); 
    } 
} 

google.maps.event.addDomListener(window, 'load', initialize); 

    </script> 
    </head> 
    <body> 
    <div id="panel">   
     <div id="latlong">No latlong Yet</div> 
     <div id="address">No Address Yet</div> 
    </div> 
    <div id="map-canvas"></div> 
    </body> 
</html>

來源

2013-06-27 Mark Wiltshire

您的地圖是全局定義的事實是不相關的，如果你不等待，直到它被使用前初始化。它由在body onload事件上運行的初始化函數初始化。在發生這種情況之前，您可以使用它。這個工作對我來說：

function initialize() { 
    geocoder = new google.maps.Geocoder(); 
    var mapOptions = { 
    zoom: initialZoomLevel, 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    mapTypeControl: false, 
    panControl: false, 
    streetViewControl: false, 
    zoomControl: false 
    }; 
    map = new google.maps.Map(document.getElementById('map-canvas'), 
     mapOptions); 

    google.maps.event.addListenerOnce(map,"zoom_changed", function() { 
    smoothZoom(map, endZoomLevel, map.getZoom()); // call smoothZoom, parameters map, final zoomLevel, and starting zoom level 
    });

working example

似乎ZOOM_CHANGED事件時，地圖初始化不火，使用「空閒」事件似乎工作： working example with zoom on idle

來源

2013-06-27 13:19:02 geocodezip

喜geocodezip，謝謝回覆，好吧，我現在明白爲什麼這給了我錯誤，正如你所說的，我必須等待body onload事件來初始化它。但是縮放無法正常工作，即使在您的示例中，它仍然處於初始級別（在FF和Chrome上）我想要加載地圖，然後自動縮放到標記中。非常感謝 –

由於geocodezip評論，我現在幾乎可以工作。我已經更新了原始代碼，現在它變大了，但它並沒有正確刷新地圖。即在某些縮放級別上，它是空白的地圖，任何想法如何在每個縮放級別強制刷新地圖？謝謝 –

我面臨同樣的問題。我不確定縮放選項是否正常工作，但肯定不會在視覺上令人耳目一新。我看不到它變得放大。但它工作的HTML版本http://www.geocodezip.com/GMapsExampleV3b.html –

谷歌地圖API v3 - 放大後如何

回答

相關問題