JS学习-调用google map API例子

最新推荐文章于 2023-01-10 08:50:13 发布

月影紫风

最新推荐文章于 2023-01-10 08:50:13 发布

阅读量1.2k

点赞数

分类专栏： JS 文章标签： js

本文链接：https://blog.csdn.net/Small_dian/article/details/9212931

版权

JS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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;
}

月影紫风

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS学习-调用google map API例子

myLoc.cssbody { 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
复制链接

扫一扫

专栏目录