Блог

Я экспериментировал с Google Maps API версии 3. У меня возникли проблемы с динамическим изменением Google MapTypeId, чтобы пользователь мог изменить тип карты с помощью поля выбора. Я хочу, чтобы код не был раздутым и передавал значение поля выбора в Google maps, а изменение стиля карты отражалось в 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();
}
}
  

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 .