若依引入腾讯地图

组件：

<template>
  <div style="map-container">
    <div>
      <div
        style="
          display: flex;
          align-items: center;
          justify-content: flex-start;
          margin: 10px 0 40px;
        "
      >
        <el-input
          v-model="searchMapValue"
          style="width: 250px; margin-right: 20px"
          placeholder="请输入"
        />
        <el-button type="primary" @click="searchMap">搜索</el-button>
        <el-button @click="resetMap">重置</el-button>
      </div>
    </div>
    <div
      style="
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
      "
    >
      <div>
        <div style="text-align: center" v-if="searchNull">暂无数据...</div>
        <div
          v-else
          style="
            padding: 5px 2px;
            width: 300px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            cursor: pointer;
          "
          :class="index == selectMapItem ? 'selectMapItemStyle' : ''"
          v-for="(item, index) in searchList"
          :key="index"
          @click="
            clickAddress(item.location, item.address), (selectMapItem = index)
          "
        >
          {{ item.address }}
        </div>
      </div>
      <div
        style="width: 550px; height: 400px; border-radius: 10px"
        ref="mapref"
        id="mapDom"
      ></div>
    </div>
    <div class="footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="submitMapForm">确 定</el-button>
    </div>
  </div>
</template>
<script setup>
import { ElMessage } from "element-plus";
import { onMounted } from "vue";
import { jsonp } from "vue-jsonp";
const searchMapValue = ref("");
const searchList = ref([]);
const makerDom = ref(null);
const searchNull = ref(false);
const mapref = ref();
const selectMapItem = ref(0);

const emit = defineEmits();
const props = defineProps({
  latitude: String,
  longitude: String,
  address: String,
});
console.log(props.latitude, props.longitude);

// 初始化地图
const initMap = () => {
  var map = new qq.maps.Map(mapref.value, {
    // 地图的中心地理坐标
    center: new qq.maps.LatLng(36.707909, 119.161874),
    zoom: 15,
  });
  makerDom.value = new qq.maps.Marker({
    position: new qq.maps.LatLng(),
    map: map,
  });
  makerDom.value.setVisible(false);

  if (props.latitude && props.longitude) {
    var center = new qq.maps.LatLng(props.latitude, props.longitude);
    makerDom.value.setPosition(center);
    makerDom.value.setVisible(true);
    // 将地图的中心位置设置当前位置
    var map = makerDom.value.getMap();
    map.setCenter(center);
    return;
  }
  jsonp("https://apis.map.qq.com/ws/location/v1/ip", {
    key: "你的key",
    output: "jsonp",
  })
    .then((res) => {
      console.log("ip定位成功 ", res);
      var center = new qq.maps.LatLng(
        res.result.location.lat,
        res.result.location.lng
      );
      makerDom.value.setPosition(center);
      makerDom.value.setVisible(true);
      // 将地图的中心位置设置当前位置
      var map = makerDom.value.getMap();
      map.setCenter(center);
    })
    .catch((e) => {
      console.log("ip定位失败 ", e);
    });

  var marker;
  //添加监听事件  获取鼠标点击事件，点击地图只添加一个标记
  // qq.maps.event.addListener(map, "click", function (event) {
  //   if (!marker) {
  //     marker = new qq.maps.Marker({
  //       position: event.latLng,
  //       map: map,
  //     });
  //     return;
  //   }
  //   marker.setPosition(event.latLng);
  // });

  //添加监听事件  获取鼠标点击事件  点击地图添加标记
  // qq.maps.event.addListener(map, "click", function (event) {
  //   var marker = new qq.maps.Marker({
  //     position: event.latLng,
  //     map: map,
  //   });
  // });
};

// 提交地图结果
const submitMapForm = () => {
  if (searchList.value.length == 0) {
    if (props.latitude && props.longitude) {
      emit("selectMap", {
        address: props.address ? props.address : "",
        longitude: props.longitude,
        latitude: props.latitude,
      });
    } else {
      ElMessage.error("没有选中的地点");
    }
    return;
  }
  console.log(
    "选中的经纬度：",
    searchList.value[selectMapItem.value].location.lng,
    searchList.value[selectMapItem.value].location.lat
  );
  emit("selectMap", {
    address: searchList.value[selectMapItem.value].address,
    longitude: searchList.value[selectMapItem.value].location.lng,
    latitude: searchList.value[selectMapItem.value].location.lat,
  });
};

const cancel = () => {
  searchMapValue.value = "";
  searchList.value = null;
  emit("closeMap");
};
// 搜索地图
const searchMap = () => {
  console.log(searchMapValue.value);
  if (!searchMapValue.value) return;

  jsonp("https://apis.map.qq.com/ws/place/v1/suggestion", {
    key: "你的key",
    output: "jsonp",
    keyword: searchMapValue.value,
  })
    .then((res) => {
      console.log("关键词搜索成功 ", res);
      selectMapItem.value = 0;
      searchList.value = []; // 清空之前的搜索结果

      searchNull.value = res.data.length == 0 ? true : false;

      if (res.data.length == 0) return;

      res.data.forEach((item, index) => {
        searchList.value.push({
          id: index,
          address: item.title + " " + item.address,
          location: item.location,
        });
      });

      var center = new qq.maps.LatLng(
        searchList.value[0].location.lat,
        searchList.value[0].location.lng
      );
      var map = makerDom.value.getMap();
      map.setCenter(center);
      // 将地图标记点设置为选中的地址
      makerDom.value.setPosition(center);
      makerDom.value.setVisible(true);
    })
    .catch((e) => {
      console.log("关键词搜索失败 ", e);
    });
};
// 点击搜索的地址
const clickAddress = (val, addressName) => {
  console.log("点击的坐标  ", val);
  console.log("makerDom  ", makerDom.value);
  var center = new qq.maps.LatLng(val.lat, val.lng);
  // 将地图标记点设置为选中的地址
  makerDom.value.setPosition(center);
  makerDom.value.setVisible(true);
  // 将地图的中心位置设置为选中的地址
  var map = makerDom.value.getMap();
  map.setCenter(center);
};
// 重置地图
const resetMap = () => {
  searchNull.value = false;
  makerDom.value.setVisible(false);
  // marker.setPosition(latLng);
  jsonp("https://apis.map.qq.com/ws/location/v1/ip", {
    key: "你的key",
    output: "jsonp",
  })
    .then((res) => {
      console.log("ip定位成功 ", res);
      var center = new qq.maps.LatLng(
        res.result.location.lat,
        res.result.location.lng
      );
      makerDom.value.setPosition(center);
      makerDom.value.setVisible(true);
      // 将地图的中心位置设置当前位置
      var map = makerDom.value.getMap();
      map.setCenter(center);
      // 清空搜索结果
      searchMapValue.value = "";
      searchList.value = [];
    })
    .catch((e) => {
      console.log("ip定位失败 ", e);
    });
};
// 打开地图
// const selectMap = () => {
//   mapFlag.value = true;
//   searchMapValue.value = "";

//   setTimeout(() => {
//     initMap();
//   });
// };
onMounted(() => {
  searchMapValue.value = "";
  searchList.value = [];
  initMap();
});
</script>
<style scoped>
.map-container {
  width: 100%;
}
.selectMapItemStyle {
  background-color: #6666662e;
}
</style>

使用：

<template>
<div>
    <el-dialog
      title="选择商家地址"
      v-model="mapFlag"
      width="900px"
      append-to-body
    >
    <!--:latitude :longitud  :address 用于修改的时候回显-->
      <fxlMap
        v-if="mapFlag"
        :latitude="form.latitude"  
        :longitude="form.longitude"
        :address="form.placeName"
        @closeMap="closeMapFun"
        @selectMap="selectMapFun"
      ></fxlMap>
    </el-dialog>
    </div>
</template>
<script setup>
	import fxlMap from "@/components/fxlMap";

	const mapFlag = ref(false);
	const selectMapFun = (e1) => {
	  mapFlag.value = false;
	  // console.log(e1);
	  form.value.placeName = e1.address;
	  form.value.latitude = e1.latitude;
	  form.value.longitude = e1.longitude;
	};
	const closeMapFun = () => {
	  mapFlag.value = false;
	};
</script >

index.html

   <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=你的key"></script>

用的"vue-jsonp": "^2.0.0",

效果：

选后：