前端Vue3根据经纬度展示地图

近期项目中需要根据用户选中的地点经纬度展示地图，需求效果如下图：

要求用户选择地点后点击预览，出现如上图所示的地图展示，开发文档参考：JavaScript API | 腾讯位置服务，需要根据文档中提示的步骤，注册成为腾讯位置服务开发者，创建应用和Key。

使用：（文章最后有完整代码）

1、在项目根目录的 index.html 文件中引入API库，例如：

<script src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>

注意key值替换为自己生成的key。

2、页面中使用时，首先需要一个元素作为容器：

3、初始化：

 需要注意的是，官方文档中初始化地图方式如下：

文档中调用new TMap.XXX() 构建函数创建地图，在实际使用时并不生效，需要改为

new window.TMap.XXX()。

其次我的需求为用户自主选择地点后，点击按钮生成地图，所以在初始化最开始进行了如下操作：

document.getElementById('map').innerHTML=''

如果是进入页面就获取接口数据显示，也可不进行如此操作。

另外出于UI还原考虑，我将原本地图上的方向控件、比例尺控件隐藏了，方法就是找到相应的元素直接display: none;

其余样式、控件等可根据实际情况从文档中查找后修改。

完整代码：

<template>
    <div class="footer">
        <div class="saveBtn" @click="previewMessage">预览</div>
    </div>
    <div id="map"></div>
</template>

<script setup>
import {nextTick} from 'vue';
//地图初始化函数，本例取名为init，开发者可根据实际情况定义
function initMap() {
    var storeLatitude = inviteRecord.value.storeLatitude;  //纬度-根据实际需求获取
    var storeLongitude = inviteRecord.value.storeLongitude;  //经度-根据实际需求获取
    //设置中心点坐标
    var center = new window.TMap.LatLng(storeLatitude, storeLongitude);
    //初始化地图
    nextTick(()=>{
        document.getElementById('map').innerHTML=''
        var map = new window.TMap.Map(document.getElementById('map'), {
            center: center,
            showControl: false,
        });
        //创建并初始化MultiMarker
        var markerLayer = new window.TMap.MultiMarker({
            map: map,  //指定地图容器
            //样式定义
            styles: {
                //创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）
                "myStyle": new window.TMap.MarkerStyle({
                    "width": 25,  // 点标记样式宽度（像素）
                    "height": 35, // 点标记样式高度（像素）
                    //焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
                    "anchor": { x: 16, y: 32 }
                })
            },
            //点标记数据数组
            geometries: [{
                "id": "1",   //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
                "styleId": 'myStyle',  //指定样式id
                "position": new window.TMap.LatLng(storeLatitude, storeLongitude),  //点标记坐标位置
                "properties": {//自定义属性
                    "title": "marker1"
                }
            }]
        })
    })
}

// 点击预览展示地图
function previewMessage(){
    initMap();
}
</script>

以上是Vue3使用腾讯地图的过程，希望能帮助到你。

欢迎大家提出问题！