GoogleMap V3 叠加层与图标等

最新推荐文章于 2020-08-14 01:28:48 发布

原创最新推荐文章于 2020-08-14 01:28:48 发布 · 458 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

maps 专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了Google Maps API中叠加层的概念及应用，包括标记、折线、多边形、信息窗口等常见类型，以及如何使用Symbol类自定义图标。还提供了示例代码，展示了如何创建和配置自定义图标，以及动画、复杂图标和矢量图标的使用方法。

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>