Google Map 符号
符号
简介
如果您想在标记上使用基于矢量的图标,或者向多段线添加图像,便可使用符号。
标记支持使用光栅图像以及矢量图像。请参阅有关定制标记图标的文档。
Symbol
是一种可显示在 Marker
或 Polyline
对象上的基于矢量的图像。符号的形状由采用 SVG 路径标记法的路径定义。尽管 path
是唯一的必填属性,但 Symbol
对象还支持各类其他属性,您可以利用这些属性进行视觉方面(如描边和填充区颜色和粗细)的定制。请参阅下文的属性列表。
有几个预定义符号通过 SymbolPath
类提供。请参阅下文的列表。
符号的属性
请注意,Symbol
的默认行为视其出现在标记上还是多段线上而略有差异。下文的属性列表对这些差异做了说明。
Symbol
支持下列属性:
path
(必填项)是定义符号形状的路径。您可以使用google.maps.SymbolPath
中的某个预定义路径,或者利用 SVG 路径标记法定义一个自定义路径。注:多段线上的矢量路径必须能够容纳在一个 22x22px 方块内。如果您的路径包括位于该方块外的点,则必须将符号的scale
属性调整为某个小数值(如 0.2),以使生成的缩放点可容纳在该方块内。anchor
设置符号与标记或多段线的相对位置。符号路径的坐标按锚点的 x 坐标和 y 坐标分别向左和向上平移。默认情况下,符号锚定在(0, 0)
处。表示该位置与表示符号路径的坐标系相同。fillColor
是符号填充区(即描边划定区域)的颜色。支持所有 CSS3 颜色,扩展的已命名颜色除外。对于标记上的符号,默认值为“black”。对于多段线上的符号,默认值为相应多段线的描边颜色。fillOpacity
定义符号填充区的相对不透明度(即缺乏透明度)。取值范围是 0.0(全透明)至 1.0(全不透明)。默认值为 0.0。rotation
是符号的旋转角度,以顺时针度数表示。默认情况下,符号标记旋转角度为 0,多段线上的符号旋转角度为其所在边缘的角度。设置多段线上符号的旋转角度将在一定程度上固定符号的旋转角度,使得符号不再依循线的曲度。scale
设置符号的尺寸缩放大小。对于符号标记,默认缩放比例为 1。缩放后的符号可能为任意尺寸。对于多段线上的符号,默认缩放比例为多段线的描边粗细。缩放后的符号必须位于一个 22x22px 方块内,该方块以符号的锚点为中心。strokeColor
是符号轮廓的颜色。支持所有 CSS3 颜色,扩展的已命名颜色除外。对于标记上的符号,默认值为“black”。对于多段线上的符号,默认颜色为多段线的描边颜色。strokeOpacity
决定符号描边的相对不透明度(即缺乏透明度)。取值范围是 0.0(全透明)至 1.0(全不透明)。对于符号标记,默认值为 1.0。对于多段线上的符号,默认值为多段线的描边不透明度。strokeWeight
定义符号轮廓的粗细。默认值为符号的scale
。
预定义符号
Google Maps JavaScript API 提供了一些内置符号,您可以通过 SymbolPath
类向标记或多段线添加这些符号。
默认符号包括圆和两种类型的箭头。同时提供前向箭头和后向箭头。这对多段线特别有帮助,因为多段线上符号的朝向是固定的。前向被视为朝向多段线终点的方向。
您可以利用任一默认符号选项修改预定义符号的描边或填充区。
包括的预定义符号如下:
名称 | 说明 | 示例 |
---|---|---|
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 |
一面开放的前向箭头。 | ![]() |
向标记添加符号
如需在标记上显示基于矢量的图标,请传递一个 Symbol
对象字面量,其中包含所需的标记 icon
属性路径。
下例使用其中一个预定义矢量路径创建一个图标。
// This example uses a symbol to add a vector-based icon to a marker.
// The symbol uses one of the predefined vector paths ('CIRCLE') supplied by the
// Google Maps JavaScript API. function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: -25.363882, lng: 131.044922}
}); var marker = new google.maps.Marker({
position: map.getCenter(),
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 10
},
draggable: true,
map: map
}); }
查看示例 (marker-symbol-predefined)。
下例使用 SVG 路径标记法为标记创建自定义图标。
// This example uses SVG path notation to add a vector-based symbol
// as the icon for a marker. The resulting icon is a star-shaped symbol
// with a pale yellow fill and a thick yellow border. function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: -25.363882, lng: 131.044922}
}); 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: map.getCenter(),
icon: goldStar,
map: map
});
}
向多段线添加符号
如需在多段线上显示符号,请设置 PolylineOptions
对象的 icons[]
属性。icons[]
数组接受具有下列属性的一个或多个 IconSequence
对象字面量:
icon
(必填项)是要在线上渲染的符号。offset
决定与线起点的距离,将在该距离处渲染图标。可以线长度百分比(例如“50%”)形式或使用像素(例如“50px”)表示该距离。默认值为“100%”。repeat
决定线上连续图标的间距。可以线长度百分比(例如“50%”)形式或使用像素(例如“50px”)表示该距离。如需禁用图标重复,请指定“0”。默认值为“0”。
注:如果您的多段线是测地多段线(即其 geodesic
属性设置为 true
),则默认情况下以米为单位计算为 offset
和 repeat
指定的距离。如果将 offset
或 repeat
设置为像素值,将使距离按屏幕像素进行计算。
您可以通过组合使用符号和 PolylineOptions
类对地图上多段线的外观进行充分的控制。以下是一些您可以应用的定制的示例。
箭头
利用 IconSequence.offset
属性向您的多段线的起点或终点添加箭头。
// Define a symbol using a predefined path (an arrow)
// supplied by the Google Maps JavaScript API.
var lineSymbol = {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
}; // Create the polyline and add the symbol via the 'icons' property.
var line = new google.maps.Polyline({
path: [{lat: 22.291, lng: 153.027}, {lat: 18.291, lng: 153.027}],
icons: [{
icon: lineSymbol,
offset: '100%'
}],
map: map
});
虚线
您可以通过将多段线的不透明度设置为 0 并按固定间隔在线上叠加不透明符号来实现虚线效果。
// Define a symbol using SVG path notation, with an opacity of 1.
var lineSymbol = {
path: 'M 0,-1 0,1',
strokeOpacity: 1,
scale: 4
}; // Create the polyline, passing the symbol in the 'icons' property.
// Give the line an opacity of 0.
// Repeat the symbol at intervals of 20 pixels to create the dashed effect.
var line = new google.maps.Polyline({
path: [{lat: 22.291, lng: 153.027}, {lat: 18.291, lng: 153.027}],
strokeOpacity: 0,
icons: [{
icon: lineSymbol,
offset: '0',
repeat: '20px'
}],
map: map
});
自定义路径
自定义符号允许您向多段线添加许多不同的形状。
// Define the custom symbols. All symbols are defined via SVG path notation.
// They have varying stroke color, fill color, stroke weight,
// opacity and rotation properties.
var symbolOne = {
path: 'M -2,0 0,-2 2,0 0,2 z',
strokeColor: '#F00',
fillColor: '#F00',
fillOpacity: 1
}; var symbolTwo = {
path: 'M -1,0 A 1,1 0 0 0 -3,0 1,1 0 0 0 -1,0M 1,0 A 1,1 0 0 0 3,0 1,1 0 0 0 1,0M -3,3 Q 0,5 3,3',
strokeColor: '#00F',
rotation: 45
}; var symbolThree = {
path: 'M -2,-2 2,2 M 2,-2 -2,2',
strokeColor: '#292',
strokeWeight: 4
}; // Create the polyline and add the symbols via the 'icons' property.
var line = new google.maps.Polyline({
path: [{lat: 22.291, lng: 153.027}, {lat: 18.291, lng: 153.027}],
icons: [
{
icon: symbolOne,
offset: '0%'
}, {
icon: symbolTwo,
offset: '50%'
}, {
icon: symbolThree,
offset: '100%'
}
],
map: map
});
以动画呈现符号
您可以通过利用 DOM 的 window.setInterval()
函数按固定间隔更改符号的偏移,沿某一路径以动画呈现符号。
// This example adds an animated symbol to a polyline. function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 20.291, lng: 153.027},
zoom: 6,
mapTypeId: google.maps.MapTypeId.TERRAIN
}); // Define the symbol, using one of the predefined paths ('CIRCLE')
// supplied by the Google Maps JavaScript API.
var lineSymbol = {
path: google.maps.SymbolPath.CIRCLE,
scale: 8,
strokeColor: '#393'
}; // Create the polyline and add the symbol to it via the 'icons' property.
var line = new google.maps.Polyline({
path: [{lat: 22.291, lng: 153.027}, {lat: 18.291, lng: 153.027}],
icons: [{
icon: lineSymbol,
offset: '100%'
}],
map: map
}); animateCircle(line);
} // Use the DOM setInterval() function to change the offset of the symbol
// at fixed intervals.
function animateCircle(line) {
var count = 0;
window.setInterval(function() {
count = (count + 1) % 200; var icons = line.get('icons');
icons[0].offset = (count / 2) + '%';
line.set('icons', icons);
}, 20);
}
Google Map 符号的更多相关文章
- Google Map API V3开发(1)
Google Map API V3开发(1) Google Map API V3开发(2) Google Map API V3开发(3) Google Map API V3开发(4) Google M ...
- 房产地图google map的初步应用点滴.1)(转)
房产地图google map的初步应用点滴.1)房产地图google map的初步应用点滴.2)房产地图google map的初步应用点滴.3) 房产地图google map的初步应用点滴.4) 以前 ...
- Google Map API 应用实例说明
目录 Google Map API 1基础知识 1.1 Google 地图 API 概念 1.2 Google 地图的"Hello, World" 1.2.1 加载 Google ...
- Google Map API Version3 :代码添加和删除marker标记
转自:http://blog.sina.com.cn/s/blog_4cdc44df0100u80h.html Google Map API Version3 教程:在地图 通过代添加和删除mark标 ...
- Google Map API V3开发(2)
Google Map API V3开发(1) Google Map API V3开发(2) Google Map API V3开发(3) Google Map API V3开发(4) Google M ...
- Google Map API V3开发(3)
Google Map API V3开发(1) Google Map API V3开发(2) Google Map API V3开发(3) Google Map API V3开发(4) Google M ...
- Google Map API V3开发(4)
Google Map API V3开发(1) Google Map API V3开发(2) Google Map API V3开发(3) Google Map API V3开发(4) Google M ...
- Google Map API V3开发(5)
Google Map API V3开发(1) Google Map API V3开发(2) Google Map API V3开发(3) Google Map API V3开发(4) Google M ...
- Google Map API V3开发(6) 代码
Google Map API V3开发(1) Google Map API V3开发(2) Google Map API V3开发(3) Google Map API V3开发(4) Google M ...
随机推荐
- How To Open An URL In Android’s Web Browser
How To Open An URL In Android’s Web Browser 以下核心代码片断,将展现使用“android.content.Intent” 打开一个指定的 URL. butt ...
- Android之批量加载图片OOM问题解决方案
一.OOM问题出现的场景和原因 一个好的app总少不了精美的图片,所以Android开发中图片的加载总是避免不了的,而在加载图片过程中,如果处理不当则会出现OOM的问题.那么如何彻底解决这个问题呢?本 ...
- UVA 12487 Midnight Cowboy(LCA+大YY)(好题)
题目pdf:http://acm.bnu.edu.cn/v3/external/124/12487.pdf 大致题意: 一棵树,一个人从A节点出发,等可能的选不论什么一条边走,有两个节点B,C求这个人 ...
- 【Qt】仿QQ表情选择控件
表情选择控件在聊天应用中常常要用到,做起来尽管不复杂可是非常繁琐.特别是有些图标须要按顺序排列.每次重做必定是非常费时.所以我将聊天表情选择控件封装成一个独立的类QFaceSelectWid ...
- DFA 算法实现关键词匹配
起因: 从网页中爬去的页面.须要推断是否跟预设的关键词匹配(是否包括预设的关键词),并返回全部匹配到的关键词 . 眼下pypi 上两个实现 ahocorasick https://pypi.pytho ...
- 【5】基于Log4Net的日志系统
阅读目录 日志系统应具备的特性 Log4Net 配置文件:log4net.config 初始化 输出信息 对Log4Net的封装 log4net.config复杂配置 不管是Web应用程序还是W ...
- IDA Pro基本简介
IDA Pro基本简介 IDA加载完程序后,3个立即可见的窗口分别为IDA-View,Named,和消息输出窗口(output Window). IDA图形视图会有执行流,Yes箭头默认为绿色,No箭 ...
- Roo中的@Version
首页 关于 Roo中的@Version 发表回复 问题提出 当我们为entity添加@RooJpaActiveRecord注解时,Roo为我们自动生成了一个名为Entity_Roo_Jpa_Entit ...
- DevExpress学习01——下载与安装
记得刚接触编程时,虽然实现了功能,但用户界面十分丑陋,老师叫我们美化一下界面,不要千篇一律,当时觉得能够写出来功能就洋洋得意了,不觉得界面丑陋.后来,在程序比赛中,我接触了一种第三方控件,它可以快速实 ...
- Python编程 - json字符串的解析
import json jsonString = '{"arrayOfNums":[{"number":0},{"number":1},{& ...