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 
      5  6  7      8          9         
     10         11         12         
     13     14     15         
     
      16             Your location will go here.17         
     
18         
     
      19             Distance from Silicon Valley will go here.20         
     
21         
     
      22         
     
23     24 

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:latlong103     };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 map110 }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 screen24  *25 26 html, body, div#map {27     width: 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  */