- <template>
- <view class="homePage">
- <map id="map" longitude="120.131441" latitude="30.279383" :scale="scale" :controls="controls" :markers="markers"
- polyline="polyline" :circles="circles" @regionChange="regionchange" @tap="tap" @markerTap="markertap" @controlTap="controltap"
     show-location style="width: 100%; height: 300px;" :include-points="includePoints"></map>
 <button @tap="changeScale">改scale</button>
 <button @tap="getCenterLocation">getCenterLocation</button>
 <button @tap="moveToLocation">moveToLocation</button>
 <button @tap="changeCenter">改center</button>
 <button @tap="changeMarkers">改markers</button>
 <!-- <map
 v-if="isShowMap" id="userMap" class="map"
- longitude="currentLongitude"
- latitude="currentLatitude"
- show-location="true"
- controls="controls2"
- markers="covers"
- scale="scale"
        @controltap="controltap"
 @markertap="markertap"
 @regionchange="regionchange"
 ></map> -->
 </view>
 </template>
<script>
export default {  
    data() {  
        return {  
            scale: 14,  
            longitude: 120.131441,  
            latitude: 30.279383,  
            markers: [{  
                iconPath: "/static/image/icon_kefu_3x.png",  
                id: 10,  
                latitude: 30.279383,  
                longitude: 120.131441,  
                width: 50,  
                height: 50,  
                customCallout: {  
                    type: 1,  
                    time: '1',  
                },  
                fixedPoint: {  
                    originX: 400,  
                    originY: 400,  
                },  
                iconAppendStr: '黄龙时代广场黄龙时代广场黄龙时代广场黄龙时代广场test'  
            }],  
            includePoints: [{  
                latitude: 30.279383,  
                longitude: 120.131441,  
            }],  
            polyline: [{  
                points: [{  
                    longitude: 120.131441,  
                    latitude: 30.279383  
                }, {  
                    longitude: 120.128821,  
                    latitude: 30.278200  
                }, {  
                    longitude: 120.131618,  
                    latitude: 30.277600  
                }, {  
                    longitude: 120.132520,  
                    latitude: 30.279393  
                }, {  
                    longitude: 120.137517,  
                    latitude: 30.279383  
                }],  
                color: "#FF0000DD",  
                width: 5,  
                dottedLine: false  
            }],  
            circles: [{  
                latitude: 30.279383,  
                longitude: 120.131441,  
                color: "#000000AA",  
                fillColor: "#000000AA",  
                radius: 80,  
                strokeWidth: 5,  
            }],  
            controls: [{  
                id: 5,  
                iconPath: '/static/image/icon_mine_3x.png',  
                position: {  
                    left: 0,  
                    top: 300 - 50,  
                    width: 50,  
                    height: 50  
                },  
                clickable: true  
            }],  
        }  
    },  
    onLoad() {  
        const that = this;  
        this.mapCtx = my.createMapContext('userMap');  
        this.mapCtx.showsCompass({  
            isShowsCompass: 0  
        });  
        this.mapCtx.showsScale({  
            isShowsScale: 0  
        });  
    },  
    methods: {  
        getCenterLocation() {  
            this.mapCtx.getCenterLocation(function(res) {  
                console.log(res.longitude)  
                console.log(res.latitude)  
            })  
        },  
        moveToLocation() {  
            this.mapCtx.moveToLocation()  
        },  
        regionchange(e) {  
            console.log('regionchange', e);  
            // 注意:如果缩小或者放大了地图比例尺以后,请在 onRegionChange 函数中重新设置 data 的  
            // scale 值,否则会出现拖动地图区域后,重新加载导致地图比例尺又变回缩放前的大小。  
            if (e.type === 'end') {  //                  this.setData({
//                      scale: e.scale
//                  });
this.scale = e.scale;
}
},  
        markertap(e) {  
            console.log('marker tap', e);  
        },  
        controltap(e) {  
            console.log('control tap', e);  
        },  
        tap() {  
            console.log('tap:');  
        },  
        changeScale() {  //              this.setData({
//                  scale: 8,
//              });
this.scale = 8;
},  
        changeCenter() {  //              this.setData({
//                  longitude: 113.324520,
//                  latitude: 23.199994,
//                  includePoints: [{
//                      latitude: 23.199994,
//                      longitude: 113.324520,
//                  }],
//              });
},
//支持地图不接受手势事件, isGestureEnable为1 表示支持,为0表示不支持
gestureEnable() {
this.mapCtx.gestureEnable({
isGestureEnable: 1
});
},
//地图是否显示比例尺, showsScale 为1表示显示,为0表示不显示
showsScale() {
this.mapCtx.showsScale({
isShowsScale: 1
});
},
//地图是否显示指南针, showsCompass 为1表示显示,为0表示不显示
showsCompass() {
this.mapCtx.showsCompass({
isShowsCompass: 1
});
},
changeMarkers() {
this.setData({
markers: [{
iconPath: "/image/green_tri.png",
id: 10,
latitude: 21.21229,
longitude: 113.324520,
width: 50,
height: 50
}],
includePoints: [{
latitude: 21.21229,
longitude: 113.324520,
}],
});
},
onGetAuthorize() {
my.getPhoneNumber({
success: (res) => {
let encryptedData = res.response
console.log(encryptedData)
},
fail: (res) => {
console.log(res)
console.log('getPhoneNumber_fail')
},
});
},
getAuthCode() {
my.getAuthCode({
scopes: 'auth_user', // 主动授权:auth_user,静默授权:auth_base。或者其它scope
success: (res) => {
console.log(res)
if (res.authCode) {
// 认证成功
// 调用自己的服务端接口,让服务端进行后端的授权认证,并且种session,需要解决跨域问题
my.httpRequest({
url: 'https://isv.com/auth', // 该url是您自己的服务地址,实现的功能是服务端拿到authcode去开放平台进行token验证
data: {
authcode: res.authCode,
},
success: () => {
// 授权成功并且服务器端登录成功
},
fail: () => {
// 根据自己的业务场景来进行错误处理
},
});
}
},
});
},
controltap(e) {
console.log('control tap', e);
// 回到当前位置
if (e.controlId === 2) {
this.mapCtx.moveToLocation();
}
if (e.controlId === 4) {
my.navigateTo({
// url: '/pages/personCenter/orderList/orderList'
url: '/pages/personCenter/test/test'
});
}
},
// 点击网点
markertap(e) {
console.log(e)
this.data.shopDataList.map(item => {
if (item.shopStaticInfo.shopSeq === Number(e.markerId)) {
this.setData({
'currentShopName': item.shopStaticInfo.shopName
})
}  
            })  
        },  
    }     
}  </script>
模拟器截图  
 
手机预览截图
 
             
             
             
			 
                                        
                                    
 
                                                                    
