Vue 地图标记：指南和示例120

在应用程序中使用地图标记可以轻松地在交互式地图上标注位置。本指南将介绍如何在中使用地图标记，并提供一些代码示例来帮助你入门。

准备工作

在开始之前，你需要确保已经安装了和以下库：
vue-google-maps
google-maps

你可以通过以下命令安装这些库：```
npm install vue-google-maps google-maps --save
```

创建地图组件

首先，你需要创建一个组件来显示地图。这个组件将使用 `vue-google-maps` 库提供的 `` 组件。```vue

export default {
data() {
return {
center: { lat: 40.7127, lng: -74.0059 },
zoom: 12
};
}
};

```

添加标记

要在地图上添加标记，可以使用 `vue-google-maps` 库提供的 `` 组件。每个标记需要一个 `:position` 属性，该属性指定标记的位置，以及一个 `:title` 属性，该属性提供标记的工具提示文本。```vue

export default {
data() {
return {
center: { lat: 40.7127, lng: -74.0059 },
zoom: 12,
markerTitle: '曼哈顿'
};
}
};

```

自定义标记

你可以通过使用 `:icon` 属性来自定义标记的外观。该属性接受一个对象，其中包含 `url`、`scaledSize` 和 `origin` 属性。```vue

export default {
data() {
return {
center: { lat: 40.7127, lng: -74.0059 },
zoom: 12,
markerTitle: '曼哈顿'
};
}
};

```

事件处理

`GMarker` 组件还允许你处理事件，例如单击事件。你可以使用 `@click` 事件监听器来响应标记的单击事件。```vue

export default {
data() {
return {
center: { lat: 40.7127, lng: -74.0059 },
zoom: 12,
markerTitle: '曼哈顿'
};
},
methods: {
onMarkerClick() {
('标记被点击了！');
}
}
};

```