YAOHAIXIAO.COM

HTML(5),CSS(3),JavaScript,DOM,Ajax,JSON,Front-end technologies & Yaohaixiao

热门标签:JavaScript Performance 前端开发 前端性能优化 原创

Rss

Home » Frontend » JavaScript » Google Map API 整理 – 创建基本的地图

Google Map API 整理 – 创建基本的地图

最近整理自己以前写的一些程序,发现以前使用Google API已经过时了,现在的API是3.0版本了。好吧,重新学习重新整理吧。今天先把我整理的创建基本地图相关的API的内容整理出来,希望同时学习API的朋友也能跟我多交流,好了,开始正题吧。

演示地址:http://www.yaohaixiao.com/scripts/gmap/

相关API整理

Map Options 地图配置项

	// 地图配置信息
    var mapOptions = {
        // 地图中心点(武汉市)
        center: GMap3.LatLng(baseLat, baseLng),
        // 地图缩放级别
        zoom: 8,
        // 地图类型:ROADMAP - 普通地图
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
	  

mapOptions需要3个必选参数:

  • center – 地图中心点
  • zoom – 地图缩放级别
  • mapTypeId – 地图类型

Latitudes and Longitudes 设置地图中心点:mapOptions.center

设置center坐标点,需要通过GMap3.LatLng方法创建一个google.maps.LatLng坐标对象。GMap3.LatLng方法的代码如下:

	    /**
		 * 通过坐标获得 LatLng 对象
		 * 
		 * @method LatLng
		 * @param {Number|String} lat
		 * @param {Number|String} lng
		 * @return {Object} - 返回 google.maps.LatLng 对象
		 * ==========================================================
		 * @example
		 * <pre>
		 * <code>
		 *     var latLng = GMap3.LatLng(30.44008494687992, 114.883501953125);
		 * </code>
		 * </pre>
		 */
	    LatLng: function(lat, lng){
			if (!lat || !lng) {
				return false;
			}
			
			return new google.maps.LatLng(lat, lng);
		}	
	  

这个方法接收两个参数:

  • lat – 经度坐标
  • lng – 纬度坐标

给这个方法传递了经纬度坐标后,方法将返回 google.maps.LatLng 对象。

Zoom Levels 设置地图缩放级别:mapOptions.zoom

zoom这个参数本身没有什么太多要介绍的,缩放的值在1~14之间。倒是这个缩放控件的一些可选的配置方法需要介绍一下。

Map Types(地图类型):mapOptions.mapTypeId

地图的类型goolge map预制了四类,在我的API整理里,也把这些默认值保存到了同名的MapTypeId属性中,代码如下:

	    /**
		 * 地图类型ID属性
		 * 
		 * @property MapTypeId 
		 * =================================================================
         * ROADMAP   - 显示(默认的)2D地图
         * SATELLITE - 显示卫星地图
         * HYBRID    - 在卫星地图上显示地名和交通线路
         * TERRAIN   - 在2D地图上显示地形图
         * =================================================================
         * @example
         * <pre>
         * <code>
         * var mapOptions = {
         *    mapTypeId: GMap3.MapTypeId.ROADMAP
         * }
         * </code>
         * </pre>
		 */
		MapTypeId: {
			ROADMAP: google.maps.MapTypeId.ROADMAP,
			SATELLITE: google.maps.MapTypeId.SATELLITE,
			HYBRID: google.maps.MapTypeId.HYBRID,
			TERRAIN: google.maps.MapTypeId.TERRAIN
		}
	  

这点跟原来的2.0版本的地图类型有些不一样了,不过我跟喜欢现在的这个改变。

The Map Object 地图对象:使用 GMap3.Map()创建地图

创建一个基础的地图很简单,如下所示:

        var mapOptions = {
			center: GMap3.LatLng(-34.397, 150.644),
			zoom: 8,
			mapTypeId: GMap3.MapTypeId.ROADMAP
		};
		
		var map = GMap3.Map('basic-map', mapOptions);
      

通过 GMap3.Map(),传递2个参数(mapId, mapOptions)给这个方法,并且返回new google.maps.Map(也就是The Map Object)对象。Map方法是我为了跟Google的方法同步,所以名字一样(我的API整理中,都是使用的这个命名策略)。JavaScript代码如下:

        /**
         * 创建地图
         * 
         * @method Map 
         * @param {String|HTMLElement} mapId - 显示地图的DOM节点ID或者DOM节点
         * @param {Object} [mapOptions] - 地图初始化配置参数(可选)
         * @return {Object} map - 返回 google.maps.Map 对象
         */    
		Map: function(mapId, mapOptions){
			var map = null;
			
			if(!mapId){
				return false;
			}
			
			map = new google.maps.Map(byId(mapId), mapOptions);
			
			return map;
		}
      

Map方法只接收两个参数:mapId 和 mapOptions:

  • mapId – 要显示地图的节点ID值或者DOM节点
  • mapOptions – 地图配置信息

Map方法看上去很简单,但是其实要了解的相关内容很多,而这些主要都在mapOptions里。下面我就具体介绍一下mapOptions的内容。

Controls Overview 地图控件

地图控件总共有6个:

  • panControl:圆饼的方向控制控件(默认显示)
  • zoomControl:地图缩放控件(默认显示)
  • mapTypeControl:地图类型控件(默认显示)
  • scaleControl:比例尺控件(默认不显示)
  • streetViewControl:街道试图控件(默认显示)
  • rotateControl:暂时没有查到具体做什么
  • overviewMapControl:地图缩略图控件(默认不显示)

The Default UI 默认的UI界面

Google 地图提供一下的默认UI界面,具体件下表:

Control Large Screens Small Screens iPhone Android
Zoom Large Zoom for sizes larger than 400x350px Small Zoom for sizes smaller than 400x350px Not present. Zooming is accomplished by a two finger pinch. “Touch” style control
Pan Present for sizes larger than 400x350px Not present for sizes smaller than 400x350px Not present. Panning is accomplished by touch. Not present. Panning is accomplished by touch.
MapType Horizontal Bar for screens 300px wide and larger Dropdown for screens smaller than 300px wide Same as Large/Small Screens Same as Large/Small Screens
Scale Not present Not present Not present Not present

Disabling the Default UI 清楚所默认UI控件

你可以通过设置disableDefaultUI: true来清除地图上所有的默认UI控件,例如:

	    var mapOptions = {
            zoom: 4,
            center: new google.maps.LatLng(-33, 151),
            disableDefaultUI: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
	  

Adding Controls to the Map

这些控件的设置都很简单,通过设置true或者false,来显示或者不显示,调用代码如下:

	  var mapOptions = {
	      panControl: true,
		  zoomControl: true,
		  mapTypeControl: true,
		  scaleControl: true,
		  streetViewControl: true,
		  rotateControl:true,
		  overviewMapControl: true  
	  };	
	  

这些控件中,streetViewControl是V3.0版本才有的,而且目前中国地区不支持街景视图的地图导航。所以中国地图中,streetViewControl的那个小人图标是灰色,不可以使用的。

Control Options 地图控件配置选项

Google地图中,有几个控件是可以配置的,你可以通过设置他们的配置信息,控制他们的外观。例如Zoom control控件,就可以通过设置zoomControlOptions配置项配置。

zoomControlOptions 设置zoomControl控件的样式

在我整理的API代码中,把google地图的zoomControlOptions属性拷贝了一份,代码如下:

	    /**
		 * 地图缩略级别控件样式属性
		 * 
		 * @property zoomControlOptions
		 * =================================================================
		 * SMALL   - 显示最小尺寸的控件,没有中间的拖动条,只有加减按钮了
         * LARGE   - 带有缩放拖动条的完整控件
         * DEFAULT - 根据地图显示区域的大小自动选择是SMALL还是LARGE
         * =================================================================
         * @example
         * <pre>
         * <code>
         * var mapOptions = {
		 *     zoomControlOptions: {
		 * 	       style: GMap3.ZoomControlStyle.SMALL
		 *     }
		 * }
         * </code>
         * </pre>
		 */
		ZoomControlStyle: {
			SMALL: google.maps.ZoomControlStyle.SMALL,
			LARGE: google.maps.ZoomControlStyle.LARGE,
			DEFUALT: google.maps.ZoomControlStyle.DEFUALT
		}
	  

相信我代码注释中已经写的十分清晰了,你可以根据自己的需要设置。Zoom Control默认是自己根据地图显示区域的尺寸选择SMALL或者LARGE。

Map Type 设置 mapTypeControlOptions 配置地图类型控件的样式

没有太多好介绍的具体的设置方法代码如下:

	    var mapOptions = {
		    mapTypeControlOptions: {
			    style: GMap3.MapTypeControlStyle.DEFAULT
			}
		};	
	  

同样,我把MapTypeControlStyle属性(对象)也拷贝了一份:

	    /**
		 * 地图类型控件样式属性
		 * 
		 * @property MapTypeControlStyle 
		 * =================================================================
         * HORIZONTAL_BAR - 横向的两个按钮
         * DROPDOWN_MENU  - 下拉菜单样式
         * DEFAULT        - 根据地图尺寸自动调整是HORIZONTAL_BAR或是DROPDOWN_MENU
		 * =================================================================
		 */
		MapTypeControlStyle: {
			HORIZONTAL_BAR: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
			DROPDOWN_MENU: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
			DEFAULT: google.maps.MapTypeControlStyle.DEFAULT
		}	
	  

Control Positioning 控件位置:

	    /**
		 * 地图控件位置属性
		 * 
		 * @property ControlPosition
		 */
		ControlPosition: {
			TOP_CENTER: google.maps.ControlPosition.TOP_CENTER,
			TOP_LEFT: google.maps.ControlPosition.TOP_CENTER,
			TOP_RIGHT: google.maps.ControlPosition.TOP_RIGHT,
			LEFT_TOP: google.maps.ControlPosition.LEFT_TOP,
			RIGHT_TOP: google.maps.ControlPosition.RIGHT_TOP,
			LEFT_CENTER: google.maps.ControlPosition.LEFT_CENTER,
			RIGHT_CENTER: google.maps.ControlPosition.RIGHT_CENTER,
			LEFT_BOTTOM: google.maps.ControlPosition.LEFT_BOTTOM,
			RIGHT_BOTTOM: google.maps.ControlPosition.RIGHT_BOTTOM,
			BOTTOM_CENTER: google.maps.ControlPosition.BOTTOM_CENTER,
			BOTTOM_LEFT: google.maps.ControlPosition.BOTTOM_LEFT,
			BOTTOM_RIGHT: google.maps.ControlPosition.BOTTOM_RIGHT
		}
	  

位置属性,看看名称就知道这些位置是地图的哪些位置了,不过我还是给出google提供的图片:

var mapOptions = {
    zoom: 12,
    center: GMap3.LatLng(-28.643387, 153.612224),
    mapTypeId: GMap3.MapTypeId.ROADMAP,
    mapTypeControl: true,
    mapTypeControlOptions: {
        style: GMap3.MapTypeControlStyle.HORIZONTAL_BAR,
        position: GMap3.ControlPosition.BOTTOM_CENTER
    },
    panControl: true,
    panControlOptions: {
        position: GMap3.ControlPosition.TOP_RIGHT
    },
    zoomControl: true,
    zoomControlOptions: {
        style: GMap3.ZoomControlStyle.LARGE,
        position: GMap3.ControlPosition.LEFT_CENTER
    },
    scaleControl: true,
    scaleControlOptions: {
        position: GMap3.ControlPosition.TOP_LEFT
    },
    streetViewControl: true,
    streetViewControlOptions: {
        position: GMap3.ControlPosition.LEFT_TOP
    }
};
  
var map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
	  

到这里,的Map Options选项配置相关内容就介绍完了。

调用方法

第一步:在页面中加载google map API和gmap3.js文件

           <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=YOURKEY&sensor=true&libraries=drawing">&lt/script> 
           <script type="text/javascript" src="js/gmap3.js">&lt/script> 
      	   

第二步:调用GMap3方法,创建地图

// 基本地图
(function(){
    // 地图配置信息
    var mapOptions = {
        // 地图中心点(武汉市)
        center: GMap3.LatLng(baseLat, baseLng),
        // 地图缩放级别
        zoom: 8,
		zoomControl: true,
		zoomControlOptions: {
            style: GMap3.ZoomControlStyle.SMALL
        },
        // 地图类型:ROADMAP - 普通地图
        mapTypeId: GMap3.MapTypeId.ROADMAP,
		mapTypeControlOptions: {
            style: GMap3.MapTypeControlStyle.DEFAULT
        }
		panControl: true,
		mapTypeControl: true,
	    scaleControl: true,
		streetViewControl: true,
		overviewMapControl: true 
    };
    // 创建地图
    var map = GMap3.Map('basic-map', mapOptions);
})();
      	   

声明:本文采用BY-NC-SA协议进行授权。转载请注明转自:Google Map API 整理 – 创建基本的地图

« »

2 条评论

  • 如何通过鼠标点击 获取点击的经纬度?

  • 我一直觉得Google Map是最好用的地图服务了,这里整理出来,也方便其他需要的朋友一起研究。API的讲解组织结构基本还是按照Google官方的内容翻译整理的。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(Spamcheck Enabled)