0
私は学校向けプロジェクトをコーディングしています。私は既にページ読み込み時にジオロケーションのコードを含んでいます。 3つの場所を追加するには、ドロップダウンボックスが必要です。コード化されたドロップダウンボックスも含まれています。私はmap_canvas idを変更することを考えています。私はウォルト・ディズニー・ワールド、ホノルル、そしてパリのために持っているgoogleマップにif文を含める必要があります。このif文をコーディングして、選択に基づいて表示されたマップイメージを変更する方法を正確にはわかりません。ここで私が持っているものです。ドロップダウンボックスから選択してHTML5内のジオロケーションマップを変更する
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>
これは、どのようなI hでありますすでにプログラムに入っていて、それは働いています。ここ は、私が他の場所のために発見した座標に続いて、ディズニーのための私が持っているコードです：
<!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、
、 、 、どんな助けも大歓迎です。
推奨されている編集はコードを助けるものではありません。ドロップダウンボックスから選択を表示するためにmap_canvasを変更するにはどうすればよいですか？ – phoenixCoder