Head First HTML5 Chapter 5 地理定位 Google Maps API Marker 地图上的大头针

marker on google Maps

Page 186

在谷歌地图上增加你的地理坐标。

更多有关Google Maps JavaScript API

http://code.google.com/apis/maps/documentation/javascript/

使用方法如下。

需要在原来的基础上增加一个方法在上一篇博客的showMap()函数中。是加入

function addMarker(map, position, title, content){

}

map => map = new google.maps.Map(mapDiv, mapOptions); 是用谷歌地球api创建的特定位置，特定地图选项创建的对象。

position => 是用 var googleLatAndLong = new google.maps.LatLng(coords.latitude, coords.longitude); 用的谷歌地图api创建的谷歌地球对象

title, content 是 google 地图，点击图片之后显示的标题与内容。

title是将鼠标放在 marker上显示的东西

content是点击marker 显示的东西

未点击之前仅仅是个小大头针。

如图：

点击大头针marker之后的是：

现在上全部代码。

mylocation.html

 1 <!--
 2 To change this template, choose Tools | Templates
 3 and open the template in the editor.
 4 -->
 5 <!DOCTYPE html>
 6 <html>
 7     <head>
 8         <title></title>
 9         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
10         <script src="myLoc.js"></script>
11         <script src="http://maps.google.com/maps/api/js?sensor=true"></script>
12         <link rel="stylesheet" href="myLoc.css">
13     </head>
14     <body>
15         <div id= "myLocation">
16             Your location will go here.
17         </div>
18         <div id= "distance">
19             Distance from Silicon Valley will go here.
20         </div>
21         <div id="map">
22         </div>
23     </body>
24 </html>

myLoc.js

这里与上一篇博客不同的是，在showMap函数中，增加一个addMarker的函数，用来创建大头针的用处。

  1 /* myLoc.js */
  2 
  3 var ourCoords =  {
  4     latitude: 37.37,
  5     longitude: -122.04
  6 };
  7 
  8 window.onload = getMyLocation;
  9 
 10 function getMyLocation() {
 11     if (navigator.geolocation) {
 12 
 13         navigator.geolocation.getCurrentPosition(
 14             displayLocation,     // if geoloacation is avilable, getCurrentPostion will sent the latitude,
 15             displayError);        // and the longitude info to the function displayLocation
 16     }
 17     else {
 18         alert("Oops, no geolocation support");
 19     }
 20 }
 21 
 22 function displayLocation(position) {
 23     var latitude = position.coords.latitude;
 24     var longitude = position.coords.longitude;
 25 
 26     var div = document.getElementById("myLocation");
 27     div.innerHTML = "You are at Latitude: " + latitude + ", Longitude: " + longitude;
 28 
 29     var km = computeDistance(position.coords, ourCoords);
 30     var distance = document.getElementById("distance");
 31     distance.innerHTML = "You are " + km + " km from Silicon Valley";
 32 
 33     showMap(position.coords);        //using google Maps API to show map in div
 34 
 35     
 36 
 37 }
 38 
 39 
 40 // --------------------- Ready Bake ------------------
 41 //
 42 // Uses the Spherical Law of Cosines to find the distance
 43 // between two lat/long points
 44 //
 45 function computeDistance(startCoords, destCoords) {
 46     var startLatRads = degreesToRadians(startCoords.latitude);
 47     var startLongRads = degreesToRadians(startCoords.longitude);
 48     var destLatRads = degreesToRadians(destCoords.latitude);
 49     var destLongRads = degreesToRadians(destCoords.longitude);
 50 
 51     var Radius = 6371; // radius of the Earth in km
 52     var distance = Math.acos(Math.sin(startLatRads) * Math.sin(destLatRads) + 
 53                     Math.cos(startLatRads) * Math.cos(destLatRads) *
 54                     Math.cos(startLongRads - destLongRads)) * Radius;
 55 
 56     return distance;
 57 }
 58 
 59 function degreesToRadians(degrees) {
 60     radians = (degrees * Math.PI)/180;
 61     return radians;
 62 }
 63 
 64 //function showMap(coords){
 65 //    var googleLatAndLon = new google.maps.LatLng(coords.latitude, coords.longitude);
 66 //    var mapOptions = {
 67 //        zoom: 10,
 68 //        center: googleLatAndLon,
 69 //        mapTypeID: google.maps.MapTypeId.ROADMAP
 70 //    };
 71 //    var mapDiv = document.getElementById("map");
 72 //    map = new google.maps.Map(mapDiv, mapOptions);    //using google methods to write into mapDiv instead of .innerHTML
 73 //}
 74 
 75 function showMap(coords) {
 76     var googleLatAndLong = new google.maps.LatLng(coords.latitude, coords.longitude);
 77     var mapOptions = {
 78         zoom: 10,
 79         center: googleLatAndLong,
 80         mapTypeId: google.maps.MapTypeId.ROADMAP
 81     };
 82     var mapDiv = document.getElementById("map");
 83     map = new google.maps.Map(mapDiv, mapOptions);
 84 
 85     var title = "Your location";
 86     var content = "You are at Latitude: " + coords.latitude + ", Longitude: " + coords.longitude;
 87     addMarker(map, googleLatAndLong, title, content);
 88 }
 89 
 90 // ------------------ Add Markers on Google Map -----------------
 91 function addMarker(map, latlong, title, content){
 92     var markerOptions = {
 93         position:latlong,
 94         map:map,
 95         title:title,
 96         clickable: true
 97     };
 98     var marker = new google.maps.Marker(markerOptions);
 99 
100     var infoWindowOptions ={
101         content:content,
102         position:latlong
103     };
104 
105     var infoWindow = new google.maps.InfoWindow(infoWindowOptions);
106 
107     google.maps.event.addListener(marker,"click",function(){
108         infoWindow.open(map);
109     })        // on marker, if it's clicked, the listener would call function to show info on map
110 }
111 
112 // ------------------ End Ready Bake -----------------
113 
114 
115 function displayError(error) {
116     var errorTypes = {
117         0: "Unknown error",
118         1: "Permission denied",
119         2: "Position is not available",
120         3: "Request timeout"
121     };
122     var errorMessage = errorTypes[error.code];
123     if (error.code == 0 || error.code == 2) {
124         errorMessage = errorMessage + " " + error.message;
125     }
126     var div = document.getElementById("location");
127     div.innerHTML = errorMessage;
128 }

myLoc.css

 1 /*
 2  * myLoc.css
 3  *
 4 */
 5 
 6 body {
 7     font-family: Arial, Helvetica, sans-serif;
 8     margin: 10px;
 9 }
10 form, div#location, div#distance {
11     padding: 5px;
12 }
13 
14 div#map {
15     margin: 5px;
16     width: 400px;
17     height: 400px;
18     border: 1px solid black;
19 }
20 
21 
22 /*
23  * Use this CSS to make the map full screen
24  *
25 
26 html, body, div#map {
27      100%;
28     height: 100%;
29     margin: 0px;
30 }
31 
32 form {
33     position: absolute;
34     top: 40px;
35     right: 10px;
36     z-index: 2;
37 }
38 
39 div#location, div#distance {
40     display: none;
41 }
42  */