evcardxx
evcardxx
  • 发布:2019-01-07 17:07
  • 更新:2019-01-09 09:17
  • 阅读:3615

地图组件支付宝小程序特定API无法生效

分类:uni-app
<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>
模拟器截图

手机预览截图

2019-01-07 17:07 负责人:无 分享
已邀请:
evcardxx

evcardxx (作者)

手机预览模式,中间一个图标都不见了

Neil_HL

Neil_HL

我测试了下markers应该是生效的,你所api不生效,具体是那个api,我测试下

evcardxx

evcardxx (作者)

 [{  
      iconPath: "/image/green_tri.png",  
      id: 10,  
      latitude: 30.279383,  
      longitude: 120.131441,  
      width: 50,  
      height: 50  
    },{  
      iconPath: "/image/green_tri.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'  
    }]

我想要的是第二个marker配置生效,我这边好像不生效的

该问题目前已经被锁定, 无法添加新回复