vue3/uniapp + 高德地图动态标点和文本
1. 下载高德地图插件:
npm i @amap/amap-jsapi-loader --save
2. 新建地图组件:
在项目中新建 MapContainer.vue 文件,用作地图组件。
/* MapContainer.vue 文件夹下 */
<template>
<div id="container" style="resize: both"></div>
</template>
3. 初始化地图:
<script setup>
import { onMounted, onUnmounted } from 'vue'
import AMapLoader from '@amap/amap-jsapi-loader'
const pageTitleOne = ['科技信息地区1', '科技信息地区2', '科技信息地区3']
onMounted(() => {
AMapLoader.load({
key: '************************', // 此处复制:申请好的Web端开发者Key,首次调用 load 时必填
version: '2.0', // 指定要加载的 JSAPI 的版本
})
.then((AMap) => {
map = new AMap.Map('container', { // 设置地图容器id
viewMode: '3D', // 是否为3D地图模式
center: [117.136894, 36.675769], // 初始化地图中心点位置
// -----
rotateEnable: true,
pitchEnable: true,
resizeEnable: false, // 允许自动调整地图大小
zoom: 17, //放大层级
pitch: 65, // 倾斜角度
rotation: 20, //
zooms: [2, 20],
showLabel: true //显示地图文字标记
})
// 此处放,下面的 【地图上添加动态图片/icon和文本】中的代码:
})
.catch((e) => {
console.log(e)
})
})
onUnmounted(() => {
map?.destroy()
})
获取高德key,很简单,账号申请即可。附有高德获取key的教程!
地图上添加动态图片/icon和文本:
注意点:
1.在vue中,地图上使用的图片:将图片放置在 Vue 项目的public 文件夹下的某个目录中,例如 public/assets/map.png
,然后在代码中引用相对路径即可。
2. 在uniapp中,将图片放在static文件夹下,绝对路径进行引入,/static/images/interaction/wfj.png
var markers = [
{
position: [117.136894, 36.675769],
content: `<div style="background: url(\'/assets/map.png\') no-repeat; background-size: contain; width: 180px; height: 160px; color: #fff; text-align: center; line-height: 76px;">
${pageTitleOne[0]} </div>`,
id: 11
},
{
position: [117.134588, 36.677902],
content: ` <div style="background: url(\'/assets/map.png\') no-repeat; background-size: contain; width: 180px; height: 160px; color: #fff; text-align: center; line-height: 76px;">
${pageTitleOne[1]} </div> `,
id: 12
},
{
position: [117.134511, 36.676028],
content: ` <div style="background: url(\'/assets/map.png\') no-repeat; background-size: contain; width: 180px; height: 160px; color: #fff; text-align: center; line-height: 76px;">
${pageTitleOne[2]} </div> `,
id: 13
}
]
for (var i = 0; i < markers.length; i++) {
var marker = new AMap.Marker({
position: markers[i].position, // 标记位置
content: markers[i].content
})
map.add(marker)
}
图中icon图片为网上随便摘取的,如有侵权或者其他的影响,请告知立即删除!