99 lines
2.2 KiB
Vue
99 lines
2.2 KiB
Vue
<template>
|
|
<view class="page">
|
|
<u-navbar is-back="false" :title="title" :border-bottom="false" :background="bgc" title-color='#000'
|
|
title-size='36' :title-bold='true' height='45' id="navbar">
|
|
</u-navbar>
|
|
<map class="map" id="map" ref="map" :scale="zoomSize" :latitude="latitude" :longitude="longitude"
|
|
:show-location='true' :markers="markers"></map>
|
|
|
|
|
|
<tab-bar :indexs='3' style=""></tab-bar>
|
|
<span style="">福鼎蜂场</span>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
bgc: {
|
|
backgroundColor: " #F4FAF8",
|
|
},
|
|
title: "地图",
|
|
latitude: '39.916527',
|
|
longitude: ' 116.397128',
|
|
isMap: false,
|
|
zoomSize: 15,
|
|
markers: [{
|
|
id: 1,
|
|
latitude: 39.90469,
|
|
longitude: 116.40717,
|
|
|
|
iconPath: 'https://api.ccttiot.com/smartmeter/img/static/uYrX2QTRLdVVDTB3E5cp',
|
|
width: 39,
|
|
height: 46,
|
|
callout: {
|
|
content: '福鼎蜂场福建省宁德市福鼎市太姥山镇秦屿大道二号\n', // 修改为你想要显示的文字内容
|
|
color: '#000', // 修改为文字颜色
|
|
fontSize: 14, // 修改为文字大小
|
|
borderRadius: 10, // 修改为气泡圆角大小
|
|
bgColor: '#FFFFFF', // 修改为气泡背景颜色
|
|
padding: 10, // 修改为气泡内边距
|
|
display: 'ALWAYS', // 修改为气泡的显示策略
|
|
textAlign: 'center', // 设置文字对齐方式
|
|
|
|
}
|
|
}, {
|
|
id: 2,
|
|
latitude: 39.90969,
|
|
longitude: 116.41217,
|
|
iconPath: 'https://api.ccttiot.com/smartmeter/img/static/uYrX2QTRLdVVDTB3E5cp',
|
|
width: 39,
|
|
height: 46,
|
|
callout: {
|
|
content: '未上架', // 修改为你想要显示的文字内容
|
|
color: '#ffffff', // 修改为文字颜色
|
|
fontSize: 14, // 修改为文字大小
|
|
borderRadius: 10, // 修改为气泡圆角大小
|
|
bgColor: '#000000', // 修改为气泡背景颜色
|
|
padding: 6, // 修改为气泡内边距
|
|
display: 'ALWAYS', // 修改为气泡的显示策略
|
|
}
|
|
}],
|
|
|
|
|
|
}
|
|
},
|
|
onLoad() {
|
|
|
|
},
|
|
onShow() {
|
|
|
|
},
|
|
methods: {
|
|
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background-color: #FAFDFD;
|
|
}
|
|
|
|
.page {
|
|
// position: relative;
|
|
width: 750rpx;
|
|
|
|
.map {
|
|
width: 750rpx;
|
|
height: 100vh;
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
</style> |