`
xiaoboss
  • 浏览: 650041 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

google map api V3

阅读更多

google map api V3 官方地址

需要引入script标签

<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.1&sensor=false&language=cn ">

一段加入地图的代码

<body>
<div id="cc" style="width: 400px; height: 400px"></div>
<mce:script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.1&sensor=false&language=cn" mce_src="http://maps.google.com/maps/api/js?v=3.1&sensor=false&language=cn"></mce:script>
<mce:script type = "text/javascript"><!--
(function(win,doc,undefined){
	var gMap     = google.maps,
		myLatlng = new gMap.LatLng(22.53821,113.9198),
		myOptions = {
			zoom      : 13,
			center    : myLatlng,
			mapTypeId : gMap.MapTypeId.ROADMAP
		};
	map = new gMap.Map(document.getElementById('cc'), myOptions);
})(window,document);	
// --></mce:script>
</body>
 

new google. maps . LatLng (myLatitude , myLongitude )  是设置地图精度纬度的

构建一个 LatLng 对象,以 {纬度, 经度} 的顺序传递其参数:

myOptions 配置项  zoom 大小级别    center 中心的位置  就是前面创造出的对象 

 

mapTypeId   支持4个类型

new google.maps.Map (document.getElementById('cc'), myOptions)

创建地图类  第一个参数是容器元素  第二个参数是配置

地图事件

用户事件                 (其实就是鼠标操作时候的事件)

  • 'click'
  • 'dblclick'
  • 'mouseup'
  • 'mousedown'
  • 'mouseover'
  • 'mouseout'
  • 地图事件

  • zoom_changed
  • center_changed
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>ready</title>
    <style type="text/css">
    .cc{height:20px; width:250px; background-color:#993300}
    </style>
    </head>
    <body>
    <div id="cc" style="width: 400px; height: 400px"></div>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.1&sensor=false&language=cn"></script>
    <script type = "text/javascript">
    (function(win,doc,undefined){
    	var gMap      = google.maps,
    		uuuid     = 1,
    		myLatlng  = new gMap.LatLng(22.53821,113.9198),
    		myOptions = {
    			zoom               : 13,
    			center             : myLatlng,
    			mapTypeId          : gMap.MapTypeId.ROADMAP
    		},
    		map = new gMap.Map(document.getElementById('cc'), myOptions);
    	
    	//marker 是标记
    	var marker = new gMap.Marker({
    		position : myLatlng,
    		map      : map,
    		title    : "hello BeiJu!"
    	});
    	
    	gMap.event.addListener(marker,'click',function(){
    		map.setZoom(8);	
    	});
    
    	gMap.event.addListener(map,'click',function(event){
    			new gMap.Marker({
    				position : event.latLng,
    				map      : map,
    				title    : '新增加标注!'
    			});
    		map.setCenter(event.latLng);	
    	});
    	
    	var zoomLevel,
    		infoWindow = new gMap.InfoWindow({
    			content  : 'Zoom Level Test',
    			size     : new gMap.Size(50,50),
    			position : myLatlng 
    		});
    	infoWindow.open(map);
    	
    	gMap.event.addListener(map,'zoom_changed',function(){
    		zoomLevel = map.getZoom();
    		infoWindow.setContent("当前Zoom:"+zoomLevel);
    		if(zoomLevel===6){
    			alert('6le')
    			map.setZoom(13);
    		}	
    	});		
    	
    })(window,document);
    	
    </script>
    </body>
    </html>
     

    控件

    导航控件 可显示为以下 style 选项之一:

    • google.maps.NavigationControlStyle.SMALL ,用于显示迷你缩放控件,其中仅限 按钮。此样式适用于移动设备。
    • google.maps.NavigationControlStyle.ZOOM_PAN ,用于显示如 Google Maps 中所示带有平移控件的标准缩放滑块控件。
    • google.maps.NavigationControlStyle.ANDROID ,用于显示 Android 设备上的本地 Google Maps 应用程序中所使用的小型缩放控件。
    • google.maps.NavigationControlStyle.DEFAULT ,会根据地图的尺寸和运行地图的设备挑选合适的导航控件。

    MapType 控件 可显示为以下 style 选项之一:

    • google.maps.MapTypeControlStyle.HORIZONTAL_BAR ,用于在水平栏中将一组控件显示为如 Google Maps 中所示按钮。
    • google.maps.MapTypeControlStyle.DROPDOWN_MENU ,用于显示单个按钮控件,以便您从下拉菜单中选择地图类型。
    • google.maps.MapTypeControlStyle.DEFAULT ,用于显示“默认”的行为,该行为取决于屏幕尺寸,并且可能会在 API 以后的版本中有所变化。

    请注意,如果您确实想要修改任何控件选项,您还是应当通过将 MapOptions 值设置为 true 以显式地启用相应的控件。

    修改控件

    您可以在创建地图时通过地图的 MapOptions 对象中的字段指定控件的显示。下面对这些字段进行了说明:

    • mapTypeControl 可启用/停用“地图类型”控件,该控件允许用户在地图类型(如“地图”和“卫星”)之间切换。默认情况下,此控件将显示在地图右上角。mapTypeControlOptions 字段可进一步指定要用于此控件的 MapTypeControlOptions
    • navigationControl 可启用/停用“导航”控件,该控件可提供一个平移/缩放控件。默认情况下,此控件将显示在地图左上角。navigationControlOptions 字段可进一步指定要用于此控件的 NavigationControlOptions
    • scaleControl 可启用/停用“比例”控件,该控件可提供一个简单的地图比例尺。默认情况下,不会显示此控件。启用后,它将显示在地图的左下角。scaleControlOptions 可进一步指定用于此控件的 ScaleControlOptions

    请注意,您可以为您最初停用的控件指定选项。

    控件定位

    每个控件选项都包含一个 position 属性(类型为 ControlPosition ),它指明要在地图上放置该控件的位置。控件的定位并不是绝对的;相反,API 会在给定的约束条件(如地图大小)下,通过围绕现有地图元素或其他控件“流动”控件以智能方式布局控件。注意: 虽然 API 会尝试以智能方式排列控件,但这并不能保证控件不会叠加指定的复杂布局。

    系统支持以下控件位置:

    • TOP 表示控件应沿着地图顶部中心放置。
    • TOP_LEFT 表示控件应沿着地图顶部左侧放置,控件的任何子元素“流”向顶部中心。
    • TOP_RIGHT 表示控件应沿着地图顶部右侧放置,控件的任何子元素“流”向顶部中心。
    • BOTTOM 表示控件应沿着地图底部中心放置。
    • BOTTOM_LEFT 表示控件应沿着地图底部左侧放置,控件的任何子元素“流”向底部中心。
    • BOTTOM_RIGHT 表示控件应沿着地图底部右侧放置,控件的任何子元素“流”向底部中心。
    • LEFT 表示控件应沿着地图左侧放置,位于使用 TOP_LEFT 定位方法放置的任何元素之下,控件的任何子元素“流”向底部。
    • RIGHT 表示控件应沿着地图右侧放置,位于使用 TOP_RIGHT 定位方法放置的任何元素之下,控件的任何子元素“流”向底部。
  • bounds_changed
  • ROADMAP ,用于显示 Google Maps 默认的普通二维图块。
  • SATELLITE ,用于显示拍摄的图块。
  • HYBRID ,用于同时显示拍摄的图块和突出特征(道路、城市名)图块层。
  • TERRAIN ,用于显示自然地形图块,自然地形图块中会显示高度和水体特征(山脉、河流等)。
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>ready</title>
    <style type="text/css">
    .cc{height:20px; width:250px; background-color:#993300}
    </style>
    </head>
    <body>
    <div id="cc" style="width: 400px; height: 400px"></div>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.1&sensor=false&language=cn"></script>
    <script type = "text/javascript">
    (function(win,doc,undefined){
    	var gMap      = google.maps,
    		uuuid     = 1,
    		myLatlng  = new gMap.LatLng(22.53821,113.9198),
    		myOptions = {
    			zoom               : 13,
    			center             : myLatlng,
    			//取消默认控件设置
    			//disableDefaultUI : true,
    			//导航控件的初始启用/停用状态
    			//navigationControl  : true,
    			//缩放控件的初始启用/停用状态。
    			//scaleControl       : false,
       		 	navigationControl  : true,
    			//小缩放按钮
    			navigationControlOptions: {
    				style    : google.maps.NavigationControlStyle.SMALL,
    				position : google.maps.ControlPosition.TOP_RIGHT 
    			},
        		mapTypeControl     : true,     
    			//地图类型可选形式
    			mapTypeControlOptions: {
    				style    : google.maps.MapTypeControlStyle.DROPDOWN_MENU,
    				position : google.maps.ControlPosition.BOTTOM 
    			},			 			
    			mapTypeId          : gMap.MapTypeId.ROADMAP
    		},
    		map = new gMap.Map(document.getElementById('cc'), myOptions);
    
    })(window,document);
    	
    </script>
    </body>
    </html>
     

    自定义控件

    除了修改现有 API 控件的样式和位置外,您还可以创建自己的控件以处理与用户的交互操作。控件是固定的窗口小部件,浮动在地图之上的绝对位置处;这与“叠加”不同,后者会随下面的地图一起移动。 从本质上讲,控件只是一个在地图上具有绝对位置的 <div> 元素,它会向用户显示某个用户界面,并处理与用户或地图的交互(通常通过某个事件处理程序)。

    要创建您自己的自定义控件,没有什么需要遵循的“规则”。不过,您可以将以下指导原则视为最佳实践的参考:

    • 为要显示的控件元素定义适当 CSS。
    • 针对地图属性更改或用户事件(如 'click' 事件),通过事件处理程序处理与用户或地图的交互。
    • 创建一个 <div> 元素以承载控件并将此元素添加到 Mapcontrols 属性中。

    处理自定义控件的事件

    要使控件有用,它必须能够实际完成某些任务。控件的用途由您确定。控件可以响应用户输入,也可以响应 Map 的状态变化。

    对于响应用户输入,Google Maps API 提供了一个跨浏览器的事件处理方法 addDomListener() ,它可以处理浏览器的多数支持的 DOM 事件

    定位自定义控件

    要在地图上定位自定义控件,您可以在 Map 对象的 controls 属性中将其放在适当位置。此属性包含一个 google.maps.ControlPosition 数组。您可以通过将 Node (通常是 <div> )添加至适当 ControlPosition 向地图中添加自定义控件。(有关这些位置的信息,请参见上面的控件定位 。)

    每个 ControlPosition 会存储一个显示在该位置的控件的 MVCArray 。因此,当您向该位置添加或从中删除控件时,API 将相应更新控件。

    API 按照 index 属性的顺序将控件放在每个位置,并会首先放置索引值较低的控件。例如,位置 BOTTOM_RIGHT 处的两个自定义控件将按照此索引顺序进行排列,并优先放置索引值较低的控件。默认情况下,所有自定义控件将在放置完任何 API 默认控件之后进行放置。 您可以通过将控件的 index 属性设置为一个负值覆盖此行为。请注意,如果希望在放置相同位置的默认 API 控件“之前”放置您的控件,通常只需设置一个索引值。

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>ready</title>
    <style type="text/css">
    .cc{height:20px; width:250px; background-color:#993300}
    </style>
    </head>
    <body>
    <div id="cc" style="width: 400px; height: 400px"></div>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.1&sensor=false&language=cn"></script>
    <script type = "text/javascript">
    (function(win,doc,undefined){
    	var gMap      = google.maps,
    		uuuid     = 1,
    		myLatlng  = new gMap.LatLng(22.53821,113.9198),
    		myOptions = {
    			zoom               : 13,
    			center             : myLatlng,
    			//小缩放按钮
    			navigationControlOptions: {
    				style    : google.maps.NavigationControlStyle.SMALL,
    				position : google.maps.ControlPosition.TOP_RIGHT 
    			},
        		mapTypeControl     : true,     
    			//地图类型可选形式
    			mapTypeControlOptions: {
    				style    : google.maps.MapTypeControlStyle.DROPDOWN_MENU,
    				position : google.maps.ControlPosition.BOTTOM 
    			},			 			
    			mapTypeId          : gMap.MapTypeId.ROADMAP
    		},
    		map = new gMap.Map(document.getElementById('cc'), myOptions);
    		
    		var div = document.createElement('div');
    		div.className = 'cc';
    		div.innerHTML = 'beijubeiju..';
    		
    		gMap.event.addDomListener(div,'click',function(){
    			map.setZoom(15);
    		});
    		
    		div.index = 1;
    		map.controls[google.maps.ControlPosition.TOP_RIGHT].push(div);
    
    })(window,document);
    	
    </script>
    </body>
    </html>
     OverlayView

    自定义叠加层

    Google Maps API 第 3 版提供了用于创建自定义叠加层的 OverlayView 类。OverlayView 是一个基类,提供了您在创建叠加层时必须实现的若干方法。该类还提供了一些方法,用于实现屏幕坐标和地图位置之间的转换。

    要创建自定义叠加层,请执行以下操作:

    • 将自定义对象的 prototype 设置为 google.maps.OverlayView() 的新实例。这可以有效地实现叠加层类的“子类化”。
    • 为自定义叠加层创建构造函数,并将该构造函数中的所有初始化参数都设置为自定义属性。
    • 在原型中实现 onAdd() 方法,以将叠加层附加到地图上。当地图准备好附加叠加层后,系统将会调用 OverlayView.onAdd()
    • 在原型中实现 draw() 方法,以处理对象的视觉显示。同样,在对象首次显示后,系统将会调用 OverlayView.draw()
    • 您还应当实现 onRemove() 方法,以清理在叠加层中添加的所有元素。

    一个简单的例子.................

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>ready</title>
    <style type="text/css">
    .cv{height:250px; width:250px; background-color: #CCFFCC}
    </style>
    </head>
    <body>
    <div id="cc" style="width: 680px; height: 680px"></div>
    
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.1&sensor=false&language=cn"></script>
    <script type = "text/javascript">
    	function custom(map,text,latLng){
    		this.map    = map;
    		this.text   = '<div class="cv">' + text + '</div>';
    		this.latLng = latLng;
    		this.div    = null;		
    		// Explicitly call setMap() on this overlay   
    		this.setMap(map);
    	};
    	custom.prototype = new google.maps.OverlayView();
    	custom.prototype.onAdd = function(){
    		this.div = document.createElement('div');		
    		this.div.style.position = 'absolute';
    		this.div.innerHTML = this.text;
    		this.getPanes().overlayLayer.appendChild(this.div);
    	};
    	custom.prototype.draw = function(){
    		var latLng = this.getProjection().fromLatLngToDivPixel(this.latLng),
    			size   = new google.maps.Size(0,0);
    		this.div.style.left = latLng.x + size.width  + 'px'; 
    		this.div.style.top  = latLng.y + size.height + 'px';			
    	};
    	custom.prototype.onRemove = function(){
    		this.div.parentNode.removeChild(this.div)
    		this.div = null;	
    	};
    	
    window.onload = function(){
    	var myLatlng = new google.maps.LatLng(22.56821,113.9198),
    		myOptions = {
    			zoom: 13,
    			center: myLatlng,
    			mapTypeId: google.maps.MapTypeId.ROADMAP,
    		},
    		map = new google.maps.Map(document.getElementById("cc"), myOptions);
    	
    	new google.maps.Marker({
    	  position : myLatlng,
    	  map      : map,
    	  title    : "Hello World!"
    	});
    	
    	new  custom(map,'<div class="cv">我擦....</div>',myLatlng);
    };		
    </script>
    </body>
    </html>
     划线
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>google map</title>
    <style type="text/css">
    .cc{height:100px; width:100px; border:1px solid #666666; background-color:#FFFF66;}
    .tip{width:350px;height:196px;background-image:url(tip.png); color:#FFF; padding:20px 0 0 20px;}
    body{font-size:12px;}
    </style>
    </head>
    <body>
    <div id="ff" style="width: 400px; height: 350px"></div>
    <script type="text/javascript" src="jquery-1.3.2.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.1&sensor=false&language=cn"></script>
    <script type = "text/javascript">
    (function(doc,undefined){
    	var win  = this,
    		gMap = win.google.maps,
    		map  = new gMap.Map(doc.getElementById('ff'),{
    			zoom      : 13,
    			center    : new gMap.LatLng(22.53821,113.9198),
    			mapTypeId : gMap.MapTypeId.ROADMAP
    	
    		});
    		new gMap.Polyline({
    			path : [
    				new gMap.LatLng(22.56821,113.9198),
    				new gMap.LatLng(22.54821,113.9298),
    				new gMap.LatLng(22.52821,113.9158),
    				new gMap.LatLng(22.50821,113.9258)
    			],
    			strokeColor   : '#000000',
    			strokeOpacity : 1.0,
    			strokeWeight  : 2
    		}).setMap(map);		
    })(document);
    </script>
    </body>
    </html>
    
     当前地图 整个容器经纬度操作
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    </head>
    <body>
    <div id="ff" style="width: 400px; height: 400px"></div>
    
    
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.1&sensor=false&language=cn"></script>
    <script type = "text/javascript">
    window.onload = function(){
    	var gMap      = google.maps, 
    		myLatlng  = new gMap.LatLng(22.53821,113.9198),
            myOptions = {   
    			zoom               : 13,			
    			center             : myLatlng,   
    			mapTypeId          : gMap.MapTypeId.ROADMAP   
            },
    		map = new gMap.Map(document.getElementById('ff'), myOptions),
    		getBounds;
    		setTimeout(function(){
    			getBounds = map.getBounds();
    			//右上角经纬度
    			var dot1  = getBounds.getNorthEast(),
    			//左下角经纬度
    				dot2  = getBounds.getSouthWest(),
    				stepX = ((dot1.ra*1000- dot2.ra*1000)/5)/1000,
    				stepY = ((dot1.sa*1000- dot2.sa*1000)/5)/1000,
    				i     =  0;	
    			//随机添加5个点	
    			while(i++<5){
    				new gMap.Marker({   
    					position : new gMap.LatLng(dot2.ra+stepX*i,dot2.sa+stepY*i),   
    					map      : map,   
    					title    : '生活中充满了悲剧!!'  
    				});  
    			}
    		},200);
    		
    		//如果客户不喜欢google map 自带的弹出框  想自己制作  
    		//但是自己制作弹出层  是不会自适应当前地图全部显示的  只是根据弹出层的大小 和 当前地图的 整个的位置 来计算了
    };
    </script>
    </body>
    </html>
    
     
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>google map</title>
    <style type="text/css">
    .cc{height:100px; width:100px; border:1px solid #666666; background-color:#FFFF66;}
    .tip{width:350px;height:196px;background-image:url(tip.png); color:#FFF; padding:20px 0 0 20px;}
    body{font-size:12px;}
    </style>
    </head>
    <body>
    <div id="ff" style="width: 400px; height: 350px"></div>
    <input type="button" value='aaaaaa' id='aa'>
    <script type="text/javascript" src="jquery-1.3.2.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.1&sensor=false&language=cn"></script>
    <script type = "text/javascript">
    (function(doc,undefined){
    	var win   = this,
    		gMap  = win.google.maps;
    
    	function customLayer(map,latLng){
    		this.map    = map;
    		this.latLng = latLng;
    		this.div    = null;
    		this.setMap(map);
    	};
    
    	customLayer.prototype = new gMap.OverlayView();
    	
    	$.extend(customLayer.prototype,{
    		onAdd : function(){
    			this.div = doc.createElement('div');			
    			this.div.style.position = 'absolute';
    			this.div.style.display  = "none";
    			this.getPanes().overlayLayer.appendChild(this.div);			
    		},
    		draw : function(latLng,html,size){
    			latLng = this.getProjection().fromLatLngToDivPixel(latLng||this.latLng);
    			size   = size || [0,0];
    			size   = new gMap.Size(size[0],size[1]);
    			this.div.style.left = latLng.x + size.width  + 'px'; 
    			this.div.style.top  = latLng.y + size.height + 'px';
    			if(!html||html.replace(/\s+/g,'')==='')
    				return;
    			this.div.innerHTML = html;
    		},
    		onRemove : function(){
    			if(!this.div)
    				return;
    			this.div.parentNode.removeChild(this.div)
    			this.div = null;	
    		},
    		show : function(){
    			this.div.style.display = "";
    			this.div.parentNode
    				&&(this.div.parentNode.style.zIndex  = "1000");
    		},
    		hide : function(){
    			this.div.style.display = "none";
    		}
    	});
    
    	win.vv = function(){
    		this.init.apply(this,arguments);
    	};
    
    	vv.prototype = {
    		init : function(container,LatLng,mapOptions){		
    			container = typeof container === 'string'
    				? $('#'+container)[0]
    				: container;
    			LatLng = LatLng || [22.53821,113.9198];	
    			mapOptions = $.extend({
    				zoom                     : 13,
    				center                   : new gMap.LatLng(LatLng[0],LatLng[1]),
    				navigationControl        : true,
    				navigationControlOptions : {
    					style  : google.maps.NavigationControlStyle.DROPDOWN_MENU
    				},			
    				mapTypeId                : gMap.MapTypeId.ROADMAP
    			},mapOptions || {});
    			//地图类
    			this.map        = new gMap.Map(container,mapOptions);
    			//自定义层			
    			this.tip        = new customLayer(this.map,new gMap.LatLng(LatLng[0],LatLng[1]));
    			//点击的弹出信息
    			this.popup       = new customLayer(this.map,new gMap.LatLng(LatLng[0],LatLng[1]));
    			
    			// onAdd方法会延迟执行的  所有这里也做一个延迟
    			var self = this;
    			setTimeout(function(){
    				self.popup.div.className ='tip';
    			},300);
    			
    			//定时器
    			this.timer      = null;
    			//当前经纬度
    			this.currLatLng = null;
    		},
    		//弹出的提示信息.........
    		popupShow  : function(html,latLng){
    			this.popup.draw(latLng,html,[-185,-216]);
    			this.popup.show();
    		},
    		tipShow : function(html,latLng){
    			//alert(latLng);
    			//如果当前经纬度存在
    			if(this.currLatLng !== null){
    				//当前经纬度等于现在的经纬度   则不进行操作
    				//如果不等于 关闭层
    				clearTimeout(this.timer);
    				this.timer = null;
    				if(this.currLatLng.ra !== latLng.ra||this.currLatLng.sa !== latLng.sa){
    					this.tip.hide();										
    					this.currLatLng = latLng;					
    					this.tip.draw(latLng,html);
    					this.tip.show();
    				}
    			}else{
    				this.currLatLng = latLng;				
    				this.tip.draw(latLng,html);
    				this.tip.show();
    			}
    		},
    		tipHide   : function(){
    			this.timer = setTimeout((function(oThis){
    				return function(){
    					oThis.tip.hide();
    					oThis.currLatLng = null;
    				};
    			})(this),500);			
    		},
    		setMarker  : function(options){
    			if(!options.latLng)
    				return;
    			var marker = new gMap.Marker({
    					position : new gMap.LatLng(options.latLng[0],options.latLng[1]),
    					map      : this.map,
    					icon     : options.imgSrc || 'm.gif'			
    				}),
    				self = this;
    			options.events&&options.events.length>0
    				&&$.each(options.events,function(i,o){
    					gMap.event.addListener(marker,o.event,function(){
    						o.handle.apply(self,[marker]);
    					});
    				});	
    		},
    		bind : function(type,handle){
    			if(!type || !handle)
    				return;
    			var self = this;	
    			gMap.event.addListener(this.map,type,function(){
    				handle.apply(self);
    			});
    		},
    		panTo : function(pos){
    			var latLng = this.map.getCenter();			
    			this.map.setCenter(new gMap.LatLng(latLng.ra + pos.left,latLng.sa + pos.top));
    		}
    	}	
    })(document);
    
    $(document).ready(function($){
    	var map = new vv('ff');
    	
    	$('#aa').bind('click',function(){
    		map.panTo({left:0.001,top:0.001})
    	});
    
    	map.bind('click',function(event){
    		this.popup.hide();
    	});
    	
    	var data = [
    		{
    			latLng : [22.56821,113.9198],
    			title  : '卖羊肉串......',
    			info   : '很多很多羊肉串啊,超级多........'
    		},
    		{
    			latLng : [22.54821,113.9298],
    			title  : '卖猪肉串......',
    			info   : '很多很多猪肉串啊,超级多........'
    		},
    		{
    			latLng : [22.52821,113.9158],
    			title  : '卖烧烤的......',
    			info   : '很多很卖烧烤串啊,超级多........'
    		},
    		{
    			latLng : [22.50821,113.9258],
    			title  : '卖冷饮的',
    			info   : '冰棒,雪糕,娃哈哈。。。。。。。。。。'
    		}							
    	];
    
    	$.each(data,function(i,o){
    		var latLng = new window.google.maps.LatLng(o.latLng[0],o.latLng[1]);
    		map.setMarker({
    			latLng : o.latLng,
    			title  : o.title,
    			events :[
    				{
    					event  : 'mouseover',
    					handle : function(marker){
    						this.tipShow('<div class="cc">' + o.title + '</div>',latLng);
    					}
    				},
    				{
    					event  : 'mouseout',
    					handle : function(marker){
    						this.tipHide();
    					}
    				},
    				{
    					event : 'click',
    					handle : function(){
    						this.popupShow(o.info,latLng);
    					}
    				}
    			]
    		})
    	});
    });	
    </script>
    </body>
    </html>
    
     
  • 分享到:
    评论

    相关推荐

      谷歌地图Google Map API V3中文开发文档

      谷歌地图 Google Map API V3 中文开发文档 谷歌地图 Google Map API V3 中文开发文档是 Google 公司提供的一种基于 Web 的地图应用程序接口,允许开发者在自己的网站或应用程序中嵌入谷歌地图,以提供地图检索、...

      google map api v3源码

      由于这个压缩包名为"WebMap",里面可能包含了一个简单的web应用,展示如何使用谷歌地图API V3来创建一个网页地图。开发者可以通过分析和学习这个源码,了解上述知识点的实际应用,并进一步扩展自己的地图应用开发...

      Google Map api V3 (3.9.12)的离线开发包

      Google Map API V3(3.9.12)是谷歌提供的一个用于在网页上嵌入交互式地图的服务,它是Google Maps JavaScript API的第三个主要版本。这个离线开发包允许开发者在没有网络连接的情况下进行地图应用的开发和测试,这...

      经典教程:JavaScript调用Google Map API V3

      JavaScript调用Google Map API V3是一项常见的Web开发任务,它允许开发者在网页中嵌入交互式地图,并根据需求进行自定义。以下是对这个经典教程的详细解析: 1. **目标** - 整个教程旨在教会读者如何利用...

      谷歌地图API-google map api v3

      ### 谷歌地图API V3 - 详细知识点解析 #### 概述 谷歌地图API V3(Google Maps API V3)是谷歌提供的一套强大的工具和服务集合,旨在帮助开发者在网页上集成交互式地图。它支持多种功能,如自定义地图样式、添加...

      google Map api v3学习例子

      通过这个"google Map api v3学习例子",你可以逐步掌握如何利用Google Maps API V3构建交互式地图应用,包括添加标记、处理事件、展示叠加层等功能。实践中不断探索,你会发现Google Maps API V3的强大和灵活性,能...

      google map api v3 ExtDraggableObject

      谷歌地图API V3是Google为开发者提供的一种强大的工具,用于在网页上集成和操作地图。在API中,`ExtDraggableObject`是一个自定义扩展类,它允许用户将地图上的对象(如标记、覆盖物等)进行拖放操作,极大地增强了...

      Google Map Api

      最新版的Google Map API是V3,它是一个基于JavaScript的API,具有高度可定制性和灵活性。 在Google Map API V3中,开发者可以实现以下主要功能: 1. **地图嵌入**:通过简单的HTML和JavaScript代码,可以在网页上...

      Google Maps API V3 中文参考文档(JavaScript)

      在 Google Maps API V3 中,Map 是地图的核心组件,提供了多种配置选项和事件监听器。开发者可以使用 MapOptions 对象来配置地图的基本属性,如中心点、缩放级别、地图类型等。同时,MapTypeId 对象提供了多种地图...

      谷歌MAP_V3中文详解以及一个简单例子

      谷歌地图API V3是Google提供的一套用于在网页上嵌入地图、进行地理位置处理的JavaScript接口。这个API允许开发者在自己的网站上创建交互式地图,包括但不限于定位、标记、信息窗口、路线规划等功能。本教程将对谷歌...

      Google_Maps_API_V3.rar_Google Maps api v3_谷歌地图

      Google Maps API V3 是谷歌为开发者提供的一个强大工具,用于在网站或应用程序中集成交互式地图功能。这个API允许开发人员自定义地图显示的内容、样式以及交互方式,从而构建出各种基于地理位置的应用。在Google ...

      GoogleMap V3 中文 教程

      Google Map V3是Google Maps API的一个重要版本,主要针对Web开发,提供了一整套用于在网页中集成地图、定位、路线规划等功能的工具。这个中文教程可以帮助开发者理解和运用V3版本的API,即便在无法访问互联网的情况...

      Google Map V3 API

      **Google Map V3 API**是谷歌提供的一种用于在网页中集成地图功能的接口,它允许开发者利用JavaScript语言创建交互式的地图应用。这个API是Google Maps API的第三个主要版本,提供了更多的功能、更好的性能以及更...

      google离线地图API包 + 地图数据

      Google Map API V3是Google提供的一个JavaScript库,用于在网页上嵌入交互式地图。这个API提供了丰富的功能,如定位、路线规划、地图缩放和平移等。在这个压缩包中,包含了使用Google Map API V3来实现离线地图的...

      googleMap V3 中文API

      谷歌地图JavaScript API V3是谷歌提供的用于在网页中嵌入交互式地图的服务。这个API允许开发者通过JavaScript编程语言创建各种地图应用,包括自定义标记、信息窗口、路线规划、地理编码、以及各种地图样式和控件。V3...

      Google Maps API V3 (开发必备)

      ### Google Maps API V3 开发必备知识点 #### 一、概览 Google Maps API V3 是一个强大的工具,允许开发者将交互式的谷歌地图嵌入到网页应用中。它提供了丰富的功能,包括自定义地图样式、添加标记、路线规划等。...

      谷歌MAP API_V3.pdf

      ### 谷歌Maps API V3 知识点解析 #### 一、概述 Google Maps JavaScript API V3 是一个强大的工具包,允许开发者在网页上嵌入交互式地图。此版本相比之前的版本提供了更多的功能和更好的性能。通过API,用户能够...

      Google Map API最新版本(V3)代码示例源码和教程

      Google Map API最新版本(V3)代码示例源码和教程,包括了添加地图、在地图上添加和自定义marker的内容、添加曲线和曲线的点击事件等最常用功能。详细教程请见:...

      介绍优秀Google Map API的网站

      Google Map API分为多个版本,目前最常用的是V3版本,该版本提供了更灵活、更强大的API接口。 ### 二、网站资源概述 #### 1. Kuqin.com关于Google Map API的文章 - **网址**: ...

    Global site tag (gtag.js) - Google Analytics