Ändern einer Geolocation-Map in HTML5 mit Auswahl aus der Dropdown-Box

Ich bin ein Projekt für die Schule zu kodieren. Ich habe bereits Code zum Geolocation beim Laden der Seite eingefügt. Es ist erforderlich, ein Dropdown-Feld zu haben, um drei zusätzliche Standorte anzuzeigen. Ich habe auch die codierte Dropdown-Box eingefügt. Ich denke, dass ich die map_canvas ID ändern muss, wenn ich Aussagen mit den enthaltenen Google Maps für Walt Disney World, Honolulu und Paris habe. Ich bin mir nicht sicher, wie ich diese if-Anweisung genau so schreiben soll, um das angezeigte Kartenbild basierend auf der Auswahl zu ändern. Hier ist, was ich habe:Ändern einer Geolocation-Map in HTML5 mit Auswahl aus der Dropdown-Box

CSS

html{ 
    height: 90% 
} 
body{ 
    height: 100%; 
    margin: 0px; 
    padding: 0px; 
} 
#map_canvas{ 
    height: 90%; 
    width: 90%; 
}

var watchID; 
var geo; // for the geolocation object 
var map; // for the google map object 
var mapMarker; // the google map marker object 

// position options 
var MAXIMUM_AGE = 200; // miliseconds 
var TIMEOUT = 300000; 
var HIGHACCURACY = true; 

function getGeoLocation() { 
    try { 
    if (!!navigator.geolocation) return navigator.geolocation; 
    else return undefined; 
    } catch (e) { 
    return undefined; 
    } 
} 

function show_map(position) { 
    var lat = position.coords.latitude; 
    var lon = position.coords.longitude; 
    var latlng = new google.maps.LatLng(lat, lon); 

    if (map) { 
    map.panTo(latlng); 
    mapMarker.setPosition(latlng); 
    } else { 
    var myOptions = { 
     zoom: 18, 
     center: latlng, 

     // mapTypeID -- 
     // ROADMAP displays the default road map view 
     // SATELLITE displays Google Earth satellite images 
     // HYBRID displays a mixture of normal and satellite views 
     // TERRAIN displays a physical map based on terrain information. 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
    map.setTilt(0); // turns off the annoying default 45-deg view 

    mapMarker = new google.maps.Marker({ 
     position: latlng, 
     title: "You are here." 
    }); 
    mapMarker.setMap(map); 
    } 
} 

function geo_error(error) { 
    stopWatching(); 
    switch (error.code) { 
    case error.TIMEOUT: 
     alert('Geolocation Timeout'); 
     break; 
    case error.POSITION_UNAVAILABLE: 
     alert('Geolocation Position unavailable'); 
     break; 
    case error.PERMISSION_DENIED: 
     alert('Geolocation Permission denied'); 
     break; 
    default: 
     alert('Geolocation returned an unknown error code: ' + error.code); 
    } 
} 

function stopWatching() { 
    if (watchID) geo.clearWatch(watchID); 
    watchID = null; 
} 

function startWatching() { 
    watchID = geo.watchPosition(show_map, geo_error, { 
    enableHighAccuracy: HIGHACCURACY, 
    maximumAge: MAXIMUM_AGE, 
    timeout: TIMEOUT 
    }); 
} 

window.onload = function() { 
    if ((geo = getGeoLocation())) { 
    startWatching(); 
    } else { 
    alert('Geolocation not supported.') 
    } 
}

HTML

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> 
<div id="map_canvas"></div> 
<section> 
    <div id="vacationLocations"> 
    <h2>Vacation Locations</h2> 
    <form name="tripSelection" method="post" method="get"> 
     <div class="formRow"> 
     <label for="serviceSelection"> 
      Trip Selection</label> 
     <select name="tripSelection" id="tripSelection" class="validated" required> 
      <option value="">-Select One-</option> 
      <option value="1">Paris, France</option> 
      <option value="2">Honolulu, Hawaii</option> 
      <option value="3">Walt Disney World, Florida</option> 
     </select> 
     </div> 
    </div>

Dies ist, was ich h Ave bereits im Programm und es funktioniert. hier ist der Code, den ich für Disney haben durch die Koordinaten folgte ich für den anderen Standorten gefunden haben:

<!DOCTYPE html> 
<html> 
<head> 
    <script 
    src="http://maps.googleapis.com/maps/api/js"> 
    </script> 

    <script> 
    function initialize() { 
     var mapProp = { 
center:new google.maps.LatLng(28.3341439,-81.5871676), 
zoom:14, 
mapTypeId:google.maps.MapTypeId.ROADMAP 
    }; 
    var map=new google.maps.Map(document.getElementById("googleMap"), mapProp); 
} 
google.maps.event.addDomListener(window, 'load', initialize); 
</script> 
</head>

Paris, Frankreich ist 48.8589507,2.2775174

Honolulu, Hawaii ist 21.3282956, -157.9390673

Jede Hilfe wird sehr geschätzt.

Quelle

2016-04-11 phoenixCoder

Die vorgeschlagene Bearbeitung tut nichts, um den Code zu unterstützen. Wie würde ich die map_canvas ändern, um die Auswahl aus der Dropdown-Box anzuzeigen? – phoenixCoder

Ich konnte ein Arbeitsprogramm programmieren, das genau das tut, was ich versuchte. Dies ist der Code:

<!DOCTYPE html> 
<html class lang="en"> 

<!-- 
    geoLocMap.html by Bill Weinman 
    <http://bw.org/contact/> 
    created 2011-07-07 
    updated 2011-07-20 

    Copyright (c) 2011 The BearHeart Group, LLC 
    This file may be used for personal educational purposes as needed. 
    Use for other purposes is granted provided that this notice is 
    retained and any changes made are clearly indicated as such. 
--> 

<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<style type="text/css"> 
    html { height: 90% } 
    body { height: 100%; margin: 0px; padding: 0px } 
    #map_canvas { height: 90%; width: 90% } 
</style> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> 
<script type="text/javascript"> 
    var watchID; 
    var geo; // for the geolocation object 
    var map; // for the google map object 
    var mapMarker; // the google map marker object 

    // position options 
    var MAXIMUM_AGE = 200; // miliseconds 
    var TIMEOUT = 300000; 
    var HIGHACCURACY = true; 

    function getGeoLocation() { 
     try { 
      if(!! navigator.geolocation) return navigator.geolocation; 
      else return undefined; 
     } catch(e) { 
      return undefined; 
     } 
    } 

    function show_map(position) { 
     var lat = position.coords.latitude; 
     var lon = position.coords.longitude; 
     var latlng = new google.maps.LatLng(lat, lon); 

     if(map) { 
      map.panTo(latlng); 
      mapMarker.setPosition(latlng); 
     } else { 
      var myOptions = { 
       zoom: 18, 
       center: latlng, 

       // mapTypeID -- 
       // ROADMAP displays the default road map view 
       // SATELLITE displays Google Earth satellite images 
       // HYBRID displays a mixture of normal and satellite views 
       // TERRAIN displays a physical map based on terrain information. 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 
      map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
      map.setTilt(0); // turns off the annoying default 45-deg view 

      mapMarker = new google.maps.Marker({ 
       position: latlng, 
       title:"You are here." 
      }); 
      mapMarker.setMap(map); 
     } 
    } 

    function geo_error(error) { 
     stopWatching(); 
     switch(error.code) { 
      case error.TIMEOUT: 
       alert('Geolocation Timeout'); 
       break; 
      case error.POSITION_UNAVAILABLE: 
       alert('Geolocation Position unavailable'); 
       break; 
      case error.PERMISSION_DENIED: 
       alert('Geolocation Permission denied'); 
       break; 
      default: 
       alert('Geolocation returned an unknown error code: ' + error.code); 
     } 
    } 

    function stopWatching() { 
     if(watchID) geo.clearWatch(watchID); 
     watchID = null; 
    } 

    function startWatching() { 
     watchID = geo.watchPosition(show_map, geo_error, { 
      enableHighAccuracy: HIGHACCURACY, 
      maximumAge: MAXIMUM_AGE, 
      timeout: TIMEOUT 
     }); 
    } 

    window.onload = function() { 
     if((geo = getGeoLocation())) { 
      startWatching(); 
     } else { 
      alert('Geolocation not supported.') 
     } 
    } 
</script> 
<!--Changes added by Eric Wood --> 
<script> 
    function tripChange() { 
     var s = document.getElementById("tripSelection"); 
     var tripSelection = s.options[s.selectedIndex].value; 

     if (tripSelection == 1) { 
      value1(); 
     }else if(tripSelection == 2){ 
      value2(); 
     }else if(tripSelection == 3){ 
      value3(); 
     } 
    } 
      function value1() { 
       var mapProp = { 
        center:new google.maps.LatLng(48.8589507,2.2775174), 
        zoom:14, 
        mapTypeId:google.maps.MapTypeId.ROADMAP 
       }; 
       var Map=new google.maps.Map(document.getElementById("map_canvas"), mapProp); 
      } 

      function value2() { 
       var mapProp = { 
        center:new google.maps.LatLng(21.3282956,-157.9390673), 
        zoom:14, 
        mapTypeId:google.maps.MapTypeId.ROADMAP 
       }; 
       var Map=new google.maps.Map(document.getElementById("map_canvas"), mapProp); 
      } 

      function value3() { 
       var mapProp = { 
        center:new google.maps.LatLng(28.3341439,-81.5871676), 
        zoom:14, 
        mapTypeId:google.maps.MapTypeId.ROADMAP 
       }; 
       var Map=new google.maps.Map(document.getElementById("map_canvas"), mapProp); 
      } 
</script> 
</head> 
<body> 
     <div id="map_canvas"></div> 
    <section> 
    <div id="vacationLocations" > 
     <h2>Vacation Locations</h2> 
    <form name="tripSelection" method="post" method="get" > 
     <div class="formRow"> 
      <label for="serviceSelection"> 
      Trip Selection</label> 
      <select name="tripSelection" id="tripSelection" class="validated" onchange="tripChange()" required> 
       <option value="">-Select One-</option> 
       <option value="1">Paris, France</option> 
       <option value="2">Honolulu, Hawaii</option> 
       <option value="3">Walt Disney World, Florida</option> 
      </select> 
     </div> 
</div> 
</body> 
</html>

Quelle

2016-04-16 15:24:41 phoenixCoder

Ändern einer Geolocation-Map in HTML5 mit Auswahl aus der Dropdown-Box

Antwort

Verwandte Themen