楼栋地图
This commit is contained in:
liuye
@@ -12,6 +12,8 @@
|
||||
import Detail from './components/detail'
|
||||
import Add from './components/add'
|
||||
import List from './components/list'
|
||||
import SearchMap from './components/searchMap'
|
||||
import Map from './components/map'
|
||||
|
||||
export default {
|
||||
name: 'AppBuilding',
|
||||
@@ -19,12 +21,12 @@ export default {
|
||||
|
||||
data() {
|
||||
return {
|
||||
component: 'Add',
|
||||
component: 'Map',
|
||||
params: {}
|
||||
}
|
||||
},
|
||||
|
||||
components: { Detail, Add, List },
|
||||
components: { Detail, Add, List, SearchMap, Map },
|
||||
|
||||
methods: {
|
||||
onChange(e) {
|
||||
|
||||
BIN
src/apps/AppBuilding/components/img/back-icon.png
Normal file
BIN
src/apps/AppBuilding/components/img/back-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 545 B |
BIN
src/apps/AppBuilding/components/img/build-icon.png
Normal file
BIN
src/apps/AppBuilding/components/img/build-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 866 B |
BIN
src/apps/AppBuilding/components/img/del-icon.png
Normal file
BIN
src/apps/AppBuilding/components/img/del-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 757 B |
BIN
src/apps/AppBuilding/components/img/search-icon.png
Normal file
BIN
src/apps/AppBuilding/components/img/search-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
src/apps/AppBuilding/components/img/user-icon.png
Normal file
BIN
src/apps/AppBuilding/components/img/user-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 892 B |
214
src/apps/AppBuilding/components/map.vue
Normal file
214
src/apps/AppBuilding/components/map.vue
Normal file
@@ -0,0 +1,214 @@
|
||||
<template>
|
||||
<div class="map">
|
||||
<div class="build-btn">
|
||||
<img src="./img/build-icon.png" alt=""> 楼栋<br/>列表
|
||||
</div>
|
||||
<div class="map-content">
|
||||
<AiTMap :areaId="areaId" :map.sync="map" :lib.sync="lib" :ops="ops" :libraries="['service', 'tools']"></AiTMap>
|
||||
</div>
|
||||
<u-popup v-model="show" mode="bottom" border-radius="14">
|
||||
<div class="popup">
|
||||
<div class="bg"></div>
|
||||
<div class="title">恒大城西社区居委会</div>
|
||||
<p class="address">山东省济南市历城区王舍人街道恒大商业广场蓝天新城</p>
|
||||
<div class="info-flex">
|
||||
<span class="label">所属社区</span>
|
||||
<span class="value">后西一街袁集村</span>
|
||||
</div>
|
||||
<div class="info-flex">
|
||||
<span class="label">所属小区</span>
|
||||
<span class="value">蓝天新城世纪花园</span>
|
||||
</div>
|
||||
<div class="info-flex">
|
||||
<span class="label">房屋类型</span>
|
||||
<span class="value">单元(公寓)楼</span>
|
||||
</div>
|
||||
<div class="info-flex">
|
||||
<span class="label">所属网格</span>
|
||||
<span class="value">蓝天新城基础网格一</span>
|
||||
</div>
|
||||
<div class="info-flex">
|
||||
<span class="label">网格管理员</span>
|
||||
<span class="value">林珊珊</span>
|
||||
</div>
|
||||
<div class="info-flex">
|
||||
<span class="label">楼栋长</span>
|
||||
<span class="value">林珊珊 13782951281
|
||||
<img :src="$cdn + 'common/phone.png'" alt="" @click="call(item)" class="phone-icon">
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</u-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
export default {
|
||||
|
||||
data() {
|
||||
return {
|
||||
areaId: '',
|
||||
ops: {},
|
||||
lib: '',
|
||||
map: null,
|
||||
markerArr: [],
|
||||
show: true,
|
||||
value: ''
|
||||
}
|
||||
},
|
||||
computed: { ...mapState(['user']) },
|
||||
mounted() {
|
||||
this.areaId = this.user.areaId
|
||||
this.initMap()
|
||||
},
|
||||
|
||||
methods: {
|
||||
initMap() {
|
||||
//初始化地图
|
||||
|
||||
this.$nextTick(() =>{
|
||||
let {lib: TMap, map} = this
|
||||
var center = new TMap.LatLng(40.040422, 116.273521)
|
||||
var marker = null;
|
||||
var points = []
|
||||
map.setCenter(center)
|
||||
map.setZoom(18)
|
||||
|
||||
marker = new TMap.MultiMarker({
|
||||
id: 'marker-layer', // 图层id
|
||||
map: map,
|
||||
styles: {
|
||||
// 点标注的相关样式
|
||||
marker: new TMap.MarkerStyle({
|
||||
width: 25,
|
||||
height: 35,
|
||||
anchor: { x: 16, y: 32 },
|
||||
src:'',
|
||||
}),
|
||||
},
|
||||
geometries: [
|
||||
{
|
||||
// 点标注数据数组
|
||||
id: 'demo',
|
||||
styleId: 'marker',
|
||||
position: new TMap.LatLng(40.040422, 116.273521),
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
var infoWindow = null;
|
||||
var infoWindow2 = null
|
||||
var html = `<div style=" display: inline-block;padding: 6px 10px;line-height: 16px;border-radius: 24px; background: #5088FF;color: #fff;font-size: 12px;position: relative;">`
|
||||
+`腾讯大厦<span style=" width: 0;height: 0;border-left: 6px solid transparent;border-right: 6px solid transparent;border-top: 12px solid #5088FF;position: absolute;bottom: -12px;left: 50%;margin-left:-6px;"></span></div>`
|
||||
|
||||
infoWindow = new TMap.InfoWindow(
|
||||
{
|
||||
map: map,
|
||||
enableCustom: true,
|
||||
position: new TMap.LatLng(40.040422, 116.273521),
|
||||
offset: { y: -70, x: -5 },
|
||||
content: html
|
||||
},
|
||||
);
|
||||
|
||||
infoWindow2 = new TMap.InfoWindow(
|
||||
{
|
||||
map: map,
|
||||
enableCustom: true,
|
||||
position: new TMap.LatLng(40.03592, 116.27058),
|
||||
offset: { y: -70, x: -5 },
|
||||
content: html
|
||||
},
|
||||
);
|
||||
})
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
uni-page-body{
|
||||
height: 100%;
|
||||
}
|
||||
.map {
|
||||
height: 100%;
|
||||
.build-btn{
|
||||
width: 80px;
|
||||
height: 160px;
|
||||
background: #FFF;
|
||||
box-shadow: 0px 4px 8px 0px rgba(138, 138, 138, 0.5);
|
||||
border-radius: 8px;
|
||||
position: fixed;
|
||||
bottom: 136px;
|
||||
right: 24px;
|
||||
z-index: 99;
|
||||
padding: 16px 16px 0;
|
||||
box-sizing: border-box;
|
||||
font-size: 24px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #666;
|
||||
line-height: 30px;
|
||||
img{
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
.map-content{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.popup{
|
||||
padding: 0 32px 16px;
|
||||
.bg{
|
||||
width: 64px;
|
||||
height: 10px;
|
||||
background: #CCC;
|
||||
border-radius: 6px;
|
||||
margin: 32px 0 32px 344px;
|
||||
}
|
||||
.title{
|
||||
font-size: 36px;
|
||||
font-family: PingFang-SC-Heavy, PingFang-SC;
|
||||
font-weight: 800;
|
||||
color: #333;
|
||||
line-height: 50px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.address{
|
||||
font-size: 24px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #333;
|
||||
line-height: 34px;
|
||||
word-break: break-all;
|
||||
}
|
||||
.info-flex{
|
||||
padding: 26px 0 30px 0;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #D8DDE6;
|
||||
line-height: 40px;
|
||||
font-size: 28px;
|
||||
.label{
|
||||
display: inline-block;
|
||||
width: 160px;
|
||||
font-weight: 800;
|
||||
color: #333;
|
||||
}
|
||||
.value{
|
||||
color: #666;
|
||||
font-size: 26px;
|
||||
.phone-icon{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
vertical-align: sub;
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
298
src/apps/AppBuilding/components/searchMap.vue
Normal file
298
src/apps/AppBuilding/components/searchMap.vue
Normal file
@@ -0,0 +1,298 @@
|
||||
<template>
|
||||
<div class="searchMap">
|
||||
<div class="grid-input">
|
||||
<!-- <img src="./img/search-icon.png" alt="" class="search-icon"> -->
|
||||
<img src="./img/back-icon.png" alt="" class="back-icon">
|
||||
<input type="text" class="input" placeholder="请输入姓名、房屋信息" />
|
||||
<img src="./img/del-icon.png" alt="" class="del-icon">
|
||||
<span class="search-btn">搜索</span>
|
||||
</div>
|
||||
<div class="search-list" v-if="show">
|
||||
<div class="title border">
|
||||
<img src="./img/search-icon.png" alt="" class="search-icon">李宁
|
||||
</div>
|
||||
<div class="item border">
|
||||
<img src="./img/user-icon.png" alt="" class="search-icon user-icon">
|
||||
<div class="item-content">
|
||||
<h3>李宁宁</h3>
|
||||
<p>武昌徐家棚街街道武汉绿地金融城西斯莱公馆A座22楼…</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="build-btn">
|
||||
<img src="./img/build-icon.png" alt=""> 楼栋<br/>列表
|
||||
</div>
|
||||
<div class="map-content">
|
||||
<AiTMap :areaId="areaId" :map.sync="map" :lib.sync="lib" :ops="ops" :libraries="['service', 'tools']"></AiTMap>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
export default {
|
||||
|
||||
data() {
|
||||
return {
|
||||
areaId: '',
|
||||
ops: {},
|
||||
lib: '',
|
||||
map: null,
|
||||
markerArr: [],
|
||||
show: false,
|
||||
value: ''
|
||||
}
|
||||
},
|
||||
computed: { ...mapState(['user']) },
|
||||
mounted() {
|
||||
this.areaId = this.user.areaId
|
||||
this.initMap()
|
||||
},
|
||||
|
||||
methods: {
|
||||
initMap() {
|
||||
//初始化地图
|
||||
|
||||
this.$nextTick(() =>{
|
||||
let {lib: TMap, map} = this
|
||||
var center = new TMap.LatLng(40.040422, 116.273521)
|
||||
var marker = null;
|
||||
var points = []
|
||||
map.setCenter(center)
|
||||
map.setZoom(18)
|
||||
|
||||
marker = new TMap.MultiMarker({
|
||||
id: 'marker-layer', // 图层id
|
||||
map: map,
|
||||
styles: {
|
||||
// 点标注的相关样式
|
||||
marker: new TMap.MarkerStyle({
|
||||
width: 25,
|
||||
height: 35,
|
||||
anchor: { x: 16, y: 32 },
|
||||
src:'',
|
||||
}),
|
||||
},
|
||||
geometries: [
|
||||
{
|
||||
// 点标注数据数组
|
||||
id: 'demo',
|
||||
styleId: 'marker',
|
||||
position: new TMap.LatLng(40.040422, 116.273521),
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
var infoWindow = null;
|
||||
var infoWindow2 = null
|
||||
var html = `<div style=" display: inline-block;padding: 6px 10px;line-height: 16px;border-radius: 24px; background: #5088FF;color: #fff;font-size: 12px;position: relative;">`
|
||||
+`腾讯大厦<span style=" width: 0;height: 0;border-left: 6px solid transparent;border-right: 6px solid transparent;border-top: 12px solid #5088FF;position: absolute;bottom: -12px;left: 50%;margin-left:-6px;"></span></div>`
|
||||
|
||||
infoWindow = new TMap.InfoWindow(
|
||||
{
|
||||
map: map,
|
||||
enableCustom: true,
|
||||
position: new TMap.LatLng(40.040422, 116.273521),
|
||||
offset: { y: -70, x: -5 },
|
||||
content: html
|
||||
},
|
||||
);
|
||||
|
||||
infoWindow2 = new TMap.InfoWindow(
|
||||
{
|
||||
map: map,
|
||||
enableCustom: true,
|
||||
position: new TMap.LatLng(40.03592, 116.27058),
|
||||
offset: { y: -70, x: -5 },
|
||||
content: html
|
||||
},
|
||||
);
|
||||
})
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
uni-page-body{
|
||||
height: 100%;
|
||||
}
|
||||
.searchMap {
|
||||
height: 100%;
|
||||
.grid-input{
|
||||
width: 720px;
|
||||
height: 88px;
|
||||
background: #FFF;
|
||||
box-shadow: 0px 4px 8px 0px rgba(192, 185, 185, 0.5);
|
||||
border-radius: 16px;
|
||||
position: fixed;
|
||||
top: 24px;
|
||||
left: 16px;
|
||||
z-index: 99;
|
||||
padding: 16px 20px;
|
||||
box-sizing: border-box;
|
||||
.search-icon{
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
.input{
|
||||
display: inline-block;
|
||||
padding: 8px 0;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
width: 480px;
|
||||
font-size: 28px;
|
||||
font-family: MicrosoftYaHei;
|
||||
color: #666;
|
||||
}
|
||||
.back-icon{
|
||||
width: 16px;
|
||||
height: 32px;
|
||||
margin-right: 24px;
|
||||
vertical-align: super;
|
||||
}
|
||||
.del-icon{
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
vertical-align: super;
|
||||
margin-right: 30px;
|
||||
}
|
||||
.search-btn{
|
||||
display: inline-block;
|
||||
width: 80px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
text-align: right;
|
||||
font-size: 28px;
|
||||
font-family: MicrosoftYaHei;
|
||||
color: #1365DD;
|
||||
border-left: 1px solid #DEDFE0;
|
||||
vertical-align: top;
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
.search-list{
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
top: 128px;
|
||||
left: 0;
|
||||
padding: 0 44px;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
z-index: 99;
|
||||
.search-icon{
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
margin-right: 16px;
|
||||
vertical-align: sub;
|
||||
}
|
||||
.title{
|
||||
height: 82px;
|
||||
line-height: 82px;
|
||||
font-size: 26px;
|
||||
font-family: MicrosoftYaHeiSemibold;
|
||||
color: #1365DD;
|
||||
}
|
||||
.item{
|
||||
padding: 22px 0 24px 0;
|
||||
}
|
||||
.item-content{
|
||||
display: inline-block;
|
||||
width: 610px;
|
||||
color: #333;
|
||||
h3{
|
||||
font-size: 28px;
|
||||
font-family: MicrosoftYaHeiSemibold;
|
||||
line-height: 32px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
p{
|
||||
width: 100%;
|
||||
font-size: 24px;
|
||||
font-family: MicrosoftYaHei;
|
||||
line-height: 32px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
.user-icon{
|
||||
vertical-align: top;
|
||||
}
|
||||
.border{
|
||||
border-bottom: 1px solid #DEDFE1;
|
||||
}
|
||||
}
|
||||
.build-btn{
|
||||
width: 80px;
|
||||
height: 160px;
|
||||
background: #FFF;
|
||||
box-shadow: 0px 4px 8px 0px rgba(138, 138, 138, 0.5);
|
||||
border-radius: 8px;
|
||||
position: fixed;
|
||||
bottom: 136px;
|
||||
right: 24px;
|
||||
z-index: 99;
|
||||
padding: 16px 16px 0;
|
||||
box-sizing: border-box;
|
||||
font-size: 24px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #666;
|
||||
line-height: 30px;
|
||||
img{
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
.map-content{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.popup{
|
||||
padding: 0 32px 16px;
|
||||
.bg{
|
||||
width: 64px;
|
||||
height: 10px;
|
||||
background: #CCC;
|
||||
border-radius: 6px;
|
||||
margin: 32px 0 32px 344px;
|
||||
}
|
||||
.title{
|
||||
font-size: 36px;
|
||||
font-family: PingFang-SC-Heavy, PingFang-SC;
|
||||
font-weight: 800;
|
||||
color: #333;
|
||||
line-height: 50px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.info-flex{
|
||||
padding: 26px 0 30px 0;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #D8DDE6;
|
||||
line-height: 40px;
|
||||
font-size: 28px;
|
||||
.label{
|
||||
display: inline-block;
|
||||
width: 160px;
|
||||
font-weight: 800;
|
||||
color: #333;
|
||||
}
|
||||
.value{
|
||||
color: #666;
|
||||
font-size: 26px;
|
||||
.phone-icon{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
vertical-align: sub;
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user