Javascript 使用下拉框中的选择更改HTML5中的地理位置图

我正在为学校编写一个项目。我已经在页面加载时包含了地理定位代码。需要有一个下拉框来显示另外三个位置。我还包括了编码下拉框。我在想，要更改map_canvas id，我需要在包含的谷歌地图中包含if语句，这些地图是我为迪斯尼世界、檀香山和巴黎提供的。我不知道如何准确地编码这个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.')
  }
}

JS

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>

函数初始化（）{
var mapProp={
中心：新google.maps.LatLng（28.3341439，-81.5871676），
缩放：14，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（“googleMap”），mapProp）；
}
google.maps.event.addDomListener（窗口“加载”，初始化）；

法国巴黎是48.8589507,2.2775174

夏威夷的檀香山是21.3282956，-157.9390673

---

非常感谢您的任何帮助。

我能够编写一个工作程序，它完全符合我的要求。代码如下：

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

html{高度：90%}
正文{高度：100%；边距：0px；填充：0px}
#地图画布{高度：90%；宽度：90%}
var-watchID；
var geo；//对于地理定位对象
变量映射；//对于谷歌地图对象
var mapMarker；//谷歌地图标记对象
//职位选择
var最大年龄=200；//毫秒
var超时=300000；
var高精度=真；
函数getGeoLocation（）{
试一试{
if（！！navigator.geology）返回navigator.geology；
否则返回未定义；
}捕获（e）{
返回未定义；
}
}
功能显示图（位置）{
var lat=位置坐标纬度；
var lon=位置坐标经度；
var latlng=新的google.maps.latlng（lat，lon）；
如果（地图）{
panTo地图（拉丁美洲）；
地图标记器设置位置（latlng）；
}否则{
变量myOptions={
缩放：18，
中心：拉特林，
//映射类型ID--
//路线图显示默认的路线图视图
//卫星显示谷歌地球卫星图像
//混合显示普通视图和卫星视图的混合
//地形基于地形信息显示物理地图。
mapTypeId:google.maps.mapTypeId.ROADMAP
};
map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
map.setTilt（0）；//关闭恼人的默认45度视图
mapMarker=new google.maps.Marker({
位置：latlng，
标题：“你在这里。”
});
setMap（map）；
}
}
函数geo_错误（error）{
停止监视（）；
开关（错误代码）{
大小写错误。超时：
警报（“地理位置超时”）；
打破
案例错误。位置不可用：
警报（“地理位置不可用”）；
打破
案例错误。权限被拒绝：
警报（“地理位置权限被拒绝”）；
打破
违约：
警报（'地理位置返回未知错误代码：'+错误代码）；
}
}
函数stopWatching（）{
if（watchID）geo.clearWatch（watchID）；
watchID=null；
}
函数startWatching（）{
watchID=geo.watchPosition（显示地图、geo错误、{
启用高精度：高精度，
最大年龄：最大年龄，
超时：超时
});
}
window.onload=函数（）{
如果（（geo=getGeoLocation（））{
开始匹配（）；
}否则{
警报（'不支持地理位置'）
}
}
函数tripChange（）{
var s=document.getElementById（“tripSelection”）；
var tripSelection=s.options[s.selectedIndex].value；
如果（tripSelection==1）{
值1（）；
}else if（tripSelection==2）{
值2（）；
}else if（tripSelection==3）{
值3（）；
}
}
函数值1（）{
var mapProp={
中心：新google.maps.LatLng（48.8589507,2.2775174），
缩放：14，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var Map=new google.maps.Map（document.getElementById（“Map_canvas”），mapProp）；
}
函数值2（）{
var mapProp={
中心：新google.maps.LatLng（21.3282956，-157.9390673），
缩放：14，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var Map=new google.maps.Map（document.getElementById（“Map_canvas”），mapProp）；
}
函数值3（）{
var mapProp={
中心：新google.maps.LatLng（28.3341439，-81.5871676），
缩放：14，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var Map=new google.maps.Map（document.getElementById（“Map_canvas”），mapProp）；
}
度假地点
行程选择