谷歌地图标记介绍

谷歌地图标记是谷歌提供的一个地图API功能之一，可以为Google Maps中的地点添加自定义标记。这些标记可以包括图片、自定义图标、文本信息等多种内容，并支持多种事件监听和交互方式。

使用方式

首先需要在页面中引入Google Maps JavaScript API的js文件，例如：

<script async defer src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap"></script>

其中API_KEY是开发者需要获取的谷歌地图API的访问密钥，可以前往Google Cloud Console进行申请。

然后在页面中创建地图容器，例如：

<div id="map"></div>

接着使用JavaScript代码初始化地图和添加标记，例如：

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -33, lng: 151 },
  });
  const marker = new google.maps.Marker({
    position: { lat: -33.857, lng: 151.215 },
    map,
    title: "Sydney",
  });
}

这段代码会创建一个位于(-33, 151)坐标，缩放级别为4的地图，并在(-33.857, 151.215)位置添加一个标题为"Sydney"的标记。

除此之外，谷歌地图标记还支持多种自定义属性和事件监听，详细使用方式可以参考Google Maps JavaScript API文档。

支持的自定义属性

谷歌地图标记支持添加多种自定义属性，常见的有：

• icon：标记的图标，可以是自定义图片或内置图标
• label：标记下方显示的文本
• zIndex：标记在地图上的叠放顺序
• draggable：标记是否可拖动
• animation：标记被点击时的动画效果

这些属性可以在创建标记时通过options参数传递，例如：

const marker = new google.maps.Marker({
  position: { lat: -33.857, lng: 151.215 },
  map,
  icon: "https://www.example.com/my-icon.png",
  label: "Sydney",
  zIndex: 10,
  draggable: true,
  animation: google.maps.Animation.BOUNCE,
});

支持的事件

谷歌地图标记支持多种事件监听，包括：

• click：鼠标点击标记时触发
• mouseover：鼠标移动到标记上时触发
• mouseout：鼠标移出标记时触发
• dragstart：开始拖动标记时触发
• dragend：拖动标记结束时触发

这些事件可以通过addListener方法进行监听，例如：

google.maps.event.addListener(marker, "click", () => {
  // 处理标记被点击后的行为
});

总结

谷歌地图标记是谷歌地图API中一个重要的功能，它可以为地图添加自定义标记，并支持多种属性和事件。程序开发者可以使用Google Maps JavaScript API来轻松创建地图，并添加自定义标记来实现各种交互需求。