uniapp安装高德地图
时间: 2023-12-09 07:06:49 浏览: 198
在uniapp做高德地图,发布为h5网页
为在uniapp中使用高德地图,需要进行以下准备工作:
1. 在高德开放平台申请应用Key。
2. 在uniapp项目中安装高德地图插件。
3. 在需要使用高德地图的页面中引入地图组件并配置Key。
具体步骤如下:
1. 在高德开放平台申请应用Key,具体操作可参考高德开放平台官方文档。
2. 在uniapp项目中安装高德地图插件,可通过以下命令进行安装:
```
npm install --save uni-amap
```
3. 在需要使用高德地图的页面中引入地图组件并配置Key,具体代码如下:
```
<template>
<view>
<amap :key="key" :markers="markers"></amap>
</view>
</template>
<script>
import amap from '@/components/uni-amap/amap.vue'
export default {
components: {
amap
},
data() {
return {
key: 'your amap key',
markers: [{
id: 1,
latitude: 39.909729,
longitude: 116.398419,
iconPath: '/static/marker.png',
width: 32,
height: 32
}]
}
}
}
</script>
```
其中,amap为引入的地图组件,key为申请的高德地图应用Key,markers为标记点数组,可根据需要自行配置。
阅读全文