Javascript和google maps api版本3通过用户输入更改MapeTypeId

我一直在试验谷歌地图API第3版。我在动态更改google MapTypeid时遇到问题，用户可以通过选择框更改地图类型。我希望代码不臃肿，并将选择框的值传递给GoogleMaps，地图样式的变化反映在显示该地图的HTML DIV中

出于测试目的，我构造了4个

if

语句，对HTML选择框的选定索引值进行测试，然后根据该选择显示一个映射。如果我继续使用其他选择框来更改其他地图上的地图视图，我的代码将变得非常长、臃肿和像意大利面条一样

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

而不是说

 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 

数组索引的范围检查等等，为了简洁/清晰/惰性/等等而忽略。至少要确保

parseInt（）

返回的值大于或等于零，小于

myMapTypes.length

---

对数组索引进行范围检查，等等，为了简洁/清晰/惰性/等等而忽略。至少要确保

parseInt（）

返回的值大于或等于零，小于

myMapTypes.length

非常感谢您明显正确的答案，非常感谢。我知道答案必须很简单——再次感谢你给了我一段清晰简洁的代码。现在，我可以使用您在其他地方给我的内容，消除重复所有if语句，这使得我的代码试用版成为一个mish mashi刚刚投入到我的实验项目中的代码，当所有if语句都消失时，它第一次起作用。我在评论中对你给予了赞扬，如果我的项目能够在互联网上发布，将会有一个链接链接到你的javascript答案。非常感谢你明显正确的答案，非常感谢。我知道答案必须很简单——再次感谢你给了我一段清晰简洁的代码。现在，我可以使用您在其他地方给我的内容，消除重复所有if语句，这使得我的代码试用版成为一个mish mashi刚刚投入到我的实验项目中的代码，当所有if语句都消失时，它第一次起作用。我在评论中赞扬了你，如果我的项目能够在互联网上发布，将会有一个链接链接链接到你的javascript答案。

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