谷歌地图缩放调整初始化？

我有两个问题与下面的代码，我会分开发布。我希望这个论坛的代码缩小到合理的大小。这里的问题是，当我第一次访问页面（或重新加载页面）并单击go按钮时，映射将初始化，如果过高，则最后使用setZoom（）调整缩放。当我再次点击go按钮时，不再发生这种调整。我试着添加一个不同的事件监听器，然后删除/清除它，但似乎并不工作。我怎么设置它，因为我不想一直刷新页面？该地图最终将由选择菜单驱动。谷歌地图缩放调整初始化？

在此先感谢。

<html> 
<head> 
<title>Untitled Document</title> 
<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 
<script type="text/javascript"> 
var lat = -31.953; 
var lon = 115.853; 
var address = "200 St George's Terrace, Perth, WA, 6000"; 

function initialize() { 

    var bounds = new google.maps.LatLngBounds(); 

    var geocoder = new google.maps.Geocoder(); 
    geocoder.geocode({'address': address}, function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
      if (results[0]) { 
       var addrLatLon = results[0].geometry.location; 

       var mapOptions = { 
        center: addrLatLon, 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
       }; 
       var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

       bounds.extend(addrLatLon); 
       var addrMarker = new google.maps.Marker({ 
        position: addrLatLon, 
        map: map, 
        title: 'Address Location', 
        draggable: true 
       }); 

       if (lat != 0 && lon != 0) { 
        var LatLon = new google.maps.LatLng(lat, lon); 
        bounds.extend(LatLon); 
        var latlonMarker = new google.maps.Marker({ 
         position: LatLon, 
         map: map, 
         title: 'Lat/Lon Location' 
        }); 
       } 

       map.fitBounds(bounds); 

       // Place control div 
       var control = document.getElementById('map-control'); 
       control.style.display = 'block'; 
       map.controls[google.maps.ControlPosition.TOP_CENTER].push(control); 

       // Update current position info. 
       updateMarkerPosition(addrLatLon); 

       // Add dragging event listener. 
       google.maps.event.addListener(addrMarker, 'drag', function() { 
        updateMarkerPosition(addrMarker.getPosition()); 
       }); 

       // Check zoom and set accordingly 
       google.maps.event.addListenerOnce(map, 'zoom_changed', function() { 
        if (map.getZoom() > 16) map.setZoom(16); 
       }); 

      } else { 
       alert('No result found for address.'); 
      } 
     } else { 
      alert('Geocoder failed: ' + status); 
     } 
    }); 
} 

function updateMarkerPosition(p) { 
    document.getElementById('map-control').innerHTML = [ 
     p.lat(), 
     p.lng() 
    ].join(', '); 
} 

$(document).ready(function(){ 
    $("#mapchk").click(function() { 
     initialize(); 
    }); 
}); 
</script> 
</head> 
<body> 
<div id="map-control" style="border:thin solid #000;"></div> 
<div id="map-canvas" style="position:absolute;top:80px;left:30px;height:500px;width:600px;border:thin solid #000;"></div> 
<input type="submit" name="mapchk" id="mapchk" value="Go" /> 
</body> 
</html>

来源

2013-10-08 Mick

您每次点击'go'按钮时都会重绘地图。这就是为什么'zoom_changed'事件永远不会被调用。 – Salman

你的代码有很多错误。第一个问题是，您每次点击go时都会生成地图。因此，在单独的函数中初始化所有您需要的东西，然后仅在单击按钮时运行所需的代码。

#map-control { position: absolute; z-index: 2; width: 400px; height: 20px; text-align: center; background-color: white;} 

var lat = -31.953; 
var lon = 115.853; 
var address = "200 St George's Terrace, Perth, WA, 6000"; 
var bounds, map, geocoder, control; 

function init() { 
    var mapOptions = { center: new google.maps.LatLng(lat, lon), mapTypeId: google.maps.MapTypeId.ROADMAP }; 
    map = new google.maps.Map($('#map-canvas')[0], mapOptions); 
    control = $('#map-control').css({ 
     left: $('#map-canvas').position().left, 
     width: $('#map-canvas').outerWidth(), 
     top: $('#map-canvas').position().top + $('#map-canvas').outerHeight() - 24, 
    }); 
    bounds = new google.maps.LatLngBounds(); 
    geocoder = new google.maps.Geocoder(); 
}

这就是init所做的。但请注意其他一些事情。我用定位的div来保存经纬度坐标，而不是控制。控件的问题只要将它添加到地图中，它就会从DOM中移除。这就是为什么第二次尝试运行updateMarkerPosition时出现错误：控制根本不存在。

function run() { 
    geocoder.geocode({'address': address}, function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
      if (results[0]) { 
      var latLngList = []; 
       var addrLatLon = results[0].geometry.location; 
       latLngList.push(addrLatLon); 
       var addrMarker = new google.maps.Marker({ 
        position: addrLatLon, 
        map: map, 
        title: 'Address Location', 
        draggable: true 
       }); 
       if (lat != 0 && lon != 0) { 
        var LatLon = new google.maps.LatLng(lat, lon); 
        var latlonMarker = new google.maps.Marker({ 
         position: LatLon, 
         map: map, 
         title: 'Lat/Lon Location' 
        }); 
        latLngList.push(LatLon); 
       } 
       for (i = 0, l = latLngList.length; i < l; i++) { 
        bounds.extend(latLngList[i]); 
       } 
       map.fitBounds(bounds); 
       updateMarkerPosition(addrLatLon); 
       google.maps.event.addListener(addrMarker, 'drag', function() { 
        updateMarkerPosition(addrMarker.getPosition()); 
       }); 
       if (map.getZoom() > 16) map.setZoom(16); 
      } else { 
       alert('No result found for address.'); 
      } 
     } else { 
      alert('Geocoder failed: ' + status); 
     } 
    }); 
}

也有与bounds一个问题，我已经修正了这个很可能造成一些问题，我已删除了被称为当变焦水平的变化，因为我不能工作了你是什么样的情况下试图在那里做。

function updateMarkerPosition(p) { 
    $('#map-control').html([ 
     p.lat(), 
     p.lng() 
    ].join(', ')); 
} 

$(document).ready(function(){ 
    $("#mapchk").click(function() { 
     init(); 
     run(); 
    }); 
});

希望这会做你想做的。

来源

2013-10-08 14:50:00 Andy

优秀。我将init（）和run（）函数分成两个不同的按钮，并添加不同的坐标和地址以查看会发生什么。这有助于我的理解显着。是否使界限，地图，地理编码器和控制全局变量对于这项工作至关重要？我猜是这样。 – Mick

谷歌地图缩放调整初始化？

回答

相关问题