您的位置：首页 > Web前端 > JavaScript

JS学习-调用google map API例子

2013-07-01 12:42 411 查看

myLoc.css

body {
font-family: Arial, Helvetica, sans-serif;
margin: 10px;
}
form, div#location, div#distance {
padding: 5px;
}

div#map {
margin: 5px;
width: 400px;
height: 400px;
border: 1px solid black;
}

myLoc.html

<!doctype html>
<html>
<head>
<title>Where am I?</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
<meta charset="utf-8">
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="myLoc.js"></script>
<link rel="stylesheet" href="myLoc.css">
</head>
<body>

<div id="location">
Your location will go here.
</div>

<div id="distance">
Distance from WickedlySmart HQ will go here.
</div>

<div id="map">
</div>

</body>
</html>

myLoc.js

var map = null;
var ourCoords =  {
latitude: 47.624851,
longitude: -122.52099
};

window.onload = getMyLocation;
//调用geolocation对象，若浏览器支持，调用getCurrentPosition对象
function getMyLocation() {
if (navigator.geolocation) {

navigator.geolocation.getCurrentPosition(
displayLocation,
displayError);
}
else {
alert("Oops, no geolocation support");
}
}
//处理函数
function displayLocation(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;

var div = document.getElementById("location");
div.innerHTML = "You are at Latitude: " + latitude + ", Longitude: " + longitude;

var km = computeDistance(position.coords, ourCoords);
var distance = document.getElementById("distance");
distance.innerHTML = "You are " + km + " km from the WickedlySmart HQ";

showMap(position.coords);
}

// --------------------- Ready Bake ------------------
//
// Uses the Spherical Law of Cosines to find the distance
// between two lat/long points
//计算两个位置之间的距离，用经度，纬度表示
function computeDistance(startCoords, destCoords) {
var startLatRads = degreesToRadians(startCoords.latitude);
var startLongRads = degreesToRadians(startCoords.longitude);
var destLatRads = degreesToRadians(destCoords.latitude);
var destLongRads = degreesToRadians(destCoords.longitude);

var Radius = 6371; // radius of the Earth in km
var distance = Math.acos(Math.sin(startLatRads) * Math.sin(destLatRads) +
Math.cos(startLatRads) * Math.cos(destLatRads) *
Math.cos(startLongRads - destLongRads)) * Radius;

return distance;
}

function degreesToRadians(degrees) {
radians = (degrees * Math.PI)/180;
return radians;
}

// ------------------ End Ready Bake -----------------
//创建地图，在html上相应的地方显示
function showMap(coords) {
var googleLatAndLong = new google.maps.LatLng(coords.latitude,
coords.longitude);
var mapOptions = {
zoom: 10,
center: googleLatAndLong,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var mapDiv = document.getElementById("map");
map = new google.maps.Map(mapDiv, mapOptions);

// add the user marker
var title = "Your Location";
var content = "You are here: " + coords.latitude + ", " + coords.longitude;
addMarker(map, googleLatAndLong, title, content);

}
//增加地图上的大头钉标记
function addMarker(map, latlong, title, content) {
var markerOptions = {
position: latlong,
map: map,
title: title,
clickable: true
};
var marker = new google.maps.Marker(markerOptions);

var infoWindowOptions = {
content: content,
position: latlong
};
//点击大头钉标记是，显示的新窗体，显示位置信息
var infoWindow = new google.maps.InfoWindow(infoWindowOptions);

google.maps.event.addListener(marker, 'click', function() {
infoWindow.open(map);
});
}

function displayError(error) {
var errorTypes = {
0: "Unknown error",
1: "Permission denied",
2: "Position is not available",
3: "Request timeout"
};
var errorMessage = errorTypes[error.code];
if (error.code == 0 || error.code == 2) {
errorMessage = errorMessage + " " + error.message;
}
var div = document.getElementById("location");
div.innerHTML = errorMessage;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航