Javascript 和谷歌地圖 api 版本 3 通過用戶輸入更改 MapeTypeId

Question

我一直在嘗試使用谷歌地圖 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 

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