使用下拉框中的选择更改HTML5中的地理位置地图
Changing a geolocation map within HTML5 with selection made from drop down box
我正在为学校编写一个项目。我已经在页面加载时包含了地理定位的代码。它需要有一个下拉框来显示另外三个位置。我还包括了编码的下拉框。我想,要更改map_canvas id,我需要将if语句与我所拥有的华特迪士尼世界、火奴鲁鲁和巴黎的谷歌地图一起包含在内。我不确定如何对这个if语句进行编码,以更改基于选择显示的地图图像。这是我所拥有的:
CSS
html{
height: 90%
}
body{
height: 100%;
margin: 0px;
padding: 0px;
}
#map_canvas{
height: 90%;
width: 90%;
}
JS
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.85859507,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>
相关文章:
- 安卓平台上的QWebView HTML5地理位置
- Possibile使用Manifest v2下的HTML5地理位置API将lat/long转换为国家/地区
- 使用html5地理位置api创建地理围栏
- HTML5地理位置,询问位置
- HTML5地理位置非异步
- 如何使用HTML5地理位置javascript初始化带有地理位置(用户的当前位置)的Google Maps API
- 各种浏览器中的HTML5地理位置API
- 测试是否已授予 html5 地理位置权限
- iOS HTML5 地理位置 - 当浏览器无权使用地理位置时没有错误
- 即使设置了所有选项,HTML5地理位置也不起作用
- 为什么这个依赖于HTML5地理位置的javascript代码出错
- HTML5地理位置地址表单填充器未捕获语法错误:意外的标记<
- HTML5地理位置监视位置正在重新加载完整的地图,而不仅仅是位置
- 谷歌地图API显示空白地图时,从HTML5地理位置提供LatLng线
- Chrome中无法使用HTML5地理位置的错误处理
- Javascript和HTML5地理位置-如何存储位置
- 带有HTML5地理位置的Android Webview
- 在半径内的Html5地理位置搜索
- 我如何使用GMaps API来显示默认为用户的HTML5地理位置的可拖动引脚?
- HERE地图使用HTML5地理位置