vue高德地图实现动态切换坐标点 vue高德地图实现点击坐标点展示自定义窗体
程序员文章站
2022-06-28 18:52:20
首先注册高德账号...
先来看下效果：
首先注册高德账号 获取到 高德密钥 key
https://lbs.amap.com/api/javascript-api/summary
官网注册成为开发者 个人公司都可以 然后进去控制台
1.我的应用中创建新的应用
2.在应用中点击添加 创建新的key
下面开始实现你想要的功能：
我是基于vue开发的所以这里就用了vue-cli 可自行去vue官网安装cli脚手架
vue create vue-map 安装vue脚手架命令 下面是我的文件目录 Home.vue是主要实现功能的代码
在入口index.html中引入高德js文件 引入的cdn地址key的参数 就是你应用中创建的key
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>高德地图</title>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=高德申请的key"></script>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
在Home.vue 文件中进行开发
我这里写的大小800px的正方形。
<template>
<div class="home">
<div class="map" id="container"></div>
</div>
</template>
<style lang="less" scoped>
.map{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 800px;
height: 800px;
}
</style>1. 初始化地图控件
<script>
// @ is an alias to /src
export default {
name: 'Home',
components: {
},
data () {
return {
map: '',
infoWindow: '',
marker: '',
timer: '',
n: 0,
list: [
{
name: '杭州雷峰塔景区',
longitude: '120.148849',
latitude: '30.230934',
people: Math.floor(Math.random() * 100000)
},
{
name: '杭州西湖区河坊街',
longitude: '120.092207',
latitude: '30.274405',
people: Math.floor(Math.random() * 100000)
},
{
name: '杭州西湖断桥残雪',
longitude: '120.151195',
latitude: '30.258105',
people: Math.floor(Math.random() * 100000)
},
{
name: '杭州西湖风景名胜区-曲院风荷',
longitude: '120.135502',
latitude: '30.251182',
people: Math.floor(Math.random() * 100000)
},
{
name: '杭州西湖风景名胜区-曲院风荷',
longitude: '120.135502',
latitude: '30.251182',
people: Math.floor(Math.random() * 100000)
},
{
name: '银泰百货(西湖店)',
longitude: '120.165667',
latitude: '30.243768',
people: Math.floor(Math.random() * 100000)
},
{
name: '湘湖国家旅游度假区',
longitude: '120.209336',
latitude: '30.133265',
people: Math.floor(Math.random() * 100000)
},
{
name: '杭州动物园',
longitude: '120.133069',
latitude: '30.212224',
people: Math.floor(Math.random() * 100000)
}
]
}
},
methods: {
// 初始化地图控件方法
initMap() {
this.map = new AMap.Map(document.getElementById("container"), {
mapStyle: 'amap://styles/darkblue',
resizeEnable: false,
center: [this.list[0].longitude, this.list[0].latitude],//地图中心点
zoom: 13,//地图显示的缩放级别
keyboardEnable: false,
zoomEnable: true,
dragEnable: true,
animateEnable: true
});
// 循环初始化所有坐标点
this.list.forEach(v => {
this.initMarker({ lng: v.longitude, lat: v.latitude }, v)
})
// 通过定时器对地图坐标进行轮播
this.setInter()
},
// 初始化坐标点的icon
initMarker(location, item) {
// console.log('Location', location, item)
// 生成坐标点icon
let icon = new AMap.Icon({
size: new AMap.Size(20, 26),
image: require("../assets/images/dn-marker-icon.png"),
imageSize: new AMap.Size(20, 26)
});
// 坐标点 生成方法
this.marker = new AMap.Marker({
icon: icon, // 坐标点图标
position: [location.lng, location.lat], // 左边点的经纬度
offset: new AMap.Pixel(0, -30) // 坐标点偏移量
});
// 坐标点添加点击事件 用来打开自定义窗口 也可直接添加窗口自动全部打开状态
this.marker.on('click', (e) => {
// console.log('marker 添加点击事件：', e, e.pixel.x, e.pixel.y)
this.initInfoWindow(location.lng, location.lat, item)
// 点击当前标点移动至地图中心点
this.setCenter(location.lng, location.lat)
this.infoWindow.open(this.map, e.lnglat)
})
// 初始化坐标点自定义窗口
this.initInfoWindow(location.lng, location.lat, item)
// 打开窗口的方法 这里也可以通过 点击坐标点打开
this.infoWindow.open(this.map, {Q: location.lat, R: location.lng, lat: location.lat, lng: location.lng})
//
this.marker.setMap(this.map)
},
// 初始化信息窗体
initInfoWindow(lng, lat, item) {
// console.log('创建了信息窗体')
this.infoWindow = new AMap.InfoWindow({
isCustom: true, //使用自定义窗体
anchor: 'bottom-center',
content: this.createInfoWindow(item),
offset: new AMap.Pixel(0, -20),
autoMove: true,
closeWhenClickMap: false
});
},
// 创建信息窗体
createInfoWindow(item) {
return `
<div class="dn-info-window">
<div class="dn-info-name">${item.name}</div>
<div class="dn-info-num">实时人数：<span>${item.people}</span></div>
</div>
`
},
// 轮循坐标点方法
setInter() {
this.timer = setInterval(() => {
// 轮播当前标点移动至地图中心点
this.setCenter(this.list[this.n].longitude, this.list[this.n].latitude)
this.initMarker({ lng: this.list[this.n].longitude, lat: this.list[this.n].latitude }, this.list[this.n])
if (this.n == (this.list.length - 1)) {
this.n = 0
} else {
this.n++
}
}, 10000)
},
// 当前标点移动至地图中心
setCenter (long, lati) {
this.map.setCenter([long, lati])
}
},
mounted () {
this.initMap()
},
beforeDestroy () {
clearInterval(this.timer)
}
}
</script>样式代码
<style lang="less" scoped>
.map{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 800px;
height: 800px;
}
// 自定义窗体的样式
/deep/.info-window {
padding: 10px;
background: rgba(4, 77, 145, 0.753);
color: #3196FA;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
.info-name {
font-size: 16px;
font-family: PingFang SC;
font-weight: 500;
color: #FFFFFF;
}
.info-num {
font-size: 14px;
font-family: PingFang SC;
font-weight: 400;
color: #A5A3A1;
>span {
font-size: 14px;
color: #3196FA;
&.active-color {
color: #EF4864;
}
}
}
}
</style>这篇文章主要记录自己使用高的地图的方法。欢迎大家下方指导。 下篇更新高德地图搜索地点功能
本文地址：https://blog.csdn.net/weixin_38356321/article/details/109527638