[英]dynamically changing google maps javascript api with variables
[英]Javascript and google maps api version 3 changing the MapeTypeId via user input
我一直在尝试使用谷歌地图 API 版本 3。我在动态更改谷歌 MapTypeid 时遇到问题,以便用户可以通过 Z99938282F04071859941E18F16EFCF4 框更改 map 类型 I want code that's not bloated and passes the value of a select box to google maps and a change of map style is reflected in the HTML DIV showing that map.
出于测试目的,我构建了 4 个if
语句来测试 HTML select 框的选定索引值,然后根据该选择显示 map。 如果我继续这样使用其他 select 框来更改其他地图上的 map 视图,我的代码将变得非常长、臃肿且像意大利面条一样。
// here is what i have done so far/
JAVASCRIPT
// display current flight info
document.getElementById("currentplot").innerHTML='Chase Vehicle at '+'<p>'+ lattitude.toFixed(6)+' : '+ longitude.toFixed(6)+' </p>';
document.getElementById("copilot").innerHTML=' Camera Zoom : '+ userzoom;
document.getElementById("cockpitstatus").innerHTML='Altitude : '+'<p>'+ altitude +' miles'+' </p>';
// this was debugging printout code using document.write but now it works
// i have kept it and used it in little flight info divs etc
};
function changemapview(){
var newmap=document.maptype.mapstyle.options[document.maptype.mapstyle.selectedIndex].value;
// newmap does contain ROADMAP TERRAIN ETC it's tested and been writtten out to the screen
// now lets get newmap into google
//BUG TO FIX need to find a way of getting newmap into MapTypeId.TERRAIN ETC
// SO WE CAN REMOVE THE IF STATEMENTS AND REPLACE WITH ONE LINE OF CODE OR MUCH SHORTER CODE
if(userzoom<=0){userzoom=1}
if(userzoom>=20){userzoom=20}
var latlng = new google.maps.LatLng(lattitude, longitude);// THESE ARE MY GLOBAL LATS AND LONG
if(document.maptype.mapstyle.selectedIndex==0){
var myOptions = {
zoom: userzoom,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
}
if(document.maptype.mapstyle.selectedIndex==1){
var myOptions = {
zoom: userzoom,
center: latlng,
mapTypeId: google.maps.MapTypeId.TERRAIN,
};
}
if(document.maptype.mapstyle.selectedIndex==2){
var myOptions = {
zoom: userzoom,
center: latlng,
mapTypeId: google.maps.MapTypeId.SATELLITE,
};
}
if(document.maptype.mapstyle.selectedIndex==3){
var myOptions = {
zoom: userzoom,
center: latlng,
mapTypeId: google.maps.MapTypeId.HYBRID,
};
}
// TRY TO FIND A WAY OF DOING THIS WITHOUT IF STATEMENTS
var map = new google.maps.Map(document.getElementById("copilotsmap"),
myOptions);
var marker = new google.maps.Marker({
position: latlng,
title:"copilot this is your last synchronised flight positon"});
marker.setMap(map);
// end of google sample code
// this function changes the copilots map style
}
<!-- above are functions to dispaly a google maps from google sample code but we are-->
<!-- using variables and click behaviour NOT Magic numbers to display markers etc on flight path-->
function checkbutton(){
// it will be checked anyway if it has come here
if(document.mapchange.updatemap.checked)
{ document.mapchange.updatemap.checked=false;
changemapview();
}
}
HTML
<!-- in the middle is a flight panel -->
<div id="flightpanel"> <p> Flight Panel </p> </div>
<!-- a div to put cockpit readouts etc into-->
<div id="cockpitview"> <p> Cockpit View </p>
</div>
<!-- an empty div for displaying the output of our map data at current zoom and lattitude / longitude -->
<div id="currentzoom" >
</div>
<!-- a div in the middle for engine controls-->
<div id="enginepanel"> <p> Engine Panel </p></div>
<!-- another empty div for the co pilots map-->
<div id="copilotsmap"> </div>
<!-- dashboard is on coplilots side -->
<div id="dashboard">
<form id="maptype" name="maptype">
<label>Change Map Style
<select name="mapstyle" id="mapstyle" onchange="changemapview();">
<option>ROADMAP</option>
<option>TERRAIN</option>
<option>SATELLITE</option>
<option>HYBRID</option>
</select>
</label> Co-Pilots Dashboard
</form>
<!-- below here are more select boxes etc that all work unrelated to the question
</div>
如果可能的话,我如何摆脱所有我想做这样的事情的 if 语句
var myOptions = {
zoom: userzoom,
center: latlng,
// mapTypeId: google.maps.MapTypeId.ROADMAP,
};
而不是说
mapTypeId: google.maps.MapTypeId.ROADMAP,
我想说
mapTypeId: google.maps.MapTypeId.(whatever is in a variable or function)
我试过这种方法没有运气
myOptions.mapTypeId:='google.maps.MapTypeId'+newmap,'
// and various similar combinations
var myMapTypes = new Array('ROADMAP','TERRAIN','SATELLITE','HYBRID');
var newMap = myMapTypes[parseInt(document.maptype.mapstyle.selectedIndex)];
var myOptions = {
zoom: userzoom,
center: latlng,
mapTypeId: google.maps.MapTypeId[newMap]
};
为简洁/清晰/懒惰/等原因,对数组索引等进行范围检查。 至少确保parseInt()
返回大于或等于零且小于myMapTypes.length
的值可能是个好主意。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.