vue3引入百度地图

首先需要在index.html中引入例如

 <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=“您的秘钥”></script>

<template>
  <div>
    <!-- <el-dialog title="选择地址" width="70%"> -->
    <el-form>
      <el-row>
        <el-col :span="5">
          <el-form-item label="查询地址">
            <el-input
              type="text"
              placeholder="请输入查询地址"
              v-model="position"
              style="width: 350px"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-button
            type="primary"
            icon="el-icon-Search"
            @click="searchByStationName"
            >查询</el-button
          >
        </el-col>
        <el-col :span="2"></el-col>
        <el-col :span="10">
          <el-form-item label="查询结果">
            <el-input type="text" style="width: 180px" v-model="result" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div id="allmap" :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"></div>
    <!-- <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="onAddOk">
          {{ $t("common.ok") }}
        </el-button>
      </span>
    </template> -->
    <!-- </el-dialog> -->
  </div>
</template>
  
<script setup>
import { nextTick, onMounted, ref, watch, defineEmits } from "vue";
onMounted(() => {
  nextTick(() => {
    initMap();
  });
});
const emit = defineEmits(["sendResult"]);
// 需要查询的地址
let position = ref("上海市");

let initResult = 121.4805 + "," + 31.2359;
//查询结果
let result = ref(initResult);
// 初始化地图
const initMap = () => {
  // 创建地图实例;
  let map = new window.BMap.Map("allmap");
  // 创建点坐标
  map.centerAndZoom(new window.BMap.Point(121.48054, 31.235929), 11);
  //开启鼠标滚轮缩放
  map.enableScrollWheelZoom(true);
  // 添加标记点
  let marker1 = new window.BMap.Marker(
    new window.BMap.Point(121.48054, 31.235929)
  );
  map.addOverlay(marker1);
  let opts = {
    anchor: "BMAP_ANCHOR_TOP_RIGHT",
  };
  map.addControl(new window.BMap.MapTypeControl(opts));
};

// 根据地址查询经纬度
const searchByStationName = () => {
  var map = new window.BMap.Map("allmap");
  map.clearOverlays(); //清空原来的标注
  var localSearch = new window.BMap.LocalSearch(map);
  localSearch.setSearchCompleteCallback(function (searchResult) {
    var poi = searchResult.getPoi(0);
    result.value =
      Number(poi.point.lng).toFixed(4) + "," + Number(poi.point.lat).toFixed(4);
    map.centerAndZoom(poi.point, 13);
    var marker = new window.BMap.Marker(
      new window.BMap.Point(poi.point.lng, poi.point.lat)
    ); // 创建标注，为要查询的地址对应的经纬度
    map.addOverlay(marker);
  });
  localSearch.search(position.value);
  //开启鼠标滚轮缩放
  map.enableScrollWheelZoom(true);
  let opts = {
    anchor: "BMAP_ANCHOR_TOP_RIGHT",
  };
  map.addControl(new window.BMap.MapTypeControl(opts));
};
watch(result, (newValue, oldValue) => {
  console.log("---------------", newValue, oldValue);
  emit("sendResult", result);
});
</script>
  
<style>
#allmap {
  width: 100%;
  height: 400px;
}
.anchorTR div:nth-of-type(3) {
  display: none !important;
}
</style>

实际的效果：