高德地图打点示例 vue
时间: 2024-09-19 22:05:36 浏览: 12
高德地图Vue插件提供了一个方便的方式来在网页上添加地图并进行打点操作。以下是一个简单的Vue项目中使用高德地图API进行打点的基本示例:
首先,你需要安装`vue-amap`库,可以使用npm或yarn来安装:
```bash
npm install vue-amap amap-jsapi-v3
# 或者
yarn add vue-amap amap-jsapi-v3
```
然后,在`main.js`或其他需要使用地图的地方导入并注册组件:
```javascript
import { AMap } from 'vue-amap';
import 'amap/dist/amap.css';
Vue.use<AMap>(AMap);
```
接下来,在你的Vue组件中,比如`Home.vue`:
```html
<template>
<div id="map">
<amap :center="center" :zoom="zoom">
<!-- 地图容器 -->
<amap-marker v-for="(marker, index) in markers" :key="index" :position="marker.position" :dragging="true">
<amap-polyline :path="marker.path" :strokeColor="#FF0000" :strokeWeight="2" />
</amap-marker>
</amap>
</div>
</template>
<script>
export default {
data() {
return {
center: [116.404, 39.915], // 北京坐标
zoom: 13,
markers: [
{ position: [116.404, 39.915], path: [[116.39, 39.9], [116.41, 39.9]] },
{/* 添加更多打点数据 */}
],
};
},
};
</script>
```
在这个例子中,我们创建了两个标记点,并通过`:position`属性设置它们的位置,`:dragging`属性允许用户拖动标记。`:path`属性用于显示从标记点到其他点的线段。