Google Maps API 是一个广泛使用的前端库，它提供了交互式地图和定位服务。在 Google 地图上放置自定义标记是很常见的需求，但默认的标记图标可能无法满足我们的需求。本文将介绍如何调整 Google 地图标记图标的图像。
准备工作
首先，在 HTML 中引入 Google Maps 库并创建一个地图容器：
-- -------------------- ---- -------
--------- -----
------
------
------------- ---- ---------------
------- ------------------------------------------------------------------------
--------
-------- --------- -
----- --- - --- ----------------------------------------------- -
------- - ---- ---------- ---- ---------- --
----- ---
---
-
---------
-------
----- -------------------
---- -------- -------------- -------------
-------
-------接下来，在 JavaScript 中创建一个标记对象，并把它添加到地图上：
const marker = new google.maps.Marker({
position: { lat: 40.748817, lng: -73.985428 },
map: map,
title: "Hello World!",
});现在你应该可以看到一个默认的标记在地图上了。
更改标记图标
要更改标记图标，我们需要用 icon 属性指定新的图标 URL。例如，下面的代码将把标记图标更改为一只可爱的狗狗：
const marker = new google.maps.Marker({
position: { lat: 40.748817, lng: -73.985428 },
map: map,
title: "Hello World!",
icon: "https://maps.google.com/mapfiles/kml/shapes/dog.png",
});你可以替换 dog.png 文件名为你自己的图像文件。请注意，这个文件必须在公共服务器上，并且支持 HTTPS 协议。
如果你想使用相对路径加载本地图片，可以使用 Icon 类创建一个自定义标记图标对象。例如:
-- -------------------- ---- ------- ----- ---- - - ---- ----------------------------- ----------- --- -------------------- ---- -- ----- ------ - --- -------------------- --------- - ---- ---------- ---- ---------- -- ---- ---- ------ ------ -------- ----- ----- ---
这里用了 scaledSize 属性来指定图标的大小。请注意，这个属性仅适用于普通图标（即不是 SVG 的）。
更改标记颜色
除了更改图标，我们还可以更改标记的颜色。Google Maps API 提供了一种简单的方法来创建带有不同颜色的标记。例如，下面的代码将创建一个红色标记：
-- -------------------- ---- -------
----- ------ - --- --------------------
--------- - ---- ---------- ---- ---------- --
---- ----
------ ------ --------
----- -
----- ---------------------------------------------
------ ---
---------- ------
------------ ----
------------- --
--
---在这个例子中，我们使用了 SymbolPath 枚举类型来指定标记的形状为一个闭合箭头。你还可以尝试其他的形状。
总结
以上是关于如何调整 Google 地图标记图标图像的介绍。我们可以通过指定新的图标 URL 或自定义标记图标对象来更改标记图标。此外，我们还可以使用 SymbolPath 枚举类型来创建带有不同颜色和形状的标记。这些方法都非常简单易用，并且能够
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/11920