Javascript 谷歌地图控制面板消失?
我对下面的代码有两个问题,我将分别发布它们。我已经把这个论坛的代码缩减到一个合理的大小。这里的问题是,当我第一次转到页面(或重新加载页面)并单击go按钮时,地图将初始化,控制面板显示在顶部中间。当我再次单击go按钮时,控制面板消失。为什么?它需要保留,因为我有一个包含地址和纬度/纬度的选择菜单,这将最终驱动这个地图,我不想一直刷新页面 提前谢谢Javascript 谷歌地图控制面板消失?,javascript,google-maps,maps,Javascript,Google Maps,Maps,我对下面的代码有两个问题,我将分别发布它们。我已经把这个论坛的代码缩减到一个合理的大小。这里的问题是,当我第一次转到页面(或重新加载页面)并单击go按钮时,地图将初始化,控制面板显示在顶部中间。当我再次单击go按钮时,控制面板消失。为什么?它需要保留,因为我有一个包含地址和纬度/纬度的选择菜单,这将最终驱动这个地图,我不想一直刷新页面 提前谢谢 <html> <head> <title>Untitled Document</title> <s
<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”时,地图控件元素将从其原始位置移动并附加到地图画布元素中。
下次单击“go”时,地图将重新绘制。因此#映射控件不再位于dom中。所以你的map.controls.push没有任何作用
您可以尝试克隆#map control元素,然后将其推入map.controls