上次针对web端做了通常用到的地图信息整理。本次安卓移动端更新内容如下
位置定位、点标记、点击信息展示。
声明：uniapp安卓开发地图不支持腾讯地图，使用高德、百度、谷歌都可。建议使用高德，毕竟代码在下面。
知识点：renderjs、vue、renderjs和js数据交互
一、创建一个地图容器，class样式定义地图大小?
二、创建两个js标签、相当于使用了组件，一个正常写js语法，一个写renderjs使用高德地图。申请高德地图需要key值，因为涉及到jre包，可以让后端帮忙申请。重点在于数据交互。写了注释，直接上代码。
<template>
<view class="map">
<view class="component-amap">
<view class="loading">地图加载中</view>
<view
id="amap"
class="amap"
:pointList="pointList"
:change:pointList="ModuleInstance.setParkList"
></view>
<!-- :change:pointList="ModuleInstance.setParkList"
这个是renjs的语法 作为沟通数据的桥梁
-->
</view>
</view>
</template>
<script>
export default {
data() {
return {
latitude: 30.218143, // 纬度
longitude: 120.280798, // 经度
pointList: [],
};
},
onShow() {
this.getPointList();
},
methods: {
getPointList() {
this.pointList = [
{
roadId: 331181207320,
roadTude: 30.210275,
roadLong: 120.274004,
roadTeam: null,
roadType: null,
roadAddr: "文明路-宁东路路口",
roadTeamName: null,
roadTypeName: null,
roadName: "文明路-宁东路路口",
accidentNum: 6,
percentage: 0,
colorSign: 12,
colorType: "#171516",
accidentRoadType: null,
},
{
roadId: 331181207272,
roadTude: 30.206122,
roadLong: 120.234643,
roadTeam: 4,
roadType: 18,
roadAddr: "月明路与江干路路口",
roadTeamName: "乡镇",
roadTypeName: "镇",
roadName: "月明路与江干路路口",
accidentNum: 3,
percentage: 0,
colorSign: 10,
colorType: "#EECF47",
accidentRoadType: null,
},
];
},
//todo子组件点击坐标 触发
serviceClick(aa) {
console.log(aa);
},
},
};
</script>
<script module="ModuleInstance" lang="renderjs">
export default {
data() {
return {
map: null,
layer: null,
parkList: [],
markerId: ''
};
},
mounted() {
if (window.AMap) {
//todo 如果能访问到AMap直接初始化
this.initAmap();
} else {
//todo 动态引入
const script = document.createElement('script');
//todo 先申请key值,填在这里
script.src = `https://webapi.amap.com/maps?v=2.0&key=xxxxxxxxxxxxxx`;
script.onload = () => {
//todo 初始化地图
this.initAmap();
}
document.head.appendChild(script);
}
},
methods: {
initAmap() {
this.map = new AMap.Map('amap', {
zoom: 13, //显示的缩放级别
zooms: [12, 30], //地图显示的缩放级别范围, 默认为 [2, 20] ，取值范围 [2 ~ 30]
center: [113.276521, 23.133519],//todo 中心点坐标
mapStyle: 'amap://styles/57994c871bb604a4c79184f5f65d8782' //todo 地图样式
});
//todo 地图创建完成 标注点
this.map.on("complete", () => {
this.createLabelsLayer();
});
},
//todo 点坐标
createLabelsLayer() {
if (!this.map) return;
if (!this.layer) {
this.layer = new AMap.LabelsLayer({
zIndex: 1000,
collision: false
});
//todo 将点坐标添加到地图
this.map.add(this.layer);
}
this.removeAllOverlay();
var markers = [];
var icon = {
type: 'image',
//todo 点标记 可自己更改 marker-xxx.png
image: 'http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
size: [26, 34],
anchor: 'bottom-center',
};
var text = {
// 要展示的文字内容
content: '',
direction: 'right',
//todo 文字在 点标记上的偏移量
offset: [-20, -5],
// 文字样式
style: {
// 字体大小
fontSize: 12,
// 字体颜色
fillColor: '#22886f',
// 描边颜色
strokeColor: '#fff',
// 描边宽度
strokeWidth: 1,
}
};
//todo parkList就是所有的坐标点
this.parkList?.forEach((element, index) => {
text.content = element.accidentNum + '' || '0'
text.style.fillColor = element.colorType
element.position = [element.lng, element.lat];
var labelMarker = new AMap.LabelMarker({
position: element.position,
icon: icon,
text
});
markers.push(labelMarker);
labelMarker.on('click', (e) => {
// 给marker绑定事件
this.openInfo(element);
this.markerId = element.roadId || element.sourceId
//!!!重点 数据沟通 触发父组件的方法
this.$ownerInstance.callMethod('serviceClick', this.markerId)
});
});
// 一次性将海量点添加到图层
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); //设置地图层级
}
},
//todo 窗体中显示的内容
openInfo(obj) {
let domStr = `
<div class="box-content">
<div class="box-left">
<h2>
${obj.accidentNum}
</h2>
<span class="num-desc">
事故总数量
</span>
</div>
<div class="box-right">
<span>
单元名称：${obj.roadName || obj.sourceName}</span>
<span>
详细地址：${obj.roadAddr || obj.sourceAddr}
</span>
</div>
</div>`;
var infoWindow = new AMap.InfoWindow({
zIndex: 999,
offset: [0, -38], //偏移
content: domStr, //使用默认信息窗体框样式，显示信息内容
});
infoWindow.open(this.map, obj.position);
},
removeAllOverlay() {
// 清除地图上所有添加的覆盖物
this.map.clearMap();
},
//接收数组参数
setParkList(newValue, oldValue, ownerInstance, instance) {
this.parkList = newValue;
this.createLabelsLayer();
},
},
};
</script>
<style lang="scss">
.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;
}
}
::v-deep .box-content {
display: flex;
justify-content: space-around;
.box-left {
width: 300rpx;
display: flex;
flex-direction: column;
h2 {
font-size: 60rpx;
color: #f94a37;
font-weight: 900;
}
.num-desc {
font-size: 30rpx;
color: #666;
font-weight: 800;
}
}
.box-right {
background: #4d272a;
margin-top: 10rpx;
span {
padding: 0 15rpx;
display: inline-block;
color: #fb473f;
}
span:nth-child(1) {
margin-bottom: 10rpx;
}
span:nth-child(2) {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
}
}
</style>
重点在于数据交互，在组件引用时通过:change:pointList="ModuleInstance.setParkList"?
将数据传给renderjs进行点渲染。点击点坐标的时候通过this.$ownerInstance.callMethod('serviceClick', this.markerId)将点的id信息给父组件
感谢支持，交流群入口：
