Google Javascript V3地图展示

zfszhangyuan

2013-01-14

关注关注

第一部分获取地图key

1、访问https://code.google.com/apis/console并登录您的google账户。

2、点击左侧的Services菜单。

3、激活GoogleMapsAPIv3服务。

4、点击左侧的APIAccess菜单链接.从APIAccess页，在SimpleAPIAccess部分让你的key变为可用.然后就可以开发浏览器地图应用了.

您可以看到如下信息：

Keyforbrowserapps(withreferers)

APIkey:AIzaSyCzu9hrVrqYM_RxhupnP7yrqXFw8ksQNnc

Referers:http://admin.gps000.com/

Activatedon:Jan13,20137:20PM

Activatedby:*@gmail.com–you

Keyforbrowserapps(withreferers)APIkey:AIzaSyAY-HsXXPsBUqsbQLDFO8kpNWLANwH0E7k

Referers:Anyrefererallowed

Activatedon:Jan13,20136:48PM

Activatedby:*@gmail.com–you

第二部分googleJS地图特性

1、支持HTML5：<!DOCTYPEhtml>

2、提供函数库：https://developers.google.com/maps/documentation/javascript/libraries

3、提供快速通道示例：

Developer’sGuide

https://developers.google.com/maps/documentation/javascript/tutorial#api_key,

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

4、HTTPS请求（API加载）地图：

<scriptsrc="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE"type="text/javascript"></script>

5、地图配置：

varmapOptions={center:newgoogle.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、地图标签：

<divid="map_canvas"style="width:100%;height:100%"></div>

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

javascript 脚本 maps 地图api