高德地图实现多个点位打点,并进行信息窗体的添加,点击左下角的操作按钮进行信息窗体的动态数据显示
1、多个点位打点
for (var i = 0; i < this.btnList.length; i++) {
this.marker = new AMap.Marker({
position: this.btnList[i].position,
map: this.map,
});
this.map.add(this.marker);
}
this.map.setFitView();
2、信息窗体的添加
this.infoWindow = new AMap.InfoWindow({
offset: new AMap.Pixel(0, -30),
});
全部代码
<template>
<div class="map-container">
<div id="amapInfo" class="map"></div>
<div class="btn-info">
<div class="btn-lists" v-for="(item, index) in btnList" :key="index">
<div class="btn" @click="handleClickBtn(item,index)">
{{ item.title || "--" }}
</div>
</div>
</div>
</div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
window._AMapSecurityConfig = {
securityJsCode: "自己的高德密钥",
};
export default {
data() {
return {
map: null,
infoWindow: null,
marker: null,
activeIndex: 0,
btnList: [
{
position: [103.860504, 36.035],
title: "店铺一",
content: {
title: '店铺一',
activeIndex: 0,
subTitle: '店铺一测试',
subTitleInfo: "店铺一测试info",
img: require('@/assets/images/echarts/bar5/bar5.png')
},
info: {
target: "",
type: "click",
},
},
{
position: [103.860804, 36.035],
title: "店铺二",
content: {
title: '店铺二',
activeIndex: 1,
subTitle: '店铺二测试',
subTitleInfo: '店铺二测试',
img: require('@/assets/images/echarts/bar5/bar5.png')
},
info: {
target: "",
type: "click",
},
},
{
position: [103.862604, 36.035],
title: "店铺三",
content: {
title: '店铺三',
activeIndex: 2,
subTitle: '店铺三测试',
subTitleInfo: '店铺三测试',
img: require('@/assets/images/echarts/bar5/bar5.png')
},
info: {
target: "",
type: "click",
},
},
{
position: [103.862904, 36.035],
title: "店铺四",
content: {
title: '店铺四',
activeIndex: 3,
subTitle: '店铺四测试',
subTitleInfo: '店铺四测试',
img: require('@/assets/images/echarts/bar5/bar5.png')
},
info: {
target: "",
type: "click",
},
},
],
};
},
created() {
this.$nextTick(() => {
AMapLoader.reset();
this.initAMap();
});
},
methods: {
initAMap() {
AMapLoader.load({
key: "自己的高德key", // 申请好的Web端开发者Key,首次调用 load 时必填
version: "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
plugins: [], // 需要使用的的插件列表,如比例尺'AMap.Scale'等
}).then((AMap) => {
// 获取到作为地图容器的DOM元素,创建地图实例
this.map = new AMap.Map("amapInfo", {
// 设置地图容器id
resizeEnable: true,
viewMode: "3D", // 使用3D视图
zoomEnable: true, // 地图是否可缩放,默认值为true
zoom: 12,
pitch: 40, // 初始俯仰角
// rotation: -10, // 初始旋转角
mapStyle: "amap://styles/46f0078af51dddcb9fbd4d44ec0b53da",
});
this.infoWindow = new AMap.InfoWindow({
offset: new AMap.Pixel(0, -30),
});
for (var i = 0; i < this.btnList.length; i++) {
this.marker = new AMap.Marker({
position: this.btnList[i].position,
map: this.map,
});
// console.log("this.marker",this.marker);
this.btnList[i].info.target = this.marker;
this.marker.content = this.btnList[i].content;
this.marker.on("click", this.markerClick);
this.marker.emit("click", { target: this.marker });
this.map.add(this.marker);
}
this.map.setFitView();
});
},
markerClick(e) {
const tempColor = `color${e.target.content.activeIndex + 1}`;
let contentText = `<div class='map-content'>
<div class="title">${e.target.content.title}</div>
<div class="tagInfo ${tempColor}">${e.target.content.subTitle}</div>
<div class="serible">${e.target.content.subTitleInfo}:
<img class="serible-img" src="${e.target.content.img}" alt="">
<div class="tag">舒适</div>
</div>
</div>`;
this.infoWindow.setContent(contentText);
this.infoWindow.open(this.map, e.target.getPosition());
},
handleClickBtn(item,index) {
this.activeIndex = index
this.markerClick(item.info);
},
},
};
</script>
<style lang="scss" scoped>
.map-container {
width: 100%;
height: 100%;
position: relative;
.map {
width: 100%;
height: 100%;
}
.btn-info {
padding: 5px 20px;
position: absolute;
bottom: 20px;
left: 10px;
background: rgba(0,0,0,0.5);
.btn-lists {
.btn {
padding: 5px 10px;
cursor: pointer;
border: 1px solid #ccc;
margin: 10px 0px;
color: #fff;
}
}
}
::v-deep .amap-info-sharp{
display: none;
}
::v-deep .amap-info-content {
// border: 1px solid blue;
// background: transparent;
padding: 0px;
.amap-info-close{
position: absolute;
top: 12px;
color: #ffffff;
font-size: 12px;
}
}
::v-deep .map-content {
width: 160px;
// height: 2.85rem;
background: rgba(0, 0, 0, 0.5);
box-shadow: 0px 2px 3.2px 0.6px rgba(84, 152, 217, 0.5);
border-radius: 4px;
color: #ffffff;
font-size: 18px;
// z-index: 200 !important;
display: flex;
flex-direction: column;
row-gap: 5px;
overflow: hidden !important;
padding: 10px 10px;
.title {
font-family: SourceHanSansCN, SourceHanSansCN;
font-weight: 500;
font-size: 14px;
color: #ffffff;
font-style: normal;
}
.tagInfo {
width: 130px;
// height: 20px;
background: #1381d2;
border-radius: 2px;
padding: 4px 0px 4px 10px;
font-size: 10px;
display: flex;
align-items: center;
}
.address {
font-family: SourceHanSansCN, SourceHanSansCN;
font-weight: 400;
font-size: 10px;
color: #ffffff;
font-style: normal;
}
.serible {
font-family: SourceHanSansCN, SourceHanSansCN;
font-weight: 400;
font-size: 10px;
color: #ffffff;
font-style: normal;
display: flex;
align-items: center;
.tag {
background: #15b26a;
border-radius: 3.2px;
font-family: SourceHanSansCN, SourceHanSansCN;
font-weight: 400;
font-size: 10px;
color: #ffffff;
font-style: normal;
display: flex;
align-items: center;
justify-content: center;
padding: 0.5px 5px;
}
}
.color1 {
background: #1381d2 !important;
}
.color2 {
background: rgba(22, 153, 130, 1) !important;
}
.color3 {
background: rgba(24, 146, 161, 1);
}
.color4 {
background: rgba(166, 121, 20, 1);
}
}
}
</style>
效果图如下:
可以实现左下角的点击联动地图点位的信息窗体变化
参考:给多个点添加信息窗体-信息窗体-示例中心-JS API 2.0 示例 | 高德地图API (amap.com)
仅为本人使用时的写法,仅供参考,若有不对之处请评论指正,感谢