下面用的高德地图v2版本，使用的【Key】【安全密钥】公司或个人的项目请到高德控制台中心申请。注意：不配置key与密匙是无法正常显示高德地图的。
amap.vue组件
<template>
<view class="component-amap">
<view class="loading">地图加载中</view>
<view id="amap" class="amap" :listArr="listArr" :change:listArr="ModuleInstance.setParkList"></view>
</view>
</template>
<script>
export default {
data() {
return {
listArr: [],
};
},
/*注意：uniapp子组件是没onLoad()和onShow()生命周期，只有页面组件才有 */
mounted() {
this.getDataList();
},
methods: {
//获取数据
getDataList() {
this.listArr = [
{
sysParkId: "1474279383801511937",
sysParkName: "测试迭代1园区",
lng: 113.266841,
lat: 23.128524,
address: "测试具体位置",
head: "15847441451",
phone: "13845545445",
},
{
sysParkId: "1509865555600539649",
sysParkName: "新增园区",
lng: 116.329519,
lat: 39.972134,
address: "测试详细地址",
head: "测试",
phone: "18445544444",
},
];
},
//跳转到详情页面
goDetails({ sysParkId }) {
uni.navigateTo({
url: `/pages/statisticsAdminSingle/index?sysParkId=${sysParkId}`,
});
},
},
};
</script>
<script module="ModuleInstance" lang="renderjs">
export default {
data() {
return {
map:null,
layer:null,
parkList:[],
};
},
mounted(){
if (window.AMap) {
// 观测更新的数据在 view 层可以直接访问到
this.initAmap();
} else {
window._AMapSecurityConfig = {
securityJsCode:'********',//您申请的高德地图【安全密钥】
}
// 动态引入较大类库避免影响页面展示
const script = document.createElement('script');
// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
script.src = `https://webapi.amap.com/maps?v=2.0&key=*********`;//您申请的高德地图【key值】
//script标签的onload事件都是在外部js文件被加载完成并执行完成后才被触发的
script.onload = () => {
this.initAmap();
}
document.head.appendChild(script);
}
},
beforeDestroy() {
},
methods: {
initAmap(){
this.map = new AMap.Map('amap', {
zoom: 13,//显示的缩放级别
zooms: [2, 30],//地图显示的缩放级别范围, 默认为 [2, 20] ，取值范围 [2 ~ 30]
center: [113.276521,23.133519],
});
this.map.on("complete", ()=>{
console.log("地图加载完成！");
this.createLabelsLayer();
});
},
//创建-海量点
createLabelsLayer(){
// 创建 AMap.LabelsLayer 图层
if(!this.map)return;
if(!this.layer){
this.layer = new AMap.LabelsLayer({
zIndex: 1000,
collision: false
});
// 将图层添加到地图
this.map.add(this.layer);
}
this.removeAllOverlay();
var markers = [];
var icon = {
type: 'image',
image: 'http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
size:[26,34],
anchor: 'bottom-center',
};
this.parkList.forEach((element,index) => {
element.position = [element.lng,element.lat];
var labelMarker = new AMap.LabelMarker({
position: element.position,
icon,
});
markers.push(labelMarker);
labelMarker.on('click', (e)=>{
// 给marker绑定事件
this.openInfo(element);
});
});
// 一次性将海量点添加到图层
this.layer.add(markers);
if(!this.isExistImplement){
this.isExistImplement = true;//只执行一次
this.map.setFitView(null, false, [60, 15, 30, 15]);//自适应显示多个点标记
let zoom = this.map.getZoom(); //获取当前地图级别
if(zoom>5)this.map.setZoom(5); //设置地图层级
}
},
//在指定位置打开信息窗体
openInfo(obj){
//构建信息窗体中显示的内容
let domStr = `
<div class="map-open-info">
<div class="park-name">${obj.sysParkName || 'XXX园区'}</div>
<div class="position">具体位置：${obj.address || '-'}</div>
<div class="person">负责人：${obj.head || '-'}</div>
<div class="phone">手机号码：${obj.phone || '-'}</div>
<div class="button">查看更多</div>
</div>
`;
var infoWindow = new AMap.InfoWindow({
zIndex:99999,
offset: [0,-38],//偏移
content: domStr, //使用默认信息窗体框样式，显示信息内容
});
infoWindow.open(this.map, obj.position);
var button = document.querySelector('.map-open-info .button');
button.onclick = ()=>{
uni.navigateTo({
url: `/pages/statisticsAdminSingle/index?sysParkId=${obj.sysParkId}`,
});
//this.$ownerInstance.callMethod('goDetails', {sysParkId:obj.sysParkId})
}
},
removeAllOverlay(){
// 清除地图上所有添加的覆盖物
this.map.clearMap();
},
//接收数组参数
setParkList(newValue, oldValue, ownerInstance, instance){
this.parkList = newValue;
this.createLabelsLayer();
},
},
};
</script>
<style lang="scss">
//高德地图-logo隐藏
/deep/.amap-logo {
display: none;
opacity: 0 !important;
}
//高德地图-版权隐藏
/deep/.amap-copyright {
opacity: 0;
}
/deep/.map-open-info {
width: 80vw;
position: relative;
.park-name {
font-size: 30rpx;
font-weight: bold;
}
.position,
.person,
.phone {
font-size: 28rpx;
padding: 5rpx 0rpx;
}
.button {
font-size: 26rpx;
font-weight: 500;
color: #1980ff;
padding: 15rpx 15rpx;
background: #f3faff;
border-radius: 8rpx;
position: absolute;
right: -15rpx;
bottom: 0rpx;
cursor: pointer;
}
}
.component-amap {
height: 100%;
position: relative;
.loading {
position: absolute;
top: 35vh;
left: 50%;
transform: translateX(-50%);
}
.amap {
min-height: 300px;
height: 100%;
position: relative;
z-index: 8;
}
}
</style>
效果图：
image.png
高德地图的js只能使用在线链接，需要申请【key与安全密钥】。高德地图如果点击事件交互频繁，建议直接在 renderjs模式中实现功能。
uniapp百度echarts图表使用：
https://www.jianshu.com/p/409e5453fd38
高德地图控制台中心
https://console.amap.com/dev/key/app
