Javascript 和谷歌地图 API 版本 3 通过用户输入更改 MapeTypeId

Question

我一直在尝试使用谷歌地图 API 第 3 版。我在动态更改 google MapTypeid 以便用户可以通过选择框更改 map 类型时遇到问题。我想要的代码不臃肿，并将选择框的值传递给谷歌地图，并且 map 样式的更改反射(reflect)在显示该 map 的 HTML DIV 中。

出于测试目的，我构建了 4 个 if 语句来测试 HTML 选择框的选定索引值，然后根据该选择显示 map 。如果我继续像这样使用其他选择框来更改其他 map 上的 map View ，我的代码将变得非常长、臃肿并且像意大利面条一样。

// 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 

Answer 1

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 的值可能是个好主意。