123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281 |
- <template>
- <view>
- <view class="page-body">
- <view class="page-section page-section-gap">
- <map scale="10" ubkey='CQIBZ-P2MR5-PM3IB-QRKTX-SEVJE-GYF34' :showScale="false" :showLocation="true" :showCompass="false" enableZoom="true" enableScroll="true" enableBuilding="true" enable3D="true" id="myMap" style="width: 100%; height: 600px;"
- :latitude="latitude"
- :longitude="longitude"
- :markers="markersIn"
- :layerStyle="mapStyle"
- @markertap='markertap'
- @anchorpointtap='anchorpointtap'
- >
- </map>
- </view>
-
- <lPainter
- style="position: fixed;left:0px;top: -500px;"
- isRenderImage
- :board="painter.base"
- @success="(e)=>{painter.path = e; painter.wait=0}"
- />
- </view>
- </view>
- </template>
- <script>
- import lPainter from '@/components/lime-painter/index.vue'
-
- export default {
- components:{
- lPainter
- },
- props: {
-
- markers: {
- type: Array,
- default: [{
- id: 1,
- latitude: 30.6034799,
- longitude: 104.1132550,
- // iconPath: "../../static/hch-position/门店.png",
- width: '38rpx',
- height: '40rpx',
- joinCluster: true, // 指定了该参数才会参与聚合
- callout: {
- content: "门店1号店",
- borderRadius: 10,
- padding: 5,
- display: "ALWAYS",
- transform: "tranlateY(20px)"
- }
- },
- ]
- }
- },
- data() {
- return {
- latitude: 30.6034799,
- longitude: 104.1132550,
- mapStyle: 1, //个性化地图
- markersIn: [],
- isUpdate: false,
- painter:{
- wait: 0,
- base:{
- width: '94rpx',
- height: '110rpx',
- radius: "100rpx",
- views:[
- {
- type: 'image',
- src: '../../static/icon/late02.png',
- css: {
- left: '0rpx',
- top: '0rpx',
- width: '90rpx',
- height: '100rpx',
- }
- },
- {
- type: 'image',
- src: '',
- css: {
- left: '10rpx',
- top: '8rpx',
- width: '70rpx',
- height: '70rpx',
- borderRadius: '30rpx'
- }
- }
- ]
- },
- path:""
- },
- }
- },
- onReady() {
- this._mapContext = uni.createMapContext("map", this);
- // 仅调用初始化,才会触发 on.("markerClusterCreate", (e) => {})
- this._mapContext.initMarkerCluster({
- enableDefaultStyle: false,
- zoomOnClick: true,
- gridSize: 60,
- complete(res) {
- console.log('initMarkerCluster', res)
- }
- });
- this._mapContext.on("markerClusterCreate", (e) => {
- console.log("markerClusterCreate", e);
- });
- // this.addMarkers();
- },
- methods: {
- goLocation(la,lo){
- this.latitude = la
- this.longitude = lo
- },
- //生成图片
- generateImg(imgUrl){
- if(this.painter.wait != 0) return new Promise();
- this.painter.show = false;
- this.painter.base.views[1].src = imgUrl;
- this.painter.show = true;
- this.painter.wait = 1;
-
- return new Promise(resolve=>{
- let timer = setInterval(()=>{
- if(this.painter.wait === 0){
- clearInterval(timer);
- resolve(this.painter.path);
- }else if(this.painter.wait <= 3000){
- this.painter.wait += 10
- }else{
- clearInterval(timer);
- this.painter.wait = 0;
- resolve(this.painter.path);
- }
- }, 10);
- })
- },
- // 点击标记点时触发,e.detail = {markerId}
- markertap(e) {
- this.markersIn.forEach((item,index) => {
- if(e.markerId === item.id){
- this.generateImg(item.active.iconPath).then(()=>{
- item.width = item.active.width;
- item.height = item.active.height;
- item.iconPath = this.painter.path;
- item.isActive = true;
- console.log(item.latitude,item.longitude)
- this.latitude = item.latitude
- this.longitude = item.longitude
- this.$set(this.markersIn, index, item);
- this.addMarkers()
- })
- return;
- }else if(item.isActive){
- item.width = item.noActive.width;
- item.height = item.noActive.height;
- item.iconPath = item.noActive.iconPath;
- item.isActive = false;
- this.$set(this.markersIn, index, item);
- this.addMarkers()
- }
- })
-
- this.isUpdate = false
- this.$emit('moveToMarkId',e.markerId)
- },
- //点击定位标时触发,e.detail = {longitude, latitude}
- anchorpointtap(e) {
- console.log('---->定位点', e.detail);
- },
- addMarkers() {
- this._mapContext.addMarkers({
- markers: this.markersIn,
- clear: false,
- complete(res) {
- console.log('addMarkers', res)
- }
- })
- },
- },
- onShow() {
- this.markersIn = this.markers;
- },
- watch:{
- 'markers': {
- handler(val,oldVal) {
- this.markersIn = this.markers;
- },
- // immediate: true
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- .content {
- text-align: center;
- height: 400rpx;
- }
- .page-section {
- z-index: 0;
- }
- .store-tips {
- width: 600rpx;
- height: 100rpx;
- margin: 10rpx auto;
- border-radius: 10rpx;
- position: absolute;
- top: 10rpx;
- left: 50%;
- transform: translate(-50%, 0);
- z-index: 2;
- overflow: hidden;
- .store-des-box {
- background: #fff;
- }
- .store-img {
- width: 80rpx;
- height: 80rpx;
- border-radius: 10rpx;
- margin: 10rpx;
- float: left;
- }
- .store-des {
- padding-top: 8rpx;
- float: left;
- line-height: 1;
- font-size: 22rpx;
- color: #666;
- padding-left: 20rpx;
- .store-name {
- font-weight: 600;
- color: deeppink;
- }
- }
- .store-clear {
- width: 30rpx;
- height: 30rpx;
- position: absolute;
- top: 7rpx;
- right: 7rpx;
- margin: 30rpx;
- }
- }
- .address-icon {
- width: 38rpx;
- height: 40rpx;
- position: absolute;
- top: 22%;
- left: 50%;
- z-index: 2;
- margin-bottom: -20rpx;
- margin-left: -20rpx;
- }
- .near-num {
- padding: 10rpx 20rpx;
- border-radius: 10rpx;
- position: absolute;
- top: 17%;
- left: 50%;
- z-index: 2;
- font-size: 24rpx;
- background: #fff;
- transform: translate(-50%, 0);
- }
- </style>
|