uniapp-微信小程序地图功能实现

最新推荐文章于 2024-09-11 10:03:15 发布

AJiu~~

最新推荐文章于 2024-09-11 10:03:15 发布

阅读量2.1k

点赞数 2

文章标签：微信小程序 uni-app 小程序 Powered by 金山文档

本文链接： https://blog.csdn.net/ZWP_990527/article/details/130174145

版权

appid获取：

测试号：在微信开发者工具内点击“导入”随便选一个空文件夹然后点击测试号就能看到自己的appId了

在微信公众开发平台内获取：获取小程序appid

需要地图授权的key：

腾讯地图Key获取，创建一个应用添加一个key就行，然后在样式应用内给刚刚创建的key设置绑定样式。

添加key

设置绑定样式

功能实现（有appid和绑定了地图key 直接跳转到这一步）：

<template>
    <view>
        <map id="map" class="map_style" :latitude="latitude" :longitude="longitude" :show-location="true" :scale="scale"
            layer-style="1" :markers="markers" @tap="handleGetLongitudeLatitude" @markertap="handleClickMarker">
            <!-- 定位、缩进按钮  -->
            <cover-view class="cover-view">

                <cover-view class="cover-view-image cover-view-image-position" @click="handleCurrenPosition">
                    <cover-image class="cover-image cover-image-position" src="@/static/position.png"></cover-image>
                    <cover-view style="font-size: 10px;">
                        定位
                    </cover-view>
                </cover-view>

                <cover-view class="cover-view-image-scale">
                    <cover-view class="cover-view-image" @click="handleClickEnlarge">
                        <cover-image class="cover-image cover-image-enlarge" src="@/static/enlarge.png"></cover-image>
                    </cover-view>

                    <cover-view class="cover-view-image " @click="handleClickShrink">
                        <cover-image class="cover-image cover-image-shrink" src="@/static/shrink.png"></cover-image>
                    </cover-view>

                </cover-view>
            </cover-view>
        </map>
    </view>
</template>

<script>
    import QQMap from '@/lib/qqmap-wx-jssdk.min.js';
    const key = "WY7BZ-RRY3J-LP5FX-XGWY3-RC2TF-HOFQZ";
    const marksSetting = {
            alpha: 0.8, //标注的透明度
            width: 25, //标注的宽度
            height: 36, //标注的高度

            calloutSetting: {
                color: "#FFFFFF", // 文本颜色 
                fontSize: 14, // 文本字体大小
                borderRadius: 10, // 边框圆角
                borderColor: "#aaff00", //气泡边框颜色
                borderWidth:2, //边框宽度
                bgColor: "#ffc45e", //气泡背景颜色
                padding: 5, //文本边距
                display: "ALWAYS", //'BYCLICK':点击显示（我是没试出效果）; 'ALWAYS':常显
                textAlign: "center", //文本对齐方式  有效值：left、center、right
                anchorX: 0, //横向偏移量 向右为正数 ，气泡以标注上方为中心，正数向右偏移  负数向左偏移
                anchorY: 0, //纵向偏移量 向下为正数，气泡以标注上方为中心，正数向下偏移 负数向上偏移
            }
        };

        export default {

            data() {
                return {
                    longitude: "",
                    latitude: "",
                    address: "",
                    scale: 15,


                    markers: [
                        {
                        id: 1,
                        longitude: 114.34707328259367, //经度
                        latitude: 30.500969242060897, //纬度
                        alpha: marksSetting.alpha, //标注的透明度 0~1之间
                        width: marksSetting.width, //标注的宽度
                        height: marksSetting.height, //标注的高度
                        callout: {
                            content: "丽岛花园",
                            color: marksSetting.calloutSetting.color,
                            fontSize: marksSetting.calloutSetting.fontSize,
                            borderRadius: marksSetting.calloutSetting.borderRadius,
                            borderWidth: marksSetting.calloutSetting.borderWidth,
                            borderColor: marksSetting.calloutSetting.borderColor,
                            bgColor: marksSetting.calloutSetting.bgColor,
                            padding: marksSetting.calloutSetting.padding,
                            display: marksSetting.calloutSetting.display,
                            textAlign: marksSetting.calloutSetting.textAlign,
                            anchorX: marksSetting.calloutSetting.anchorX,
                            anchorY: marksSetting.calloutSetting.anchorY,

                        },
                    },
                        {
                        id: 2,
                        longitude: 114.3406549588575,//经度
                        latitude: 30.499375611479607,//纬度
                        alpha: marksSetting.alpha, //标注的透明度 0~1之间
                        width: marksSetting.width, //标注的宽度
                        height: marksSetting.height, //标注的高度
                        callout: {
                            content: "南湖雅苑",
                            color: marksSetting.calloutSetting.color,
                            fontSize: marksSetting.calloutSetting.fontSize,
                            borderRadius: marksSetting.calloutSetting.borderRadius,
                            borderWidth: marksSetting.calloutSetting.borderWidth,
                            borderColor: marksSetting.calloutSetting.borderColor,
                            bgColor: marksSetting.calloutSetting.bgColor,
                            padding: marksSetting.calloutSetting.padding,
                            display: marksSetting.calloutSetting.display,
                            textAlign: marksSetting.calloutSetting.textAlign,
                            anchorX: marksSetting.calloutSetting.anchorX,
                            anchorY: marksSetting.calloutSetting.anchorY,

                        },
                    },
                    ],
                }
            },

            onShow() {
                const that = this;
                uni.getLocation({
                    type: 'wgs84',
                    success: function(res) {

                        that.longitude = res.longitude;
                        that.latitude = res.latitude;

                        that.handleGetAddress();
                    }
                });
            },
            methods: {
                /**
                 * @param {Object} val 返回点击地图地点的经纬度
                 */
                handleGetLongitudeLatitude(param) {
                    console.log("被点击地点的纬度：",param.detail.latitude);
                    console.log("被点击地点的经度：",param.detail.longitude);
                },

                /**
                 * @param {Object} longitude 经度
                 * @param {Object} latitude 纬度
                 */
                handleGetAddress(longitude, latitude) {
                    const that = this;

                    const map = new QQMap({
                        key
                    });

                    map.reverseGeocoder({
                        location: {
                            longitude: this.longitude,
                            latitude: this.latitude
                        },
                        success: function(res) {

                            that.address = res.result.address;
                        }
                    })
                },
                
                handleClickMarker(param){
                    
                    this.markers.forEach((item)=>{
                        
                        if(item.id == param.markerId){
                            item.callout.borderColor="#ffff7f"
                            item.callout.bgColor="#ffa6b2"
                        }
                        
                    })
                },

                handleCurrenPosition() {
                    const that = this;
                    uni.createMapContext("map", this).moveToLocation({
                        longitude: that.longitude,
                        latitude: that.latitude
                    })

                },

                handleClickEnlarge() {
                    this.scale = this.scale == 20 ? this.scale : ++this.scale;
                },

                handleClickShrink() {
                    this.scale = this.scale > 3 ? --this.scale : 3;
                }
            }
        }
</script>

<style>
    @import "./index.css";
</style>

    .map_style {
        width: 750rpx;
        height: 100vh;
    }

    /* 外层盒子样式 */
    .cover-view {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 80rpx;
        color: #484848;
        background-size: 120rpx 120rpx;
        background-position: center center;
        position: absolute;
        bottom: 15vh;
        right: 32rpx;
    }

    /* 定位、扩大、缩小按钮盒子样式 */
    .cover-view-image {
        background: #ffffff;
        width: 80rpx;
        height: 40px;
        margin: 0 auto;
        text-align: center;
    }

    /* 定位盒子额外样式 */
    .cover-view-image-position {
        border-radius: 5px;
    }

    /* 扩大缩小定位额外样式 */
    .cover-view-image-scale {
        margin-top: 20px;
        border-radius: 5px;

    }

    /* 图标大小 */
    .cover-image {
        width: 40rpx;
        height: 40rpx;
        margin-left: 10px;
    }

    /* 定位图标额外样式 */
    .cover-image-position {
        margin-top: 3px;
    }

    /* 缩小图标额外样式 */
    .cover-image-shrink {
        margin-top: 9px;
    }

    /* 扩大图标额外样式 */
    .cover-image-enlarge {
        margin-top: 9px;
    }
    
    
    .top-search {
        position: sticky;
        top: var(--window-top);
        /* // top: 0; // 这个试了也可以达到吸顶效果 */
        z-index: 100;
    }
    
    .search-box {
        display: flex;
        align-items: center;
        padding-top: 16rpx;
        padding-bottom: 16rpx;
    }