將滾動地理編碼地圖放大滾動

Question

我正在查看兩個不同的地理編碼示例，我發現我正在尋找兩種功能中的最佳選項。我沒有太多的地理編碼經驗，我發現谷歌文​​檔很難遵循

這一個做我想要的一切，除了在用戶使用鼠標滾輪時滾動。 http://jsfiddle.net/Ep7Rr/

我想這個，如果我可以讓標記移動，因爲用戶像第一個拖動地圖。 http://jsfiddle.net/AjeTc/

我知道有很多不同的方法，如new GMap2和new google.maps.Geocoder

的第一個作品，此代碼

<script> 
function load() { 
    if (GBrowserIsCompatible()){ 
    var map = new GMap2(document.getElementById("map")); 
    map.addControl(new GSmallMapControl()); 
    map.addControl(new GMapTypeControl()); 
    var center = new GLatLng(54.18173, -6.35284); 
    map.setCenter(center, 15); 
    geocoder = new GClientGeocoder(); 
    var marker = new GMarker(center, {draggable: true}); 
    map.addOverlay(marker); 
    document.getElementById("lat").innerHTML = center.lat().toFixed(5); 
    document.getElementById("lng").innerHTML = center.lng().toFixed(5); 

    GEvent.addListener(marker, "dragend", function(){ 
     var point = marker.getPoint(); 
     map.panTo(point); 
     document.getElementById("lat").innerHTML = point.lat().toFixed(5); 
     document.getElementById("lng").innerHTML = point.lng().toFixed(5); 
    }); /*END GEvent.addListener(marker, "dragend", function(){*/ 

    GEvent.addListener(map, "moveend", function() { 
     map.clearOverlays(); 
     var center = map.getCenter(); 
     var marker = new GMarker(center, {draggable: true}); 
     map.addOverlay(marker); 
     document.getElementById("lat").innerHTML = center.lat().toFixed(5); 
     document.getElementById("lng").innerHTML = center.lng().toFixed(5); 

     GEvent.addListener(marker, "dragend", function() { 
     var point =marker.getPoint(); 
     map.panTo(point); 
     document.getElementById("lat").innerHTML = point.lat().toFixed(5); 
     document.getElementById("lng").innerHTML = point.lng().toFixed(5); 
     }); /*END GEvent.addListener(marker, "dragend", function() {*/ 
    }); /*END GEvent.addListener(map, "moveend", function() {*/ 
    } /*END if (GBrowserIsCompatible()){*/ 
} /*END function load*/ 

第二個使用該

<script type="text/javascript"> 
function showAddress() { 
    var map = new GMap2(document.getElementById("map")); 
    var address = document.getElementById('fullAddress').value; 


    return false; 
} /*END function showAddress*/ 

var geocoder = new google.maps.Geocoder(); 

function geocodePosition(pos) { 
    geocoder.geocode({ 
    latLng: pos 
    }, function(responses) { 
    if (responses && responses.length > 0) { 
     updateMarkerAddress(responses[0].formatted_address); 
    } else { 
     updateMarkerAddress('Cannot determine address at this location.'); 
    } 
    }); 
} 

function updateMarkerStatus(str) { 
    document.getElementById('markerStatus').innerHTML = str; 
} 

function updateMarkerPosition(latLng) { 
    document.getElementById('info').innerHTML = [ 
    latLng.lat(), 
    latLng.lng() 
    ].join(', '); 
} 

function updateMarkerAddress(str) { 
    document.getElementById('address').innerHTML = str; 
} 

function initialize() { 
    var latLng = new google.maps.LatLng(54.18173, -6.35284); 
    var map = new google.maps.Map(document.getElementById('mapCanvas'), { 
    zoom: 8, 
    center: latLng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 
    var marker = new google.maps.Marker({ 
    position: latLng, 
    title: 'Point A', 
    map: map, 
    draggable: true 
    }); 

    // Update current position info. 
    updateMarkerPosition(latLng); 
    geocodePosition(latLng); 

    // Add dragging event listeners. 
    google.maps.event.addListener(marker, 'dragstart', function() { 
    updateMarkerAddress('Dragging...'); 
    }); 

    google.maps.event.addListener(marker, 'drag', function() { 
    updateMarkerStatus('Dragging...'); 
    updateMarkerPosition(marker.getPosition()); 
    }); 

    google.maps.event.addListener(marker, 'dragend', function() { 
    updateMarkerStatus('Drag ended'); 
    geocodePosition(marker.getPosition()); 
    }); 
} 

// Onload handler to fire off the app. 
google.maps.event.addDomListener(window, 'load', initialize); 
</script> 

Answer 1

趕上事件時地圖被拖動。 http://jsfiddle.net/ZYV9N/