Google maps api 3 地图在覆盖打开/关闭时重新定位和缩放
我有一张有重叠图像的地图。。。一切都很好，但每当我打开/关闭其中一个覆盖时，整个地图都会重新绘制（重新定位地图并更改缩放级别）。需要在代码中更改什么以保持地图位置和缩放Google maps api 3 地图在覆盖打开/关闭时重新定位和缩放,google-maps-api-3,Google Maps Api 3,我有一张有重叠图像的地图。。。一切都很好，但每当我打开/关闭其中一个覆盖时，整个地图都会重新绘制（重新定位地图并更改缩放级别）。需要在代码中更改什么以保持地图位置和缩放 <!DOCTYPE html> <html> <head> <title>GISM</title> <meta name="viewport" content="width=device-width, initial-scale=1.0
<!DOCTYPE html>
<html>
<head>
<title>GISM</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<meta charset="utf-8">
<style>
html, body, #map_canvas {
margin: 0px;
padding: 0px;
height: 100%;
}
#panel {
position: absolute;
top: 25px;
left: 85%;
margin-left: -5px;
z-index: 5;
background-color: (255,255,255);
padding: 15px;
opacity: 0.64;
border: 1px solid #999;
overflow: auto;
overflow-x: hidden;
width: 233px;
}
#latlong {
opacity: 0.64;
position: absolute;
bottom: -199px;
left: 55555 margin-left: -60px;
z-index: 5;
background-color: transparent;
padding: 5px;
//border: 1px solid #999;
overflow: auto;
overflow-x: hidden;
height: 300px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script type="text/javascript">
var layers = [];//from kmlonoff
var map = null;
var overlays = [];
var boundsArray = [];
////////////////////////////latlon marker begin//////////////////////////////////
var marker = null;
// popup window for pin, if in use
var infowindow = new google.maps.InfoWindow({
size: new google.maps.Size(150,50)
});
// A function to create the marker and set up the event window function
function createMarker(latlng, name, html) {
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
map: map,
zIndex: Math.round(latlng.lat()*-100000)<<5
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
google.maps.event.trigger(marker, 'click');
return marker;
}
//////////////////////////////latlon marker end//////////////////////////////////
///////a function to change the button color called from html code onclick= below////// from http://jsfiddle.net/ku2Ye/10/////
function colorchange(id)
{
var background = document.getElementById(id).style.backgroundColor;
if(background === "rgb(211, 211, 211)")
{
document.getElementById(id).style.backgroundColor = "rgb(26,255,0)";
}
if(background === "rgb(26, 255, 0)")
{
document.getElementById(id).style.backgroundColor = "rgb(211,211,211)";
}
}
///colorchange function end////////////////////
SchipholOverlay.prototype = new google.maps.OverlayView();
function initialize()
{
// sets the location of the initial pin (not map or redraw location, just the crosshair)
var myLatlng = new google.maps.LatLng(33.926315,168.0);//from kmlonoff
var mapProp = { //set map properties
center:new google.maps.LatLng(22.309213, 175.762316),
minZoom: 3,
zoom: 4,// sets the initial zoom before any overlays are added
mapTypeId:google.maps.MapTypeId.SATELLITE
};
//create map variable with properties
map=new google.maps.Map(document.getElementById("googleMap"), mapProp);
var image1 = 'images/sa.png'; //fromkmlonoff
var layersLatLng = new google.maps.LatLng(-41.356341319572,147.41842480153);//from kmlonoff
var swBound = new google.maps.LatLng(-50.19625231313214, -344.0500);
var neBound = new google.maps.LatLng(62.09090138143704, -136.00001614726723);
var swBound2 = new google.maps.LatLng(-9.99625231313214, -180.7500);
var neBound2 = new google.maps.LatLng(45.99090138143704, -75.56001614726723);
var swBound3 = new google.maps.LatLng(-45.0125231313214, -344.0500);
var neBound3 = new google.maps.LatLng(44.5090138143704, -66.00001614726723);
var swBound4 = new google.maps.LatLng(10.5125231313214, 114.7500);
var neBound4 = new google.maps.LatLng(34.3090138143704, 151.30001614726723);
var swBound5 = new google.maps.LatLng(1.20, 101.20);
var neBound5 = new google.maps.LatLng(42.0, 165.04);
var swBound6 = new google.maps.LatLng(-49.20, -325.20);
var neBound6 = new google.maps.LatLng(60.0, -109.8);
var swBound7 = new google.maps.LatLng(-67.0, 10.0);
var neBound7 = new google.maps.LatLng(67.0, -82.5);
var bounds = new google.maps.LatLngBounds(swBound, neBound);
var bounds2 = new google.maps.LatLngBounds(swBound2, neBound2);
var bounds3 = new google.maps.LatLngBounds(swBound3, neBound3);
var bounds4 = new google.maps.LatLngBounds(swBound4, neBound4);
var bounds5 = new google.maps.LatLngBounds(swBound5, neBound5);
var bounds6 = new google.maps.LatLngBounds(swBound6, neBound6);
var bounds7 = new google.maps.LatLngBounds(swBound7, neBound7);
boundsArray.push(bounds);
boundsArray.push(bounds2);
boundsArray.push(bounds3);
boundsArray.push(bounds4);
boundsArray.push(bounds5);
boundsArray.push(bounds6);
boundsArray.push(bounds7);
// Insert overlay image here
var srcImage = 'https://ohana.nmci.navy.mil/JTWC_ARCHIVE/2015/STREAMLINE_CHARTS/AORoverlay.png';//0
var srcImage1 = 'https://ohana.nmci.navy.mil/wx/products/${streamtimeWP}/aor/gfs/${streamtimeWP}.aor.gfs.hjd.000nm.png';//1
var srcImage2 = 'https://ohana.nmci.navy.mil/wx/products/${streamtimeWP}/aor/nvg/${streamtimeWP}.aor.nvg.hjd.000nm.png';//
var srcImage3 = 'https://ohana.nmci.navy.mil/JTWC_ARCHIVE/${YYYY}/STREAMLINE_CHARTS/SURFACE/SFC${streamtimeWP}.png';//3
var srcImage4 = 'https://ohana.nmci.navy.mil/JTWC_ARCHIVE/${YYYY}/STREAMLINE_CHARTS/SURFACE/SFCs${streamtimeWP}.png';//4
var srcImage5 = 'https://ohana.nmci.navy.mil/JTWC_ARCHIVE/${YYYY}/STREAMLINE_CHARTS/SURFACE/SFCa${streamtimeWP}.png';//5
var srcImage6 = 'https://ohana.nmci.navy.mil/JTWC_ARCHIVE/${YYYY}/STREAMLINE_CHARTS/EPAC/SURFACE/SFCs${streamtimeEP}.png';//6
var srcImage7 = 'https://ohana.nmci.navy.mil/JTWC_ARCHIVE/${YYYY}/STREAMLINE_CHARTS/EPAC/SURFACE/SFCa${streamtimeEP}.png';//7
var srcImage8 = 'https://ohana.nmci.navy.mil/JTWC_ARCHIVE/${YYYY}/STREAMLINE_CHARTS/UPPER_AIR/UA${streamtimeWP}.png';//8
var srcImage9 = 'https://ohana.nmci.navy.mil/wx/products/${streamtimeWP}/aor/gfs/${streamtimeWP}.aor.gfs.efa.000.png';//1
// var srcImage9 = 'https://ohana.nmci.navy.mil/JTWC_ARCHIVE/Models/gfs/${streamtimeWP}.aor.gfs.hjd.000nm.png';//1
var srcImage10 = 'https://ohana.nmci.navy.mil/wx/products/${streamtimeWP}/aor/nvg/${streamtimeWP}.aor.nvg.efa.000.png';//2
var srcImage11 = 'https://ohana.nmci.navy.mil/JTWC_ARCHIVE/${YYYY}/STREAMLINE_CHARTS/UPPER_AIR/UAs${streamtimeWP}.png';//9
var srcImage12 = 'https://ohana.nmci.navy.mil/JTWC_ARCHIVE/${YYYY}/STREAMLINE_CHARTS/UPPER_AIR/UAa${streamtimeWP}.png';//10
var srcImage13 = 'https://ohana.nmci.navy.mil/JTWC_ARCHIVE/${YYYY}/STREAMLINE_CHARTS/EPAC/UPPER_AIR/UAs${streamtimeEP}.png';//11
var srcImage14 = 'https://ohana.nmci.navy.mil/JTWC_ARCHIVE/${YYYY}/STREAMLINE_CHARTS/EPAC/UPPER_AIR/UAa${streamtimeEP}.png';//12
var srcImage15 = 'http://rammb.cira.colostate.edu/ramsdis/online/images/latest/himawari-8/tropics_band_03.gif';//13
var srcImage16 = 'http://rammb.cira.colostate.edu/ramsdis/online/images/latest/himawari-8/himawari-8_band_13_sector_06.gif';//14
//this determines the draw order//
overlays.push(new SchipholOverlay(bounds, srcImage, map));
overlays.push(new SchipholOverlay(bounds7, srcImage1, map));
overlays.push(new SchipholOverlay(bounds7, srcImage2, map));
overlays.push(new SchipholOverlay(bounds, srcImage3, map));
overlays.push(new SchipholOverlay(bounds, srcImage4, map));
overlays.push(new SchipholOverlay(bounds, srcImage5, map));
overlays.push(new SchipholOverlay(bounds2, srcImage6, map));
overlays.push(new SchipholOverlay(bounds2, srcImage7, map));
overlays.push(new SchipholOverlay(bounds, srcImage8, map));
overlays.push(new SchipholOverlay(bounds7, srcImage9, map));
overlays.push(new SchipholOverlay(bounds7, srcImage10, map));
overlays.push(new SchipholOverlay(bounds, srcImage11, map));
overlays.push(new SchipholOverlay(bounds, srcImage12, map));
overlays.push(new SchipholOverlay(bounds2, srcImage13, map));
overlays.push(new SchipholOverlay(bounds2, srcImage14, map));
overlays.push(new SchipholOverlay(bounds5, srcImage15, map));
overlays.push(new SchipholOverlay(bounds5, srcImage14, map));
// layers[1] = new google.maps.KmlLayer('http://kml-samples.googlecode.com/svn/trunk/kml/Region/GroundOverlay/usa-ca-sf.kml', {preserveViewport:true});
layers[1] = new google.maps.KmlLayer(' file:///C:/Users/james.darlow/Documents/NetBeansProjects/GISM/public_html/MTSAT_ir.kml', {preserveViewport:true});
layers[1].setMap(map);
layers[2] = new google.maps.KmlLayer('http://www.usno.navy.mil/NOOC/nmfc-ph/RSS/jtwc/warnings/wp2015.kmz', {preserveViewport:true});
layers[2].setMap(map);
// layers[3] = new google.maps.KmlLayer('https://www.nrlmry.navy.mil/tcdat/tc16/SHEM/08S.CORENTIN/kml/2016_SHEM_08S.main.kml', {preserveViewport:true});
// layers[3].setMap(map);
layers[4] = new google.maps.KmlLayer('https://ohana.nmci.navy.mil/sat/MTSAT_ir.kmz', {preserveViewport:true});
//layers[4] = new google.maps.KmlLayer('https://ohana.nmci.navy.mil/sat/MTSAT_ir.kmz', {preserveViewport:true});
layers[4].setMap(map);
bounds.extend(layersLatLng);
///// start kml TDO /////
var TDOKMZLayer = new google.maps.KmlLayer({
url: 'https://10.32.63.99/mediawiki-1.5.4/JTWC/Figures/StormData/JTWC_GOOGLE_EARTH.kmz',
suppressInfoWindows: true,
map: map
});
/////// start kml NRL TC /////
var WstormsLayer = new google.maps.KmlLayer({
url: 'http://www.nrlmry.navy.mil/tcdat/tc15/IO/93A.INVEST/kml/2015_IO_91A.main.kml',
suppressInfoWindows: true,
map: map
});
////// start latlon pin////////////
// establish the initial marker/pin
// var image = 'crosshair2.png';
// marker = new google.maps.Marker({
// position: myLatlng,
// map: map,
// title:"Property Loca",
//the below code is meant to adjust marker positions from https://developers.google.com/maps/documentation/javascript/examples/icon-complex
// This marker is 20 pixels wide by 32 pixels tall.
// size: new google.maps.Size(50, 50),
// The origin for this image is 0,0.
// origin: new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 0,32.
// anchor: new google.maps.Point(25, 25),
// icon: image
// });
// establish the initial div form fields
formlat = document.getElementById("latbox").value = myLatlng.lat();
formlng = document.getElementById("lngbox").value = myLatlng.lng();
// close popup window
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
// removing old markers/pins
google.maps.event.addListener(map, 'click', function(event) {
//call function to create marker
if (marker) {
marker.setMap(null);
marker = null;
}
// Information for popup window if you so chose to have one
/*
marker = createMarker(event.latLng, "name", "<b>Location</b><br>"+event.latLng);
*/
//var image = 'crosshair2.png';
var image = {
url: 'crosshair2.png',
size: new google.maps.Size(50, 50),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(25, 25)
};
// var myLatLng = event.latLng ;
/*
var marker = new google.maps.Marker({
by removing the 'var' subsquent pin placement removes the old pin icon
*/
marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
draggable:true,
title:"drag me",
zIndex: 9
});
/*
marker = new google.maps.Marker({
position: myLatLng,
center: myLatlng,
map: map,
icon: image,
title:"Property Loco",
size: new google.maps.Size(50, 50),
origin: new google.maps.Point(25, 25),
anchor: new google.maps.Point(25, 25)
});
*/
// populate the form fields with lat & lng
formlat = document.getElementById("latbox").value = event.latLng.lat();
formlng = document.getElementById("lngbox").value = event.latLng.lng();
});
}
/////end lat long marker/////////////////////////////////////////////
/////////////begin of kmlonoff function/////////////////
function toggleLayer(i) {
if(layers[i].getMap() === null) {
layers[i].setMap(map);
} else {
layers[i].setMap(null);
}
}
////end of kmlonoff function////////////////////
function SchipholOverlay(bounds, image, map) {
// Now initialize all properties.
this.bounds_ = bounds;
this.image_ = image;
this.map_ = map;
// We define a property to hold the image's
// div. We'll actually create this div
// upon receipt of the add() method so we'll
// leave it null for now.
this.div_ = null;
// Explicitly call setMap() on this overlay
this.setMap(map);
}
SchipholOverlay.prototype.onAdd = function() {
// Note: an overlay's receipt of onAdd() indicates that
// the map's panes are now available for attaching
// the overlay to the map via the DOM.
// Create the DIV and set some basic attributes.
var div = document.createElement('div');
div.style.borderStyle = 'none';
div.style.borderWidth = '0px';
div.style.position = 'absolute';
div.style.visibility = 'hidden';// al aded this to hide the charts onload
// Create an IMG element and attach it to the DIV.
var img = document.createElement('img');
img.src = this.image_;
img.style.width = '100%';
img.style.height = '100%';
// img.style.position = 'absolute';
div.appendChild(img);
// Set the overlay's div_ property to this DIV
this.div_ = div;
// We add an overlay to a map via one of the map's panes.
// We'll add this overlay to the overlayLayer pane.
var panes = this.getPanes();
panes.overlayLayer.appendChild(div);
}
SchipholOverlay.prototype.draw = function() {
// Size and position the overlay. We use a southwest and northeast
// position of the overlay to peg it to the correct position and size.
// We need to retrieve the projection from this overlay to do this.
var overlayProjection = this.getProjection();
// Retrieve the southwest and northeast coordinates of this overlay
// in latlngs and convert them to pixels coordinates.
// We'll use these coordinates to resize the DIV.
var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
// Resize the image's DIV to fit the indicated dimensions.
var div = this.div_;
div.style.left = sw.x + 'px';
div.style.top = ne.y + 'px';
div.style.width = (ne.x - sw.x) + 'px';
div.style.height = (sw.y - ne.y) + 'px';
};
SchipholOverlay.prototype.onRemove = function() {
this.div_.parentNode.removeChild(this.div_);
//this.div_ = null;
};
SchipholOverlay.prototype.hide = function() {
if (this.div_) {
this.div_.style.visibility = "hidden";
}
};
SchipholOverlay.prototype.show = function() {
if (this.div_) {
this.div_.style.visibility = "visible";
}
};
SchipholOverlay.prototype.toggle = function() {
if (this.div_) {
if (this.div_.style.visibility === 'hidden') {
this.show();
} else {
this.hide();
}
}
}
//initialize the map
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id ="panel">
<IMG SRC="technodev3.png" ALT="some text" WIDTH=60 HEIGHT=60>
<h1>GISM</h1>
<h3>Low Levels</h3>
<input type="button" value="Overlay" id="Overlay" onclick="colorchange('Overlay');map.fitBounds(boundsArray[0]);overlays[0].toggle();" style="background:rgb(211,211,211);"/><br>
<input type="button" value="SFC GFS" id="SFC GFS" onclick="colorchange('SFC GFS');map.fitBounds(boundsArray[0]);overlays[1].toggle();" style="background:rgb(211,211,211);"/><br>
<input type="button" value="SFC NVG" id="SFC NVG" onclick="colorchange('SFC NVG');map.fitBounds(boundsArray[0]);overlays[2].toggle();" style="background:rgb(211,211,211);"/><br>
<input type="button" value="Chart" id="Chart" onclick="colorchange('Chart');map.fitBounds(boundsArray[0]);overlays[3].toggle();" style="background:rgb(211,211,211);"/><br>
<input type="button" value="Streamline" id="Streamline" onclick="colorchange('Streamline');map.fitBounds(boundsArray[0]);overlays[4].toggle();" style="background:rgb(211,211,211);"/><br>
<input type="button" value="Analysis" id="Analysis" onclick="colorchange('Analysis');map.fitBounds(boundsArray[0]);overlays[5].toggle();" style="background:rgb(211,211,211);"/><br>
<input type="button" value="EPAC Streamline" id="EPAC Streamline" onclick="colorchange('EPAC Streamline');map.fitBounds(boundsArray[0]);overlays[6].toggle();" style="background:rgb(211,211,211);"/><br>
<input type="button" value="EPAC Analysis" id="EPAC Analysis" onclick="colorchange('EPAC Analysis');map.fitBounds(boundsArray[7]);overlays[5].toggle();" style="background:rgb(211,211,211);"/><br>
<h3>Upper Levels</h3>
<input type="button" value="Chart" id="ULChart" onclick="colorchange('ULChart');map.fitBounds(boundsArray[0]);overlays[8].toggle();" style="background:rgb(211,211,211);"/><br>
<input type="button" value="UA GFS" id="UA GFS" onclick="colorchange('UA GFS');map.fitBounds(boundsArray[0]);overlays[9].toggle();" style="background:rgb(211,211,211);"/><br>
<input type="button" value="UA NVG" id="UA NVG" onclick="colorchange('UA NVG');map.fitBounds(boundsArray[0]);overlays[10].toggle();" style="background:rgb(211,211,211);"/><br>
<input type="button" value="Streamline" id="ULStreamline" onclick="colorchange('ULStreamline');map.fitBounds(boundsArray[0]);overlays[11].toggle();" style="background:rgb(211,211,211);"/><br>
<input type="button" value="Analysis" id="ULAnalysis" onclick="colorchange('ULAnalysis');map.fitBounds(boundsArray[0]);overlays[12].toggle();" style="background:rgb(211,211,211);"/><br>
<input type="button" value="EPAC Streamline" id="EPAC ULStreamline" onclick="colorchange('EPAC ULStreamline');map.fitBounds(boundsArray[0]);overlays[13].toggle();" style="background:rgb(211,211,211);"/><br>
<input type="button" value="EPAC Analysis" id="EPAC ULAnalysis" onclick="colorchange('EPAC ULAnalysis');map.fitBounds(boundsArray[0]);overlays[14].toggle();" style="background:rgb(211,211,211);"/><br>
<input type="button" value="Himawari VIS" id="Himawari VIS" onclick="colorchange('Himawari VIS');map.fitBounds(boundsArray[0]);overlays[15].toggle();" style="background:rgb(211,211,211);"/><br>
<input type="button" value="Himawari Band 13" id="Himawari Band 13" onclick="colorchange('Himawari Band 13');map.fitBounds(boundsArray[0]);overlays[16].toggle();" style="background:rgb(211,211,211);"/><br>
</div>
<div class="map" id="googleMap" style="width:100%;height:100%;"></div>
<div id="latlong">
<p>Latitude: <input size="5" type="text" id="latbox" name="lat" ></p>
<p>Longitude: <input size="5" type="text" id="lngbox" name="lng" ></p>
</div>
</body>
</html>
GISM
html，正文，#地图#画布{
边际：0px；
填充：0px；
身高：100%；
}
#面板{
位置：绝对位置；
顶部：25px；
左：85%；
左边距：-5px；
z指数：5；
背景色：（255255）；
填充：15px；
不透明度：0.64；
边框：1px实心#999；
溢出：自动；
溢出x：隐藏；
宽度：233px；
}
#拉特朗{
不透明度：0.64；
位置：绝对位置；
底部：-199px；
左：55555页边距左：-60px；
z指数：5；
背景色：透明；
填充物：5px；
//边框：1px实心#999；
溢出：自动；
溢出x：隐藏；
高度：300px；
}
var层=[]//来自kmlonoff
var-map=null；
var覆盖=[]；
var boundsArray=[]；
////////////////////////////拉特隆标记开始//////////////////////////////////
var-marker=null；
//pin的弹出窗口（如果正在使用）
var infowindow=new google.maps.infowindow（{
尺寸：新谷歌地图尺寸（150,50）
});
//创建标记和设置事件窗口功能的函数
函数createMarker（latlng、name、html）{
var contentString=html；
var marker=new google.maps.marker({
位置：latlng，
地图：地图，
zIndex:Math.round（latlng.lat（）*-100000）您需要删除在单击按钮时导致贴图重新居中并缩放的代码。（即map.fitBounds（boundsArray[0]）；您需要删除在单击按钮时导致贴图重新居中并缩放的代码。（即map.fitBounds（boundsArray[0]）；
）就这样！非常感谢geocodezip。