- 结论:1.uniapp使用map组件不要用vue开发使用nvue
- 2.地图上点击标点出现的弹出信息,不要使用css的定位加z-index来写需要使用cover-view实现
- 3.如果是vue使用cover-view会导致flex无效,但是nvue是只能使用flex,但是nvue的flex布局默认值 flex-direction属性默认是竖排(column)
- 4.nvue中不能使用百分比布局,所以想要实现地图铺满全屏需要使用js动态获取屏幕大小进行计算(代码在后面)
- 5.map中markers标点在vue中自定义的图片大小和气泡颜色等会失效还有其他属性也会失效,这就是map组件需要使用nvue开发的原因之一
- 6.根据接口请求的数据实现markers标点时不能将一个一个的push进来,这样会导致标点有的时候显示有的时候不显示,解决办法就是将循环push到的数组重新赋给一个新数组
7.有错误和不足的地方希望大佬指点
<map :style="{ height: nowMapIndex ? nintyPercentScreenHeight : seventyPercentScreenHeight, width: '750rpx' }"
:markers="map"
:longitude="lon"
:latitude="lat"
@markertap="Tmarkertap"></map>
<script>
import icon from '../../static/info.png';
export default {
data() {
return {
nowMapIndex: true,
phoneHeight: '',
phoneWidth: '',
lon: '120.977643',
lat: '31.386348',
markers: [],
map:[]
};
},
onShow() {
let th = this;
uni.request({
url: 'https://',
data: {
TenantId: ''
},
success(res) {
const list = res.data.data.items;
console.log(list);
for (let i = 0; i < list.length; i++) {
th.markers.push({
id: list[i].id,
latitude: list[i].lat,
longitude: list[i].lon,
iconPath: icon,
width: 40,
height: 40,
});
}
console.log(th.markers);
th.map=th.markers
console.log(th.map)
}
});
},
onReady() {
let _this = this;
uni.getSystemInfo({
success(res) {
_this.phoneHeight = res.windowHeight;
_this.phoneWidth = res.windowWidth;
}
});
},
computed: {
nintyPercentScreenHeight() {
if (this.phoneHeight !== '' && this.phoneWidth !== '') {
return (750 / this.phoneWidth) * this.phoneHeight * 1 + 'rpx';
} else {
return '1250rpx';
}
},
seventyPercentScreenHeight() {
if (this.phoneHeight !== '' && this.phoneWidth !== '') {
return (750 / this.phoneWidth) * this.phoneHeight * 0.7 + 'rpx';
} else {
return '1000rpx';
}
}
},
methods: {
Tmarkertap(e) {
console.log('点击标记点', e.detail.markerId);
},