vue3使用百度地图获取城市的经纬度切换地区

话不多说，直接上代码

<template>
    <div id="container" style="width: 100%;height: 700px;">
        
    </div>
</template>

<script setup>
import {nextTick,ref, watchEffect} from "vue"

//使用这个方法可以确保dom加载完后才执行
nextTick(()=>{

    var map = new BMapGL.Map('container'); // 创建Map实例

    //获取城市的经纬度
    var cityName = localStorage.getItem("chengshi"); // 设置要编码的城市名称
    var geocoder = new BMapGL.Geocoder(); // 创建地理编码实例
    geocoder.getPoint(cityName, function(point) {
    if (point) {
        //point.lng:维度
        // point.lat:经度
        map.centerAndZoom(new BMapGL.Point(point.lng,point.lat), 12);// 初始化地图,设置中心点坐标和地图级别
    } else {
        console.log("获取经纬度失败");
    }
    }, cityName);
    map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放

})

 完事啦！！！