102 lines
2.1 KiB
Vue
102 lines
2.1 KiB
Vue
<template>
|
|
<view>
|
|
<view class="search-box">
|
|
<view class="search-box-input">
|
|
<u-input placeholder="热门店铺" placeholder-style="color: #888888" prefixIcon="search"
|
|
prefixIconStyle="font-size: 24px;color: #888888;" border="true">
|
|
</u-input>
|
|
</view>
|
|
</view>
|
|
<view class="content">
|
|
<map id="map" @markertap="markerClick" class="map" :markers="marker" :show-location="true" :latitude="lat"
|
|
:longitude="lng"></map>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
lat: '30.57',
|
|
lng: '104.07',
|
|
marker: []
|
|
}
|
|
},
|
|
async onShow() {
|
|
// await this.getLifeTypeList();
|
|
// await this.getStatusCode()
|
|
// if (!this.lat && !this.lng) {
|
|
// await this.chooseSpot()
|
|
// } else {
|
|
// if (this.isGd) {
|
|
// await this.getPoiAround();
|
|
// } else {
|
|
// await this.getPoiPage();
|
|
// }
|
|
// }
|
|
// 地图
|
|
this._mapContext = uni.createMapContext("map", this);
|
|
this._mapContext.initMarkerCluster({
|
|
enableDefaultStyle: false,
|
|
zoomOnClick: true,
|
|
gridSize: 60,
|
|
complete(res) {
|
|
console.log('initMarkerCluster', res)
|
|
}
|
|
});
|
|
this._mapContext.on("markerClusterCreate", (e) => {
|
|
console.log("markerClusterCreate", e);
|
|
});
|
|
},
|
|
methods: {
|
|
// 图标点击
|
|
markerClick(e) {
|
|
console.log('图标点击', e);
|
|
// let markerId = e.markerId;
|
|
// this.marker.forEach(item => {
|
|
// if (markerId === item.id) {
|
|
// if (this.isGd) {
|
|
// uni.navigateTo({
|
|
// url: `/pages/communityLive/details?data=${item.label}&type=gd&name=${this.name}`
|
|
// })
|
|
// } else {
|
|
// uni.navigateTo({
|
|
// url: `/pages/communityLive/details?id=${item.id}&name=${this.name}&type=fgd`
|
|
// })
|
|
// }
|
|
// }
|
|
// })
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.search-box {
|
|
position: absolute;
|
|
z-index: 2;
|
|
top: 20rpx;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
|
|
.search-box-input {
|
|
width: 580rpx;
|
|
height: 62rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 12rpx;
|
|
opacity: 0.85;
|
|
}
|
|
}
|
|
|
|
// 地图
|
|
.content {
|
|
width: 100%;
|
|
height: 460rpx;
|
|
}
|
|
|
|
.map {
|
|
width: 100%;
|
|
height: 100vh;
|
|
}
|
|
</style> |