HTML 在Google地图上添加自定义标记文本

在本文中，我们将介绍如何在Google地图上添加自定义标记文本。Google地图是一款广泛使用的在线地图服务，可以在网页上嵌入地图，显示地理位置和相关信息。通过添加自定义标记文本，我们可以在标记上显示自定义的文本信息，从而增强地图的可读性和可用性。

阅读更多：HTML 教程

1. 添加基本的Google地图

首先，我们需要在网页上添加基本的Google地图。在HTML文档中，我们可以使用<div>元素创建一个地图容器，并通过JavaScript代码调用Google地图API来显示地图。

<!DOCTYPE html>
<html>
<head>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
<script>
function initMap() {
var mapOptions = {
center: new google.maps.LatLng(37.7749, -122.4194), // 设置地图中心点的经纬度
zoom: 8 // 设置地图缩放级别
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>

在代码中，需要将YOUR_API_KEY替换为您自己的Google地图API密钥。这是为了确保您的地图可以正常显示和访问。

2. 添加自定义标记文本

要在Google地图上添加自定义标记文本，我们可以使用MarkerWithLabel库。MarkerWithLabel是一个开源JavaScript库，它扩展了Google地图的标记功能，允许我们在标记上添加自定义的文本。

首先，需要在HTML文档中引入MarkerWithLabel库的JavaScript文件。

<!DOCTYPE html>
<html>
<head>
...
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/packages/markerwithlabel/src/markerwithlabel.js"></script>
...
</head>
...
</html>

现在，我们可以在地图上添加自定义标记文本了。首先, 我们需要创建一个标记对象，然后设置其位置和文本属性。

<!DOCTYPE html>
<html>
<head>
...
<script>
function initMap() {
var mapOptions = {
center: new google.maps.LatLng(37.7749, -122.4194),
zoom: 8
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var marker = new MarkerWithLabel({
position: new google.maps.LatLng(37.7749, -122.4194),
map: map,
labelContent: "Custom Marker Text", // 自定义标记文本
labelClass: "custom-label" // 自定义标记样式
});
}
</script>
<style>
.custom-label {
color: white;
background-color: red;
font-size: 16px;
font-weight: bold;
padding: 5px;
border-radius: 5px;
}
</style>
...
</head>
...
</html>

在以上代码中，我们创建了一个具有自定义标记文本的标记对象，并为其设置了一个自定义的样式。通过设置labelContent属性，我们可以指定标记上显示的文本内容；通过设置labelClass属性，我们可以指定标记文本的样式。

3. 自定义标记文本样式

要自定义标记文本的样式，我们可以使用CSS来设置字体、颜色、背景等属性。在上面的例子中，我们为标记文本定义了自定义样式custom-label，并设置了字体颜色为白色，背景颜色为红色，字体大小为16px。

您可以根据自己的需求自定义标记文本的样式。例如，您可以更改字体颜色为黑色，背景颜色为黄色，字体大小为14px等等。

...
<style>
.custom-label {
color: black;
background-color: yellow;
font-size: 14px;
...
}
</style>
...

4. 在标记上显示自定义信息

除了添加自定义标记文本，我们还可以在标记上显示自定义信息。当用户点击标记时，可以显示额外的信息窗口或弹出层，以提供更多详细信息。下面是一个简单的示例。

<!DOCTYPE html>
<html>
<head>
...
<script>
function initMap() {
var mapOptions = {
center: new google.maps.LatLng(37.7749, -122.4194),
zoom: 8
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var marker = new MarkerWithLabel({
position: new google.maps.LatLng(37.7749, -122.4194),
map: map,
labelContent: "Custom Marker Text",
labelClass: "custom-label"
});
// 创建信息窗口
var infowindow = new google.maps.InfoWindow({
content: "This is a custom marker with custom label text." // 自定义信息文本
});
// 当用户点击标记时显示信息窗口
marker.addListener("click", function() {
infowindow.open(map, marker);
});
}
</script>
...
</head>
...
</html>