一切就绪!

着手开发前,请先阅读我们的开发者文档

激活 Google Maps JavaScript API

为帮助您起步,我们将引导您在 Google Developers Console 中先完成几项任务:

  1. 创建或选择项目
  2. 激活 Google Maps JavaScript API 及相关服务
  3. 创建相应密钥
继续

符号

  1. 简介
  2. 符号的属性
  3. 预定义符号
  4. 向标记添加符号
  5. 向多段线添加符号
  6. 以动画呈现符号

简介

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

Symbol 是一种可显示在 MarkerPolyline 对象上的基于矢量的图像。符号的形状由采用 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
  });

}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
// 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
  });
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
// 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”。

您可以通过组合使用符号和 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: '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);
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
// 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);
}

查看示例 (overlay-symbol-animate)

发送以下问题的反馈:

此网页
Google Maps JavaScript API
Google Maps JavaScript API
需要帮助?请访问我们的支持页面