GoogleMap V3

最新推荐文章于 2019-08-04 12:44:29 发布

ponlya

最新推荐文章于 2019-08-04 12:44:29 发布

阅读量201

点赞数

分类专栏： maps 文章标签： javascript 测试人工智能 ViewUI

本文链接：https://blog.csdn.net/ponlya/article/details/84435418

版权

maps 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

GoogleMap API V3

https://developers.google.com/maps/documentation/javascript/reference?hl=zh-CN

Hello Map

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map From Google API</title> 
    <meta charset="utf-8">
    <style>
	/**如不指定系统会将其大小假定为 0x0 像素*/
	#map-canvas {
		width:300px;
		height:600px;
	}
    </style>
	<!--加载 Google Maps JavaScript API-->
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
	<script>
		var map;
		function initialize() {
			//Map options 对象来包含地图初始化变量
			var mapOptions = {
				zoom: 8,	//分辨率 	缩放 0 相当于地球地图可缩小的最低级别	分辨率较高，覆盖的区域则较小
				center: new google.maps.LatLng(-34.397, 150.644), //地图中心	创建 LatLng 对象   	按 {纬度,经度} 的顺序传递位置的坐标，以存储该位置
				mapTypeId: google.maps.MapTypeId.ROADMAP
				/**
					ROADMAP，用于显示 Google 地图的默认、普通 2D 图块。
					SATELLITE，用于显示拍摄的图块。
					HYBRID，用于同时显示拍摄的图块和重要地图项（道路、城市名）的图块图层。
					TERRAIN，用于显示自然地形图块，其中包含海拔和水体地图项（山脉、河流等）。
				*/
			};
			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>

以武汉为中心

var mapOptions = {
	zoom: 7,
	center: new google.maps.LatLng(30.51667,114.31667), //-34.397, 150.644	114.31667,30.51667
	mapTypeId: google.maps.MapTypeId.TERRAIN
};

版本类型
   发行版本，可使用 v=3 或省略 v 参数来指定。
   实验版本，可使用 v=3.exp 来指定。该版本是以主干版本为基础的当前版本，其中包含公开发布的所有错误修复和新增地图项。
   编号版本，用 v=3.number 表示，指定了 API 的地图项集。
http://maps.googleapis.com/maps/api/js?v=3.9&sensor=true_or_false
    版本 3.9 参考（发行）
    版本 3.10 参考（实验）
    版本 3.8 参考（冻结）
    版本 3.0 到 3.7 都已停用。
区域本地化
   region 参数添加到 <script> 标记中，以覆盖该默认行为。英国的 ccTLD 为“uk”（与其域名 .co.uk 相对应），而其区域标识符则为“GB”。还不是很懂，没有看到明显效果
   <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&region=GB">

事件
   MVC 对象通常都包含状态。只要更改了对象的属性，API 就会触发已更改该属性的事件。
   如:当地图的缩放级别更改后，API 将会触发地图上的 zoom_changed 事件。您也可以在 event 命名空间方法中注册 addListener() 事件处理程序，以拦截这些状态更改。

无法修改用户界面元素（如版权和 Google 徽标）的位置

启用45度图像

map.setTilt(45);

map.setHeading(90);   旋转45度图像

Maps API 需要将世界位置转换为地图（屏幕）上的位置时，都需要先将纬度和经度值转换为“世界”坐标。此转换过程使用地图投影来完成。为此，Google Maps 使用墨卡托投影。您也可以定义自己的投影以实现 google.maps.Projection 接口。

墨卡托投影在经度方向上的宽度有限，但在纬度方向上的高度无限。

Google Maps API 可能无法加载最有用的较高缩放级别的所有地图图像；而是会将每个缩放级别的图像都分割为一组地图图块，这些图块逻辑上按照应用能识别的顺序排列。当地图滚动到新位置或新的缩放级别时，Maps API 会使用像素坐标确定所需的图块，然后将这些值转换为一组要检索的图块。这些图块坐标采用逻辑上易于确定哪些图块包含任何给定点的图像的方案进行分配。

Google 地图中的图块从与像素原点相同的位置进行编号。

自定义地图类型必须实现 MapType 接口

地球是一个三维球体（近似说法），而地图是二维平面。您在 Google Maps API 内看到的地图与其他的地球平面地图一样，都是地球在平面上的投影。简单而言，投影可定义为纬度/经度值在投影地图的坐标上的映射。

动态修改 mapTypeId：
map.setMapTypeId(google.maps.MapTypeId.TERRAIN);