通过下拉框进行选择来更改HTML5中的地理位置地图

debugcn 发表于 Dev

phoenixCoder

我正在为学校编写一个项目。我已经在页面加载时包含了用于地理定位的代码。需要有一个下拉框，以调出另外三个位置。我还包括了编码下拉框。我在想更改map_canvas id，我需要在if语句中包含我为沃尔特迪斯尼乐园，檀香山和巴黎提供的Google地图。我不确定如何对该if语句进行编码，以更改根据选择显示的地图图像。这是我所拥有的：

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

这是我已经在程序中并且正在运行的内容。这是我给迪士尼的代码，然后是我在其他位置找到的坐标：

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

法国巴黎是48.8589507,2.2775174

夏威夷檀香山为21.3282956，-157.9390673

任何帮助深表感谢。

phoenixCoder

我能够编写一个完全可以执行我想做的工作程序。这是代码：

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。