开发者社区> 游客xbcjz6rfbqhbq> 正文

Google地图官方API-在地图上绘图(自定义符号)

简介:
+关注继续查看

符号
介绍
当您想在标记上使用基于矢量的图标或将图像添加到折线时,符号非常有用 。

标记支持栅格图像和矢量图像的使用。请参阅有关自定义标记图标的文档 。
A 是可以显示在或对象上的基于矢量的图像 。符号的形状由使用SVG路径符号的路径定义 。虽然是唯一必需的属性,但该 对象支持多种属性,使您可以自定义视觉外观,例如笔触和填充的颜色和粗细。请参阅下面的属性列表。 SymbolMarkerPolylinepathSymbol

通过SymbolPath 该类可以使用几个预定义的符号。请参阅下面的列表。

符号的属性
请注意,a的默认行为Symbol取决于它出现在标记还是折线上而略有不同。这些差异在下面的属性列表中描述。

A Symbol支持以下属性:

path(必填)是定义符号形状的路径。您可以在其中使用预定义的路径之一,也可以使用 SVG路径符号定义自定义路径 。注意:折线上的矢量路径必须适合22x22px的正方形。如果路径中包括该正方形以外的点,则必须将符号的属性调整为分数值(例如0.2),以使生成的缩放点适合正方形。 google.maps.SymbolPathscale
anchor设置符号相对于标记或折线的位置。符号路径的坐标分别通过锚点的x和y坐标向左和向上转换。默认情况下,符号锚定在(0, 0)。位置用与符号路径相同的坐标系表示。
fillColor是符号填充的颜色(即笔触边界的区域)。支持所有CSS3颜色,但扩展的命名颜色除外。对于标记上的符号,默认值为“黑色”。对于折线上的符号,默认值为相应折线的笔触颜色。
fillOpacity定义符号填充的相对不透明度(即缺乏透明度)。值的范围是0.0(完全透明)到1.0(完全不透明)。默认值为0.0。
rotation是旋转符号的角度,顺时针以度表示。默认情况下,符号标记的旋转度为0,折线上的符号旋转了其所处边缘的角度。在多段线上设置符号的旋转将固定符号的旋转,使其不再跟随直线的曲线。
scale设置符号缩放的数量。对于符号标记,默认比例为1。缩放后,符号可以为任意大小。对于折线上的符号,默认比例为折线的笔划粗细。缩放后,符号必须位于以符号锚点为中心的22x22px正方形内。
strokeColor是符号轮廓的颜色。支持所有CSS3颜色,但扩展的命名颜色除外。对于标记上的符号,默认值为“黑色”。对于折线上的符号,默认颜色是折线的笔触颜色。
strokeOpacity确定符号笔划的相对不透明度(即缺乏透明度)。值的范围是0.0(完全透明)到1.0(完全不透明)。对于符号标记,默认值为1.0。对于折线上的符号,默认值为折线的笔触不透明度。
strokeWeight定义符号轮廓的粗细。默认值为scale符号的。
预定义符号
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

});

}

查看示例。

以下示例使用 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

});
}

查看示例。

向折线添加符号
要在折线上显示符号,请设置对象的icons[]属性PolylineOptions。该icons[]数组采用一个或多个对象文字,具有以下属性: IconSequence

icon(required)是要在线上渲染的符号。
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: '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);
}

查看示例。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
x3d
Google官方关于Android架构中MVP模式的示例续-DataBinding
基于前面的TODO示例,使用Data Binding库来显示数据并绑定UI元素的响应动作。 这个示例并未严格遵循 Model-View-ViewModel 或 Model-View-Presenter 模式,其中既有View Model,也有Presenter。
891 0
ArcGIS API for Silverlight 点击地图弹出自定义窗体
在之前的博客中,关于弹出窗体,样式比较单一,不能满足自定义各种样式,源连接地址:http://blog.
494 0
如何设置dedecms自定义表单必填项?
  用dedecms自定义表单可以制作一个简单的预约系统,有些相关信息需要设置为必填项,比如联系方式,没有留下真实的电话或其他信息,以后要怎么联系到你的客户。那我们要如何设置织梦cms自定义表单必填项呢?随ytkah一起试试吧   一、先用一段php代码来判断验证码为必选项。
958 0
【WebAPI No.5】Core WebAPI中的自定义格式化
介绍 Web API为JSON和XML提供媒体类型格式化程序。框架默认将这些格式化程序插入管道中。客户端可以在HTTP请求的Accept标头中请求JSON或XML. 格式化数据这个东西,其实没有什么最好的数据,要看各种场景,最适合才是最好的,不是说json就比xml好,容易解析什么的等。
2136 0
Objective-c官方文档 怎么自定义类
通过类别来给已经存在的类添加方法来实现自定义类 如果你需要添加一个方法给一个已经存在的类,也许能增加新的功能使你更容易来在我们的应用里处理一些事情。最简单的方法是用类别。 这个语法有点想类的接口描述但是他是没有继承类的,相反的要指定类别的名字在括号里面。
712 0
Android官方开发文档Training系列课程中文版:动画视图之创建自定义转场动画
原文地址:http://android.xsoftlab.net/training/transitions/custom-transitions.html 自定义转场可以创建自定义动画。
1051 0
x3d
[译]Google官方关于Android架构中MVP模式的示例
概述 该示例(TODO-MVP)是后续各种示例演变的基础,它主要演示了在不带架构性框架的情况下实现M-V-P模式。其采用手动依赖注入的方式来提供本地数据源和远程数据源仓库。异步任务通过回调处理。 注意:MVP中View的概念是有所不同的: android.
1121 0
7
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载