Javascript 谷歌地图缩放调整在初始化？_Javascript_Google Maps_Maps

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

javascript google-maps maps

Javascript 谷歌地图缩放调整在初始化？,javascript,google-maps,maps,Javascript,Google Maps,Maps,我对下面的代码有两个问题，我将分别发布它们。我已经把这个论坛的代码缩减到一个合理的大小。这里的问题是，当我第一次转到页面（或重新加载页面）并单击go按钮时，贴图将初始化，如果缩放太高，则在最后使用setZoom（）调整缩放。当我再次单击go按钮时，此调整不再发生。我尝试添加一个不同的事件侦听器，然后删除/清除它，但这似乎也不起作用。我不想一直刷新页面，如何设置？此地图最终将由选择菜单驱动提前谢谢 <html> <head> <title>Untitled D

我对下面的代码有两个问题，我将分别发布它们。我已经把这个论坛的代码缩减到一个合理的大小。这里的问题是，当我第一次转到页面（或重新加载页面）并单击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>


无标题文件
var lat=-31.953；
var-lon=115.853；
var address=“华盛顿州珀斯市圣乔治台200号，邮编：6000”；
函数初始化（）{
var bounds=new google.maps.LatLngBounds（）；
var geocoder=new google.maps.geocoder（）；
geocoder.geocode（{'address'：address}，函数（结果，状态）{
if（status==google.maps.GeocoderStatus.OK）{
如果（结果[0]）{
var addrLatLon=results[0]。geometry.location；
变量映射选项={
中心：Addrlaton，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（'map-canvas'），mapOptions）；
扩展（addrLatLon）；
var addrMarker=new google.maps.Marker({
职位：Addrlaton，
地图：地图，
标题：“地址位置”，
德拉格布尔：是的
});
如果（纬度=0&&lon！=0）{
var LatLon=新的google.maps.LatLng（lat，lon）；
扩展（拉特隆）；
var latlonMarker=new google.maps.Marker({
职位：拉特隆，
地图：地图，
标题：“横向/纵向位置”
});
}
映射边界（bounds）；
//地方管制组
var-control=document.getElementById（'map-control'）；
control.style.display='block'；
map.controls[google.maps.ControlPosition.TOP\u CENTER].push（控件）；
//更新当前职位信息。
更新标记位置（addrLatLon）；
//添加拖动事件侦听器。
google.maps.event.addListener（addrMarker，'drag'，function（）{
updateMarkerPosition（addrMarker.getPosition（））；
});
//检查缩放并进行相应设置
google.maps.event.addListenerOnce（map'zoom_changed'，function（）{
if（map.getZoom（）>16）map.setZoom（16）；
});
}否则{
警报（“未找到地址的结果”）；
}
}否则{
警报（“地理编码器失败：”+状态）；
}
});
}
函数更新标记位置（p）{
document.getElementById（'map-control'）。innerHTML=[
p、 lat（），
p、 液化天然气（）
]。加入（‘，’）；
}
$（文档）.ready（函数（）{
$（“#mapchk”）。单击（函数（）{
初始化（）；
});
});

您的代码有很多错误。第一个问题是每次单击

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);
        }
    });
}

希望这能满足您的需要。

您每次单击

go

按钮都会重新绘制地图。这就是为什么从未调用

zoom\u changed

事件的原因。非常好。我将init（）和run（）函数拆分到两个不同的按钮上，并尝试添加不同的坐标和地址，以查看会发生什么。这大大帮助了我的理解。制作边界、地图、地理编码器和控制全局变量是否对这项工作至关重要？我猜是的。

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

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