在前端开发中，使用谷歌地图 API 可以为我们提供丰富的地图展示和交互功能，其中标记点是常见的元素之一。本文将介绍如何在谷歌地图 V3 中创建编号地图标记，并附上相应的示例代码。
什么是编号地图标记？
编号地图标记是指地图上的标记点带有唯一编号的标记，通常用于标记某些内容的顺序或层级关系。例如，在一个旅游景点的地图上，我们可以用编号标记来标记游览的顺序；在一个城市的地图上，我们可以用编号标记来标记某些重要建筑物的层级关系。
实现方法
在谷歌地图 V3 中，我们可以通过 google.maps.Marker 类来创建标记点，并通过 label 属性来设置标记点带有的文本标签。具体而言，我们可以将文本标签设置为一个 google.maps.MarkerLabel 对象，该对象包含了我们所需要的编号信息。下面是一个简单的示例代码：
-- -------------------- ---- -------
--- ----
--- ------- - ---
-------- --------- -
--- - --- ----------------------------------------------- -
----- ---
------- - ---- -------- ---- --------- --
---
--- ---- - - -- - -- --- ---- -
--- ------ - --- --------------------
--------- ------------------
---- ----
------ -
----- -------------
------ --------
--------- -------
----------- -------
--
---
---------------------
-
-
-------- ----------------- -
----- --- - ------- - ------------- - --- - -----
----- --- - --------- - ------------- - --- - -----
------ - ---- --- --
-在上述代码中，我们首先定义了一个 initMap() 函数来初始化地图。在该函数中，我们通过一个循环语句创建 10 个标记点，并将它们随机分布在以 San Francisco 为中心的方圆半径为 0.05 的区域内。对于每个标记点，我们通过 label 属性设置文本标签，其中的 text 属性即为该标记点所带有的编号信息。
深度解析
以上是一个简单的实现方法，但如果我们希望进一步定制化编号地图标记的样式和行为，则需要深入了解 google.maps.MarkerLabel 对象的各种属性和方法。
color 属性
color 属性用于设置文本标签的颜色。默认情况下，文本标签的颜色为白色（#ffffff）。我们可以通过以下方式来改变文本标签的颜色：
let marker = new google.maps.Marker({
position: { lat: 37.7749, lng: -122.4194 },
map: map,
label: {
text: "1",
color: "#ff0000", // 设置文本标签颜色为红色
},
});fontWeight 属性
fontWeight 属性用于设置文本标签的字体粗细。默认情况下，文本标签的字体粗细为普通（normal）。我们可以通过以下方式来改变文本标签的字体粗细：
let marker = new google.maps.Marker({
position: { lat: 37.7749, lng: -122.4194 },
map: map,
label: {
text: "1",
fontWeight: "bold", // 设置文本标签的字体粗细为粗体
},
});fontSize
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/13964