符号

简介

如果您想在标记上使用基于矢量的图标,或者向多段线添加图像,便可使用符号。

标记支持使用光栅图像以及矢量图像。请参阅有关定制标记图标的文档。

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
  });
}

查看示例 (marker-symbol-custom)

向多段线添加符号

如需在多段线上显示符号,请设置 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
  });

查看示例 (overlay-symbol-arrow)

虚线

您可以通过将多段线的不透明度设置为 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
  });

查看示例 (overlay-symbol-dashed)

自定义路径

自定义符号允许您向多段线添加许多不同的形状。

 
// 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
  });

查看示例 (overlay-symbol-custom)

以动画呈现符号

您可以通过利用 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);
}

查看示例 (overlay-symbol-animate)

Google Map 符号的更多相关文章

  1. 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 ...

  2. 房产地图google map的初步应用点滴.1)(转)

    房产地图google map的初步应用点滴.1)房产地图google map的初步应用点滴.2)房产地图google map的初步应用点滴.3) 房产地图google map的初步应用点滴.4) 以前 ...

  3. Google Map API 应用实例说明

    目录 Google Map API 1基础知识 1.1 Google 地图 API 概念 1.2 Google 地图的"Hello, World" 1.2.1 加载 Google ...

  4. Google Map API Version3 :代码添加和删除marker标记

    转自:http://blog.sina.com.cn/s/blog_4cdc44df0100u80h.html Google Map API Version3 教程:在地图 通过代添加和删除mark标 ...

  5. 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 ...

  6. 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 ...

  7. 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 ...

  8. 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 ...

  9. 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 ...

随机推荐

  1. 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 ...

  2. Android之批量加载图片OOM问题解决方案

    一.OOM问题出现的场景和原因 一个好的app总少不了精美的图片,所以Android开发中图片的加载总是避免不了的,而在加载图片过程中,如果处理不当则会出现OOM的问题.那么如何彻底解决这个问题呢?本 ...

  3. UVA 12487 Midnight Cowboy(LCA+大YY)(好题)

    题目pdf:http://acm.bnu.edu.cn/v3/external/124/12487.pdf 大致题意: 一棵树,一个人从A节点出发,等可能的选不论什么一条边走,有两个节点B,C求这个人 ...

  4. 【Qt】仿QQ表情选择控件

         表情选择控件在聊天应用中常常要用到,做起来尽管不复杂可是非常繁琐.特别是有些图标须要按顺序排列.每次重做必定是非常费时.所以我将聊天表情选择控件封装成一个独立的类QFaceSelectWid ...

  5. DFA 算法实现关键词匹配

    起因: 从网页中爬去的页面.须要推断是否跟预设的关键词匹配(是否包括预设的关键词),并返回全部匹配到的关键词 . 眼下pypi 上两个实现 ahocorasick https://pypi.pytho ...

  6. 【5】基于Log4Net的日志系统

    阅读目录 日志系统应具备的特性  Log4Net 配置文件:log4net.config 初始化 输出信息 对Log4Net的封装 log4net.config复杂配置   不管是Web应用程序还是W ...

  7. IDA Pro基本简介

    IDA Pro基本简介 IDA加载完程序后,3个立即可见的窗口分别为IDA-View,Named,和消息输出窗口(output Window). IDA图形视图会有执行流,Yes箭头默认为绿色,No箭 ...

  8. Roo中的@Version

    首页 关于 Roo中的@Version 发表回复 问题提出 当我们为entity添加@RooJpaActiveRecord注解时,Roo为我们自动生成了一个名为Entity_Roo_Jpa_Entit ...

  9. DevExpress学习01——下载与安装

    记得刚接触编程时,虽然实现了功能,但用户界面十分丑陋,老师叫我们美化一下界面,不要千篇一律,当时觉得能够写出来功能就洋洋得意了,不觉得界面丑陋.后来,在程序比赛中,我接触了一种第三方控件,它可以快速实 ...

  10. Python编程 - json字符串的解析

    import json jsonString = '{"arrayOfNums":[{"number":0},{"number":1},{& ...