h5-elab-open-ownerUnion/pages/API/map/map.nvue

<template>
    <view class="content">
        <map class="map" id="map1" ref="map1" :controls="controls" :scale="scale" :longitude="location.longitude"
            :latitude="location.latitude" :show-location="showLocation" :enable-3D="enable3D" :rotate="rotate" :skew="skew"
            :show-compass="showCompass" :enable-overlooking="enableOverlooking" :enable-zoom="enableZoom"
            :enable-scroll="enableScroll" :enable-rotate="enableRotate" :enable-satellite="enableSatellite"
            :enable-traffic="enableTraffic" :markers="markers" :polyline="polyline" :circles="circles" :polygons="polygons"
            :include-points="includePoints" @tap="maptap" @controltap="oncontroltap" @markertap="onmarkertap"
            @callouttap="oncallouttap" @poitap="onpoitap" @updated="onupdated" @regionchange="onregionchange"></map>
        <scroll-view class="scrollview" scroll-y="true">
            <!-- <view class="list-item">
                <text class="list-text">显示3D楼块</text>
                <switch :checked="enable3D" @change="enableThreeD" />
            </view>
            <view class="list-item">
                <text class="list-text">显示指南针</text>
                <switch :checked="showCompass" @change="changeShowCompass" />
            </view>
            <view class="list-item">
                <text class="list-text">开启俯视</text>
                <switch :checked="enableOverlooking" @change="changeEnableOverlooking" />
            </view>
            <view class="list-item">
                <text class="list-text">是否支持缩放</text>
                <switch :checked="enableZoom" @change="changeEnableZoom" />
            </view>
            <view class="list-item">
                <text class="list-text">是否支持拖动</text>
                <switch :checked="enableScroll" @change="changeEnableScroll" />
            </view>
            <view class="list-item">
                <text class="list-text">是否支持旋转</text>
                <switch :checked="enableRotate" @change="changeEnableRotate" />
            </view>
            <view class="list-item">
                <text class="list-text">是否开启卫星图</text>
                <switch :checked="enableSatellite" @change="changeEnableSatellite" />
            </view>
            <view class="list-item">
                <text class="list-text">是否开启实时路况</text>
                <switch :checked="enableTraffic" @change="changeEnableTraffic" />
            </view> -->
				<!-- #ifndef MP-JD -->
            <button class="button" @click="changeScale">changeScale</button>
            <button class="button" @click="changeRotate">changeRotate</button>
				<button class="button" @click="changeSkew">skew</button>
				<!-- #endif -->
            <button class="button" @click="addMarkers">addMarkers</button>
            <button class="button" @click="addPolyline">addPolyline</button>
				<!-- #ifndef MP-JD -->
            <button class="button" @click="addPolygons">addPolygons</button>
				<!-- #endif -->
            <button class="button" @click="addCircles">addCircles</button>
            <button class="button" @click="includePoint">includePoints</button>
            <button class="button" @click="handleGetCenterLocation">getCenterLocation</button>
            <button class="button" @click="handleGetRegion">getRegion</button>
				<!-- #ifndef MP-JD -->
            <button class="button" @click="handleTranslateMarker">translateMarker</button>
				<!-- #endif -->
        </scroll-view>
    </view>
</template>

<script>
    const testMarkers = [{
            id: 0,
            latitude: 39.989631,
            longitude: 116.481018,
            title: '方恒国际 阜通东大街6号',
            zIndex: '1',
            rotate: 0,
            width: 20,
            height: 20,
            anchor: {
                x: 0.5,
                y: 1
            },
            callout: {
                content: '方恒国际 阜通东大街6号',
                color: '#00BFFF',
                fontSize: 10,
                borderRadius: 4,
                borderWidth: 1,
                borderColor: '#333300',
                bgColor: '#CCFF99',
                padding: '5',
                display: 'ALWAYS'
            }
        },
        {
            id: 1,
            latitude: 39.9086920000,
            longitude: 116.3974770000,
            title: '天安门',
            zIndex: '1',
            iconPath: '/static/location.png',
            width: 40,
            height: 40,
            anchor: {
                x: 0.5,
                y: 1
            },
            callout: {
                content: '首都北京\n天安门',
                color: '#00BFFF',
                fontSize: 12,
                borderRadius: 2,
                borderWidth: 0,
                borderColor: '#333300',
                bgColor: '#CCFF11',
                padding: '1',
                display: 'ALWAYS'
            }
        }
    ];
    const testPolyline = [{
            points: [{
                    latitude: 39.925539,
                    longitude: 116.279037
                },
                {
                    latitude: 39.925539,
                    longitude: 116.520285
                }
            ],
            color: '#FFCCFF',
            width: 7,
            dottedLine: true,
            arrowLine: true,
            borderColor: '#000000',
            borderWidth: 2
        },
        {
            points: [{
                    latitude: 39.938698,
                    longitude: 116.275177
                },
                {
                    latitude: 39.966069,
                    longitude: 116.289253
                },
                {
                    latitude: 39.944226,
                    longitude: 116.306076
                },
                {
                    latitude: 39.966069,
                    longitude: 116.322899
                },
                {
                    latitude: 39.938698,
                    longitude: 116.336975
                }
            ],
            color: '#CCFFFF',
            width: 5,
            dottedLine: true,
            arrowLine: true,
            borderColor: '#CC0000',
            borderWidth: 3
        }
    ];
    const testPolygons = [{
            points: [{
                    latitude: 39.781892,
                    longitude: 116.293413
                },
                {
                    latitude: 39.787600,
                    longitude: 116.391842
                },
                {
                    latitude: 39.733187,
                    longitude: 116.417932
                },
                {
                    latitude: 39.704653,
                    longitude: 116.338255
                }
            ],
            fillColor: '#FFCCFF',
            strokeWidth: 3,
            strokeColor: '#CC99CC',
            zIndex: 11
        },
        {
            points: [{
                    latitude: 39.887600,
                    longitude: 116.518932
                },
                {
                    latitude: 39.781892,
                    longitude: 116.518932
                },
                {
                    latitude: 39.781892,
                    longitude: 116.428932
                },
                {
                    latitude: 39.887600,
                    longitude: 116.428932
                }
            ],
            fillColor: '#CCFFFF',
            strokeWidth: 5,
            strokeColor: '#CC0000',
            zIndex: 3
        }
    ];
    const testCircles = [{
            latitude: 39.996441,
            longitude: 116.411146,
            radius: 15000,
            strokeWidth: 5,
            color: '#CCFFFF',
            fillColor: '#CC0000'
        },
        {
            latitude: 40.096441,
            longitude: 116.511146,
            radius: 12000,
            strokeWidth: 3,
            color: '#CCFFFF',
            fillColor: '#FFCCFF'
        },
        {
            latitude: 39.896441,
            longitude: 116.311146,
            radius: 9000,
            strokeWidth: 1,
            color: '#CCFFFF',
            fillColor: '#CC0000'
        }
    ];
    const testIncludePoints = [{
            latitude: 39.989631,
            longitude: 116.481018,
        },
        {
            latitude: 39.9086920000,
            longitude: 116.3974770000,
        }
    ];
    export default {
        data() {
            return {
                location: {
                    longitude: 116.3974770000,
                    latitude: 39.9086920000
                },
                controls: [{
                    id: 1,
                    position: {
                        left: 5,
                        top: 180,
                        width: 30,
                        height: 30
                    },
                    iconPath: '/static/logo.png',
                    clickable: true
                }],
                showLocation: false,
                scale: 13,
                showCompass: true,
                enable3D: true,
                enableOverlooking: true,
                enableOverlooking: true,
                enableZoom: true,
                enableScroll: true,
                enableRotate: true,
                enableSatellite: false,
                enableTraffic: false,
                polyline: [],
                markers: [],
                polygons: [],
                circles: [],
                includePoints: [],
                rotate: 0,
                skew: 0
            }
        },
        onLoad() {},
        onReady() {
            this.map = uni.createMapContext("map1", this);
        },
        methods: {
			  // #ifndef MP-JD
            changeScale() {
                this.scale = this.scale == 9 ? 15 : 9;
            },
            changeRotate() {
                this.rotate = this.rotate == 90 ? 0 : 90;
            },
				changeSkew() {
				    this.skew = this.skew == 30 ? 0 : 30;
				},
				// #endif
            enableThreeD(e) {
                this.enable3D = e.detail.value;
            },
            changeShowCompass(e) {
                this.showCompass = e.detail.value;
            },
            changeEnableOverlooking(e) {
                this.enableOverlooking = e.detail.value;
            },
            changeEnableZoom(e) {
                this.enableZoom = e.detail.value;
            },
            changeEnableScroll(e) {
                this.enableScroll = e.detail.value;
            },
            changeEnableRotate(e) {
                this.enableRotate = e.detail.value;
            },
            changeEnableSatellite(e) {
                this.enableSatellite = e.detail.value;
            },
            changeEnableTraffic(e) {
                this.enableTraffic = e.detail.value;
            },
            addMarkers() {
                this.markers = testMarkers;
            },
            addPolyline() {
                this.polyline = testPolyline;
            },
				// #ifndef MP-JD
            addPolygons() {
                this.polygons = testPolygons;
            },
				// #endif
            addCircles() {
                this.circles = testCircles;
            },
            includePoint() {
                this.includePoints = testIncludePoints;
            },
            handleGetCenterLocation() {
                this.map.getCenterLocation({
                    success: ret => {
                        console.log(JSON.stringify(ret));
                        uni.showModal({
                            content: JSON.stringify(ret)
                        })
                    }
                })
            },
            handleGetRegion() {
                this.map.getRegion({
                    success: ret => {
                        console.log(JSON.stringify(ret));
                        uni.showModal({
                            content: JSON.stringify(ret)
                        })
                    }
                })
            },
				// #ifndef MP-JD
            handleTranslateMarker() {
                this.map.translateMarker({
                    markerId: 1,
                    destination: {
                        latitude: 39.989631,
                        longitude: 116.481018
                    },
                    duration: 2000
                }, ret => {
                    console.log(JSON.stringify(ret));
                    uni.showModal({
                        content: JSON.stringify(ret)
                    })
                });
            },
				// #endif
            maptap(e) {
                uni.showModal({
                    content: JSON.stringify(e)
                })
            },
            onmarkertap(e) {
                uni.showModal({
                    content: JSON.stringify(e)
                })
            },
            oncontroltap(e) {
                uni.showModal({
                    content: JSON.stringify(e)
                })
            },
            oncallouttap(e) {
                uni.showModal({
                    content: JSON.stringify(e)
                })
            },
            onupdated(e) {
                console.log(JSON.stringify(e))
            },
            onregionchange(e) {
                console.log(JSON.stringify(e));
            },
            onpoitap(e) {
                uni.showModal({
                    content: JSON.stringify(e)
                })
            }
        }
    }
</script>

<style>
    .content {
        flex: 1;
    }

    .map {
        width: 750rpx;
		/* #ifdef H5 */
		width: 100%;
		/* #endif */
        height: 250px;
        background-color: #f0f0f0;
    }

    .scrollview {
		/* #ifdef H5 */
		margin-top: 240px;
		/* #endif */
        flex: 1;
        padding: 10px;
    }

    .list-item {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        padding: 5px 0px;
    }

    .list-text {
        flex: 1;
    }

    .button {
        margin-top: 5px;
        margin-bottom: 5px;
    }
</style>