利用JavaScript和Google API在网页中加入地图

最新推荐文章于 2020-06-09 16:08:29 发布

Orange_J

最新推荐文章于 2020-06-09 16:08:29 发布

阅读量546

点赞数

分类专栏： HTML CSS

本文链接：https://blog.csdn.net/juhaotian/article/details/46694515

版权

HTML CSS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

首先获取当前位置的经纬度，然后利用谷歌的API来显示一个地图，并用大头针标记自己的当前位置。

<html>
	<head>
		<meta charset="utf-8">
		<title>Google Map</title>
		<style>
			.map {
				width: 400px;
				height: 400px;
				border: 2px solid black;
				position: relative;
				top: 10px;
			}
		</style>
		<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
		<script>
			window.onload = getMyLocation;

			function getMyLocation() {
				if (navigator.geolocation) {
					navigator.geolocation.getCurrentPosition(displayLocation);
				} else {
					alert("Sorry,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;

				//显示地图
				showMap(position.coords); 
			}

			var map;//用于保存地图
			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);

				//调用addMarker函数
				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);
				});
			}
		</script>
	</head>

	<body>
		<div id="location">
			Your location will go here.
		</div>
		<div id="map" class="map">			
		</div>
	</body>
</html>

最终效果如下：

Orange_J

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用JavaScript和Google API在网页中加入地图

首先获取当前位置的经纬度，然后利用谷歌的API来显示一个地图，并用大头针标记自己的当前位置。 Google Map .map { width: 400px; height: 400px; border: 2px solid black; position: relative; top: 10px; }
复制链接

扫一扫