vue3实现百度地图的调用 获取坐标点以及添加坐标点 获取坐标_vue 百度地图创建点

引入：在public下index.html 引入

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=`自己在百度地图申请的key值`"></script>
1

Dom结构

 <div class="list">
        <div class="title">
          <div class="star-icon">
            <img src="@/assets/image/star.png" alt="" />
          </div>
          <div class="list-tit">地址</div>
        </div>
        <div class="address-box">
          <div class="input-box">
            <input type="text" placeholder="请输入详细地址" v-model="address" />
          </div>
          <div class="address" @click="obtain()">获取位置</div>
        </div>
      </div>
      <!-- 选择地点 -->
      <van-popup v-model:show="show" position="bottom">
        <div id="allmap"></div>
      </van-popup>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

js

<script setup>
	const address = ref(""); //地址
	const point = ref({}); //坐标
	const addressnotes = ref(""); //地址备注
	const show = ref(false); //选择地点弹窗显隐
	
	// 初始化 获取坐标  
	var geolocation = new BMap.Geolocation();
	geolocation.getCurrentPosition((r) => {
	  point.value = r.point;
	  inits(); //根据获取到的经纬度  获取地点名称（这里是因为 地图返回来的位置名称不具体，返回最小值是 市 所以 进行了 经纬度在此传递 获取街道的操作）
	  console.log(point.value);
	});
	// 打开地图
	const obtain = () => {
	  show.value = true;
	  setTimeout(() => {
	    initMap();  //延迟调用渲染地图是因为 电脑上调试的时候  地图加载缓慢 或者加载失败  
	  }, 500);
	};
	// 创建地图且监听拖动
	const initMap = () => {
	  let Bmap = window.BMap;
	  let map = new Bmap.Map("allmap");
	  map.centerAndZoom(new Bmap.Point(point.value.lng, point.value.lat), 15);
	  // 添加中心点
	  tubiao(Bmap, map);
	  map.enableDragging(); //启用在地图上拖动
	  map.addEventListener("dragend", function () {
	    var center = map.getCenter(); // Get the new center point
	    point.value.lng = center.lng;
	    point.value.lat = center.lat;
	    tubiao(Bmap, map);
	    inits(Bmap);
	    // console.log(" ", point.value.lng, point.value.lat);
	  });
	};
	
	const marker = ref(null);
	
	// 图标位置渲染   地图中心点代表自己想要的位置 ；  初始化的时候  为自己的位置
	const tubiao = (Bmap, map) => {
	  var myIcon = new BMap.Icon(
	    require("../../assets/image/fixedpoint.png"),
	    new BMap.Size(28, 28)
	  );
	  if (marker.value) {
	  //位置存在则销毁 坐标点
	    map.removeOverlay(marker.value);
	  }
		//添加坐标点位置 图标
	  marker.value = new BMap.Marker(
	    new Bmap.Point(point.value.lng, point.value.lat),
	    {
	      icon: myIcon,
	    }
	  );
	  map.addOverlay(marker.value);
	};
	//拖动获取坐标地点位置名称
	const inits = (Bmap) => {
	  let geocoder = new BMap.Geocoder();
	  let points = new BMap.Point(point.value.lng, point.value.lat);
	  geocoder.getLocation(points, function (result) {
	    if (result) {
	      address.value = result.address;
	    }
	  });
	};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70