`
ponlya
  • 浏览: 165367 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

GoogleMap V3 叠加层与图标等

    博客分类:
  • maps
 
阅读更多

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

叠加层
    与地图上与纬度/经度坐标绑定的对象,会随您拖动或缩放地图而移动。叠加层表示的是“添加”到地图中以标明点、线、区域或对象集合的对象。
几种叠加层
    地图上的单个位置是使用标记显示的。标记有时可显示自定义的图标图片,这种情况下标记通常被称为“图标”。标记和图标是 Marker 类型的对象。
    地图上的线是使用折线(表示一系列按顺序排列的位置)显示的。线是 Polyline 类型的对象。
    地图上的不规则形状区域是使用多边形(类似于折线)显示的。与折线相同的是,多边形也是由一系列按顺序排列的位置构成的;不同的是,多边形定义的是封闭区域。
    地图图层可使用叠加层地图类型显示。您可以通过创建自定义地图类型来创建自己的图块集,自定义地图类型可取代基本地图图块集,或作为叠加层显示在现有基本地图图块集之上。
    信息窗口也是特殊类型的叠加层,用于在指定地图位置上方的弹出式气泡框内显示内容(通常是文字或图片)。
    可以实现自己的自定义叠加层。这些自定义叠加层可实现 OverlayView 接口。

Symbol 是基于矢量的图片,可显示在 Marker 或 Polyline 对象上。
    符号是通过路径(使用 SVG 路径表示法)和一些用于控制符号显示方式的选项来定义的。一些预定义符号可通过 SymbolPath 类提供。 path 是唯一必需的属性,而 Symbol 类支持多种属性,可让您自定义显示方面的设置(例如笔触、填充颜色和粗细)。
    Symbol 类支持以下属性。请注意,显示在标记和折线上的 Symbol 的行为会略有不同。
        path(必填),表示用于定义符号形状的路径。可以使用 google.maps.SymbolPath 中预定义的某个路径,也可以使用 SVG 路径表示法定义自定义路径。注意:折线上的矢量路径不得超过 22x22 像素的方形范围。如果您的路径中包含超出此范围的点,那么您必须将 scale 属性调整为分数值(如 0.2),以使调整后的点处于该方形范围内。
        anchor,表示符号相对于标记或折线的位置。符号路径的坐标分别由锚定点的 x 坐标和 y 坐标向左和向上进行转换。默认情况下,符号锚定在 (0, 0)。表示该位置的坐标系与符号路径的坐标系相同。
        fillColor,表示符号的填充色。支持所有 CSS3 颜色,扩展命名的颜色除外。对于符号标记,默认颜色为“黑色”。对于折线上的符号,默认颜色为相应折线的笔触颜色。
        fillOpacity,以 0 到 1 之间的数字表示符号填充的透明度。默认值为 0。
        rotation,以顺时针的读数表示旋转符号的角度。默认情况下,符号标记的旋转角度为 0,而折线上的符号按其所在一边的角度旋转。设置折线上符号的旋转会固定符号的旋转,这样符号就不会再沿着曲线移动了。
        scale,表示符号大小缩放的数值。对于符号标记,默认值为 1;符号在缩放后可能为任意大小。对于折线上的符号,默认值为折线的笔触粗细;经过缩放后,符号必须位于 22x22 像素的方形范围内(以符号的锚定点为中心)。
        strokeColor,表示符号的笔触颜色。支持所有 CSS3 颜色,扩展命名的颜色除外。对于符号标记,默认颜色为“黑色”。对于折线上的符号,默认颜色为折线的笔触颜色。
        strokeOpacity,以 0 到 1 之间的数字表示符号笔触的透明度。对于符号标记,默认值为 1。对于折线上的符号,默认透明度为折线的透明度。
        strokeWeight,表示符号的笔触粗细。默认值为符号的 scale。
   
    内置符号,可在标记或折线上显示。默认符号包含一个圆形和两种箭头。由于折线上符号的方向是固定的,因此向前和向后的箭头都可以使用。向前是指折线的终点方向。
        google.maps.SymbolPath.CIRCLE     圆形。    
        google.maps.SymbolPath.BACKWARD_CLOSED_ARROW     各边封闭的向后箭头。    
        google.maps.SymbolPath.FORWARD_CLOSED_ARROW     各边封闭的向前箭头。    
        google.maps.SymbolPath.BACKWARD_OPEN_ARROW     一边开放的向后箭头。    
        google.maps.SymbolPath.FORWARD_OPEN_ARROW     一边开放的向前箭头。
   
    动画
        可以对标记添加动画效果,以便它们在各种不同的环境中展现动态活动。
        标记的 animation 属性(类型为 google.maps.Animation)中指定了用于为标记添加动画的方法。系统目前支持以下 Animation 值:
            DROP,用于表示标记在首次放置于地图上时,应当从地图顶端落到目标位置。动画将会随着标记的停止而结束,且 animation 将会还原为 null。通常,此类动画会在创建 Marker 的过程中进行指定。
            BOUNCE,用于表示标记应在相应的位置上“弹跳”。在将弹跳标记的 animation 属性明确设为 null 之前,该标记会不断弹跳。
        可以对 Marker 对象调用 setAnimation(),以对现有标记添加动画效果。
   
    复杂图标
        较为复杂的图标可用于指定复杂的形状(表示用户可点击的区域)、添加阴影图片以及指定这些形状相对于其他叠加层在显示时应采用的“堆叠顺序”。您应将以此方式指定的图标的 icon 和 shadow 属性设为 MarkerImage 类型的对象。
        阴影图片通常应该和主图片成 45 度夹角(向右上方倾斜),并且阴影图片的左下角应与图标图片的左下角对齐。阴影图片应该采用具有 alpha 透明度的 24 位 PNG 图片,以便图片边界可正确显示在地图上。
        MarkerImage 对象不仅可定义图片,还可定义图标的 size 和 origin(例如,如果您所需的图片是较大的拼合图片的一部分),以及应用于定位图标热点的 anchor(基于原点)。
   
    矢量图标
        标记支持光栅图片和矢量路径的显示,称为 Symbols。要显示矢量路径,将带有所需路径的 Symbol 对象常量传递到标记的 icon 属性。可以使用 google.maps.SymbolPath 中预定义的某个路径,也可以使用 SVG 路径表示法定义自定义路径。
        //https://developers.google.com/maps/documentation/javascript/reference?hl=zh-CN#SymbolPath
        BACKWARD_CLOSED_ARROW     A backward-pointing closed arrow.
        BACKWARD_OPEN_ARROW     A backward-pointing open arrow.
        CIRCLE     A circle.
        FORWARD_CLOSED_ARROW     A forward-pointing closed arrow.
        FORWARD_OPEN_ARROW     A forward-pointing open arrow.

 

简单示例

	<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function initialize() {
	var lanLng = new google.maps.LatLng(30.51667,114.31667); 
	var mapOptions = {
		zoom: 4,
		center: lanLng, 
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};

	var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
	
	//添加叠加层
	var marker = new google.maps.Marker({
		position: lanLng,
		title:"Marker!"
	});
	marker.setMap(map);
	
	var marker2 = new google.maps.Marker({
		position: new google.maps.LatLng(30.51667,130.31667),
		title:"Marker!"
	});
	marker2.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
	<div id="map-canvas"></div>
</body>

 官网对markers的显示隐藏

	<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
var markers = [];
function initialize() {
  var haightAshbury = new google.maps.LatLng(30.51667,114.31667);
  var mapOptions = {
    zoom: 3,
    center: haightAshbury,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  google.maps.event.addListener(map, 'click', function(event) {
    addMarker(event.latLng);
  });
}

// Add a marker to the map and push to the array.
function addMarker(location) {
  var marker = new google.maps.Marker({
    position: location,
    map: map
  });
  markers.push(marker);
}

// Sets the map on all markers in the array.
function setAllMap(map) {
  for (var i = 0; i < markers.length; i++) {
    markers[i].setMap(map);
  }
}

// Removes the overlays from the map, but keeps them in the array.
function clearOverlays() {
  setAllMap(null);
}

// Shows any overlays currently in the array.
function showOverlays() {
  setAllMap(map);
}

// Deletes all markers in the array by removing references to them.
function deleteOverlays() {
  clearOverlays();
  markers = [];
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="panel">
<input onclick="clearOverlays();" type=button value="Hide Overlays">
<input onclick="showOverlays();" type=button value="Show All Overlays">
<input onclick="deleteOverlays();" type=button value="Delete Overlays">
</div>
<div id="map-canvas"></div> 
</body>

 复杂例子

	<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>

function initialize() {
	var lanLng = new google.maps.LatLng(30.51667,114.31667); 
	var mapOptions = {
		zoom: 4,
		center: lanLng, 
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};

	var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
	
	var goldStar = {
	  path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z',
	  fillColor: "yellow",
	  fillOpacity: 0.8,
	  scale: 1,
	  strokeColor: "gold",
	  strokeWeight: 14
	};

	//添加叠加层
	var marker = new google.maps.Marker({
		position: lanLng,//(必填),用于指定可标识标记初始位置的 LatLng。
		//mpa : , //(可选),用于指定要在其上设置标记的 Map 对象。如果未指定此参数,就只能创建标记,而无法将其附加到地图上(或在地图上显示)可以调用标记的 setMap() 方法以添加该标记。要移除标记,请调用 setMap() 方法并传递 null 作为其参数。
		icon:goldStar,
		animation: google.maps.Animation.DROP,
		title:"Marker!"
	});
	marker.setMap(map);
	google.maps.event.addListener(marker, 'click', toggleBounce);
	function toggleBounce() {
		if (marker.getAnimation() != null) {
			marker.setAnimation(null);
		} else {
			marker.setAnimation(google.maps.Animation.BOUNCE);
		}
	}
	
	var marker2 = new google.maps.Marker({
		position: new google.maps.LatLng(30.51667,130.31667),
		title:"Marker!"
	});
	setTimeout(function() {
      marker2.setMap(map); //延时展示
    }, 2000);
 
	 
	var beachMarker = new google.maps.Marker({
	  position: new google.maps.LatLng(30.51667,120.31667),
	  map: map,
	  icon:'http://www.googlemapsmarkers.com/v1/009900/'
	});

	var image = new google.maps.MarkerImage('http://www.googlemapsmarkers.com/v1/A/0099FF/',
			// This marker is 20 pixels wide by 32 pixels tall.
			new google.maps.Size(20, 32),
			// The origin for this image is 0,0.
			new google.maps.Point(0,0),
			// The anchor for this image is the base of the flagpole at 0,32.
			new google.maps.Point(0, 32)
		);
	var shadow = new google.maps.MarkerImage(' http://www.googlemapsmarkers.com/v1/A/0099FF/FFFFFF/FF0000/',
			// The shadow image is larger in the horizontal dimension while the position and offset are the same as for the main image.
			new google.maps.Size(37, 32),
			new google.maps.Point(0,0),
			new google.maps.Point(0, 32)
		);
	// Shapes define the clickable region of the icon. The type defines an HTML <area> element 'poly' which  traces out a polygon as a series of X,Y points. The final coordinate closes the poly by connecting to the first coordinate.
	var shape = {
		coord: [1, 1, 1, 20, 18, 20, 18 , 1],
		type: 'poly'
	};

	 var markers = new google.maps.Marker({
        position: new google.maps.LatLng(30.51667,104.31667),
        map: map,
        shadow: shadow,
        icon: image,
        shape: shape,
        title: '测试image,shadow,shape',
        zIndex: 100
    });
 
	var marker2 = new google.maps.Marker({
		position:new google.maps.LatLng(32.51667,104.31667),
		icon: {
			path: google.maps.SymbolPath.FORWARD_OPEN_ARROW,//CIRCLE,
			scale: 10
		},
		draggable: true,
		title:'矢量图标',
		map: map
	});
	
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
	<div id="map-canvas"></div>
</body>

 

 

 

分享到:
评论

相关推荐

    GoogleMap V3 中文 教程

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

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

    谷歌地图 Google Map API V3 中提供了多种叠加层和地图类型,例如卫星图、街道图、ybrid 图等。开发者可以使用 OverlayView 对象和 MapType 对象来自定义叠加层和地图类型,以便在地图上显示不同的视图。 十、图层 ...

    Google_MapsAPI_V3_叠加层

    总的来说,Google Maps API V3 提供了丰富的叠加层功能,使得开发者可以构建功能强大且互动性强的网络地图应用。通过熟练掌握叠加层的使用,你可以创建出具有个性化地图元素和丰富交互性的地图项目,为用户提供独特...

    google Map api v3学习例子

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

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

    叠加层和地图类型是 Google Maps API V3 中的一种重要组件,用于在地图上叠加其他数据层。开发者可以使用 OverlayView 对象来配置叠加层的基本属性,如透明度、可见性等。MapType 对象提供了多种地图类型,如普通...

    GOOGLE MAPS API V3

    总之,Google Maps JavaScript API V3 提供了丰富的功能来创建和管理地图上的叠加层,包括标记、图标、折线和多边形等,让开发者能够构建出高度定制化的地图应用。通过熟练掌握这些知识点,开发者可以为用户提供更加...

    google Maps JavaScript API V3 参考

    Google Maps JavaScript API V3 是一个强大的工具,允许开发者在网页上集成交互式地图。这个API提供了丰富的功能,包括创建和自定义地图、添加各种控件、叠加层、服务以及地图类型,以满足不同应用场景的需求。 1. ...

    Google_Maps_API_V3.docx

    以上只是Google Maps API V3的部分功能介绍,实际上,该API还支持地理编码、路径规划、覆盖物管理、事件处理等更多高级功能,使得开发者可以构建出各种各样的地图应用。在实际开发中,结合官方文档和示例代码,可以...

    谷歌MAP API_V3.pdf

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

    Google_Maps_API_V3

    ### Google Maps API V3:深度解析与应用指南 Google Maps API V3,即Google地图JavaScript API的第三版,标志着Google地图服务在Web开发领域的重要里程碑。这一版本自2010年6月15日发布以来,凭借其强大的功能、...

    Google_Maps_JavaScript_API_V3_教程及基础知识等

    Google Maps JavaScript API V3 是一个强大的工具,允许开发者在网页上集成交互式地图功能。这个API提供了丰富的功能,包括地图显示、标记定位、路线规划、地理编码以及自定义图层等。本文将详细介绍如何使用V3版本...

    谷歌地图开发教程

    6. **叠加层(Overlays)**:除了标记,还可以添加其他类型的叠加层,如信息窗口(InfoWindows)、折线(Polylines)、多边形(Polygons)、热力图(Heatmaps)等,以增强地图的可视化效果。 7. **轨迹回放(Paths...

    googelMapAPI3

    8. **叠加层和地图类型**:`OverlayView`是创建自定义地图覆盖物的基类,`MapType`和`MapTypeRegistry`用于管理不同的地图类型。`ImageMapType`和`StyledMapType`则允许你自定义地图的显示样式。 9. **图层**:`...

    谷歌地图APIV3中文文档

    谷歌地图API V3中文文档 谷歌地图API V3是谷歌地图提供的JavaScript API版本,用于开发基于Web的地图应用程序。该API提供了丰富的功能和工具,帮助开发者创建自己的地图应用程序。 Map * MapOptions:用于设置...

Global site tag (gtag.js) - Google Analytics