Google Javascript V3地图展示

最新推荐文章于 2020-12-24 14:08:22 发布

boonyaAlishing

最新推荐文章于 2020-12-24 14:08:22 发布

阅读量166

点赞数

分类专栏： Java-Web 文章标签： google html access

本文链接：https://blog.csdn.net/boonyaAlishing/article/details/84381144

版权

Java-Web 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

[size=medium][b]第一部分获取地图key[/b]
1、访问 https://code.google.com/apis/console 并登录您的google账户。
2、点击左侧的 Services 菜单。
3、激活 Google Maps API v3 服务。
4、点击左侧的API Access 菜单链接. 从API Access 页，在Simple API Access 部分让你的key变为可用. 然后就可以开发浏览器地图应用了.

您可以看到如下信息：
Key for browser apps (with referers)
API key: AIzaSyCzu9hrVrqYM_RxhupnP7yrqXFw8ksQNnc
Referers: http://admin.gps000.com/
Activated on: Jan 13, 2013 7:20 PM
Activated by: *@gmail.com – you

Key for browser apps (with referers) API key: AIzaSyAY-HsXXPsBUqsbQLDFO8kpNWLANwH0E7k
Referers: Any referer allowed
Activated on: Jan 13, 2013 6:48 PM
Activated by: *@gmail.com – you

[b]第二部分 googleJS地图特性[/b]
1、支持HTML5：<!DOCTYPE html>
2、提供函数库：https://developers.google.com/maps/documentation/javascript/libraries
3、提供快速通道示例：
Developer’s Guide
https://developers.google.com/maps/documentation/javascript/tutorial#api_key,
https://developers.google.com/maps/documentation/javascript/examples/?hl=zh-CN
4、HTTPS请求（API加载）地图：
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE" type="text/javascript"></script>
5、地图配置：
var mapOptions = { center: new google.maps.LatLng(-34.397, 150.644), zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP};
6、地图种类：
mapTypeId: google.maps.MapTypeId.ROADMAP
ROADMAP 基本地图，默认为2D瓦片图层
SATELLITE 显示图片摄影图层
HYBRID 突出显示道路目标的图片底图层
TERRAIN 物理图层，显示河流山脉等等
注：使用基本地图包含了以上所有您想知道的信息。

7、地图标签：
<div id="map_canvas" style="width: 100%; height: 100%"></div>
8、支持异步加载API：[/size]

function initialize() { 
 var mapOptions = {   
 zoom: 8,    
 center: new google.maps.LatLng(-34.397, 150.644),
  mapTypeId: google.maps.MapTypeId.ROADMAP  } 
 var map = 
new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}
function loadScript() { 
 var script = document.createElement("script");  script.type = "text/javascript";  script.src = "http://maps.googleapis.com/maps/api/js?

key=YOUR_API_KEY&sensor=TRUE_OR_FALSE&callback=initialize";  document.body.appendChild(script);
}

[size=medium]9、展示地图[/size]

/**
 * GOOGLE地图使用帮助类
 * @version    javascript_API V3
 * @author     PengJunlin
 * @write-date 2013-1-14
 */
(function(){

	/**
	 * 创建命名空间
	 */
	window.com={};
	com.gmap={};
	com.gmap.map={};

	var map={};
	/**
	 * 初始化参数
	 */
	com.gmap.map.constant={
		//地图容器
		DIV:"map_canvas",
		//地图KEY
		KEY:"AIzaSyAY-HsXXPsBUqsbQLDFO8kpNWLANwH0E7k",
		//允许使用传感器
		SENSOR:false
	}

	com.gmap.map.Util={
	   //默认显示成都市地图
		init:function(){
		   var mapOptions ={
                 center: new google.maps.LatLng(30.68734343, 104.002308),
                 zoom: 11,
                 mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById(com.gmap.map.constant.DIV),mapOptions);  
	    },
	    //异步加载地图
	    asyncLoadMap:function(){
	    	 var script = document.createElement("script"); 
	    	 script.type = "text/javascript"; 
	    	 script.src = "http://maps.googleapis.com/maps/api/js?key="+com.gmap.map.constant.KEY+"&sensor="
	    	          +com.gmap.map.constant.SENSOR+"&callback="+this.init(); 
	    	 document.body.appendChild(script);
	    }
	};
})();

$(document).ready(function(){
	com.gmap.map.Util.init();//加载地图
	//com.gmap.map.Util.asyncLoadMap();//异步加载地图API
});