uniapp中引入地图(腾讯地图)

效果:

申请腾讯地图key

腾讯位置服务 - 立足生态，连接未来 (qq.com)

uniapp项目中

<!-- uniapp中引入地图示例 -->
<template>
    <view class="realTimeMonitoring">
        <map style="width: 100%; height: 100vh"
             :latitude="latitude"
             :longitude="longitude"
             :markers="covers"
             :scale="scale"
             :min-scale="minScale"
             :max-scale="maxScale"
        >
        </map>
    </view>
</template>

<script>
    var iconPath = require('../../../../static/images/icon/forklift1.png');  // 图标位置
    export default {
        name: "realTimeMonitoring",
        data() {
            return {
                // scale:
                scale: 12, // 17
                minScale: 3, // 最小缩放级别
                maxScale: 20, // 最大缩放级别
                latitude: 39.909,
                longitude: 116.39742,
                covers: [{
                    latitude: 39.909,
                    longitude: 116.39742,
                    iconPath: iconPath
                },
                    {
                        latitude: 39.90,
                        longitude: 116.39,
                        iconPath: iconPath
                    }]
            }
        },
        methods: {},

    }
</script>

<style lang="scss" scoped>
    .realTimeMonitoring {
        width: 100%;
        height: 100%;
    }
</style>

！！！最最最重要的一步

这里填写刚刚申请的百度地图的key

附：

uniapp地图api

https://uniapp.dcloud.net.cn/component/map.html#marker-%E4%B8%8A%E7%9A%84%E8%87%AA%E5%AE%9A%E4%B9%89%E6%B0%94%E6%B3%A1-customcallout