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

标签 javascript css html google-maps geolocation

我正在为学校编写一个元素。我已经在页面加载时包含了地理定位代码。需要有一个下拉框来调出三个额外的位置。我还包含了编码下拉框。我在想，要更改 map_canvas id，我需要将 if 语句包含在我拥有的沃尔特迪斯尼世界、火奴鲁鲁和巴黎的谷歌地图中。我不确定如何编写此 if 语句以根据选择更改显示的 map 图像。这是我所拥有的:

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

关于javascript - 通过从下拉框中进行选择来更改 HTML5 中的地理位置图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36539343/

上一篇：javascript - 将淡入添加到样式表切换

下一篇：c# - C# 中的 Selenium Web 驱动程序消息验证

相关文章：

javascript - 关于 JavaScript 中的模块模式

javascript - React Router 只识别索引路由

javascript - 运行 npm run compile :sass returns error: npm ERR! 缺少脚本:compile:sass

css - 更改 dijit 布局选项卡容器的选项卡颜色

c# - 需要比较单元格值然后根据结果更改背景

javascript - 如何在没有 jQuery 的情况下实时获取 scrollTop 位置？

javascript - 处理 Angular Directive(指令)中的 ng-click

javascript - 添加 javascript 代码后容器之间的空白

iPhone iOS 如何发送带有 CSS 样式的 HTML 电子邮件？

html - 如何使表格中的文本居中？

©2024 IT工具网  联系我们