一个最简单的google map页面

最新推荐文章于 2020-10-16 17:17:48 发布

stevensz7

最新推荐文章于 2020-10-16 17:17:48 发布

阅读量1.3k

点赞数

分类专栏： Google Map JavaScript学习文章标签： google map 地图 html javascript

本文链接：https://blog.csdn.net/stevensz7/article/details/24136859

版权

Google Map JavaScript学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、知识点总结：

1、将页面声明为HTML5：

<!DOCTYPE html>

2、在页面中引入Google Map的JavaScript开发包：

<script src="http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

3、通过一个map对象实现地图的显示：

		<script>
			var map;
			function initialize() {
				//设置基本参数
				var mapOptions = {
					zoom : 8,
					center : new google.maps.LatLng(22.653047, 114.062986)
				};
				map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
			}

			//添加监听函数加载地图
			google.maps.event.addDomListener(window, 'load', initialize);

		</script>

二、代码：

<!DOCTYPE html>
<html>
	<head>
		<title>一个最简单的google map页面</title>
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
		<meta charset="utf-8">
		<style>
			html, body, #map-canvas {
				height: 100%;
				margin: 0px;
				padding: 0px
			}
		</style>
		<!--加载google map api-->
		<script src="http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
		<script>
			var map;
			function initialize() {
				//设置基本参数
				var mapOptions = {
					zoom : 8,
					center : new google.maps.LatLng(22.653047, 114.062986)
				};
				map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
			}

			//添加监听函数加载地图
			google.maps.event.addDomListener(window, 'load', initialize);

		</script>
	</head>
	<body>
		<div id="map-canvas">

		</div>
	</body>
</html>

三、运行效果截图：