Google Javascript V3地图展示

阅读更多

第一部分 获取地图key
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

第二部分 googleJS地图特性
1、支持HTML5：
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加载）地图：

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、地图标签：

8、支持异步加载API：

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

9、展示地图

/**
 * 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
});