Vue中使用百度地图(获取用户当前位置并)实现标注点以及详情_vue3 获取图片相对坐标并标记

首先肯定是去百度地图API里面申请一个密钥(ak)

http://lbsyun.baidu.com/index.php?title=首页
1

滑到最下面

注册认证好后

然后就会有一个密钥了，OK开始写demo

我写了3个不同的

第一种

先询问是否授权，然后同意之后才会显示地图，红点可以点击显示该地方的详情，也可以移动，经纬度也会随之改变

html

<div id="allmap"></div>
1

css

#allmap {
    width: 100%;
    height: 100%;
  }
1
2
3
4

js

data:{
	 nowLat: 0,
	      nowLng: 0,
	      point: {},
	      marker: {},
	      map: {}
	}
 methods:{
   //根据动态获取到的经纬度显示当前位置
    useBaiduMap: function () {
      var _this = this;
      // 百度地图API功能
      let Lat = this.nowLat;
      let Lng = this.nowLng;
      // 百度地图API功能*/
      _this.map = new BMap.Map("allmap");
      if(this.position.lng !==null && this.position.lat !==null){
        _this.point = new BMap.Point(this.position.lng, this.position.lat);
      }else{
        _this.point = new BMap.Point(Lng, Lat);
      }
      _this.map.centerAndZoom(_this.point, 15);
      _this.map.enableScrollWheelZoom(true);   //启用滚轮放大缩小，默认禁用
      _this.map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用
      _this.marker = new BMap.Marker(_this.point); //创建marker对象
      _this.map.addOverlay(_this.marker);              // 将标注添加到地图中
      _this.marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
      //用户确认重新选择位置坐标
      _this.map.addEventListener("click", function (e) {
        _this.disp_confirm(e);
      });
      //获取手机设备高度
      var deviceHeight = window.innerHeight;
      document.getElementById('allmap').style.height = deviceHeight + 'px';
    },
    //重新选择位置信息
    disp_confirm(e) {
      var _this = this;
      this.point = new BMap.Point(e.point.lng, e.point.lat);
      _this.point = new BMap.Point(e.point.lng, e.point.lat);
      this.nowLng = e.point.lng
      this.nowLat = e.point.lat

      this.position.lng = e.point.lng
      this.position.lat = e.point.lat
      _this.marker.setPosition(_this.point);//设置覆盖物位置
      _this.getAddressName();
    },
    // 获取具体位置信息名称
    getAddressName() {
      var _this = this;
      var gc = new BMap.Geocoder();
      gc.getLocation(_this.point, function (rs) {
        var addComp = rs.addressComponents;
        // 百度地图API功能
        _this.marker = new BMap.Marker(_this.point);  // 创建标注
        _this.remove_overlay();
        _this.map.addOverlay(_this.marker);              // 将标注添加到地图中
        _this.map.centerAndZoom(_this.point, 15);
        var opts = {
          width: 200,     // 信息窗口宽度
          height: 100,     // 信息窗口高度
          title: "", // 信息窗口标题
          enableMessage: true,//设置允许信息窗发送短息
          message: ""
        }
        var infoWindow = new BMap.InfoWindow("地址：" + addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber, opts);  // 创建信息窗口对象
        _this.marker.addEventListener("click", function (e) {
          e.domEvent.cancelBubble=true;//点击标注时显示当前位置信息  阻止地图的点击事件
          _this.map.openInfoWindow(infoWindow, _this.point); //开启信息窗口

        });
        console.log(addComp)
      });
    },
    //清除覆盖物
    remove_overlay(){
      this.map.clearOverlays();
    }
  },
},
activated:{
var _this = this;
var geolocation = new BMap.Geolocation();
//弹出地理授权 获取当前的经纬度
geolocation.getCurrentPosition(function (r) {
    if (this.getStatus() == BMAP_STATUS_SUCCESS) {
      _this.nowLat = r.point.lat;
      _this.nowLng = r.point.lng;
      _this.useBaiduMap();
    } else {
      alert("baidu return failed");
    }
  },
  //获取失败时候的回调
  function (r) {
    alert('请允许百度地图获取当前位置信息');
    return {
      //设置高精度
      enableHighAccuracy: true
    };
  }
);
}
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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104

第二种

是地图上生成特定的标注点，点击之后显示详情

首先在index.html里面引入我们的ak

 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script>
1

然后代码

html

<template>
  <div>
 <div id="allmap"></div>
  </div>
</template>
1
2
3
4
5

css

#allmap {
	width: 100%;
	height:100vh;
}
1
2
3
4

js

export default {
  mounted() {
            var map = new BMap.Map("allmap");
            var point = new BMap.Point(121.769473,31.111712);
            map.centerAndZoom(point,16);
            var marker = new BMap.Marker(point);
            var mapPoints = [
                {x:31.111712,y:121.769473,title:"A",con:"我是A",branch:"gogoing"},
                {x:31.112565,y:121.771581,title:"B",con:"我是B",branch:"loving"},
                {x:31.115246,y:121.768545,title:"B",con:"我是B",branch:"cool"},
            ];
            var i = 0;
            map.addOverlay(marker);
            map.enableScrollWheelZoom(true);
            // 函数 创建多个标注
            function markerFun (points,label,infoWindows) {
                var markers = new BMap.Marker(points);
                map.addOverlay(markers);
                markers.setLabel(label);
                markers.addEventListener("click",function (event) {
                    map.openInfoWindow(infoWindows,points);//参数：窗口、点  根据点击的点出现对应的窗口
                });
            }
            for (;i<mapPoints.length;i++) {
                var points = new BMap.Point(mapPoints[i].y,mapPoints[i].x);//创建坐标点
                var opts = {
                    width:250,
                    height: 100,
                    title:mapPoints[i].title
                };
                var label = new BMap.Label(mapPoints[i].branch,{
                    offset:new BMap.Size(25,5)
                });
                var infoWindows = new BMap.InfoWindow(mapPoints[i].con,opts);
                markerFun(points,label,infoWindows);
            }
  }
}
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

第二种

是我们点击地图上哪个位置，哪个位置就会放一个蓝色定位图标，同时也可以展示该详情，不过详情我没用内置的，用vant组件搞的，内置太丑了我感觉

html

  <div id="allmap"></div>
    <van-popup>
    </van-popup>
1
2
3

css

	#allmap {
		width: 100%;
    	height:100vh;
    }
1
2
3
4

js

 mounted() {
  var map = new BMap.Map("allmap"); //new 一个地图对象
    var point = new BMap.Point(121.769473, 31.111712); //设置地图的中心点
    var zoom = 16; //设置地图的等级
    map.centerAndZoom(point, zoom); // 在地图中显示
    map.enableScrollWheelZoom(); //启用滚轮放大缩小
    map.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用
    var geoc = new BMap.Geocoder();
    var that = this;
    map.addEventListener("click", function (e) {
      //给地图添加点击事件
      map.clearOverlays();
      console.log(e);
      that.lng = e.point.lng;
      that.lat = e.point.lat;
      //创建标注位置
      var pt = new BMap.Point(that.lng, that.lat);
      var myIcon = new BMap.Icon(
        "那个蓝色标的url",
        new BMap.Size(25, 25)
      );
      var marker2 = new BMap.Marker(pt, { icon: myIcon }); // 创建标注
      map.addOverlay(marker2); // 将标注添加到地图中
      geoc.getLocation(pt, function (rs) {
        if (rs.surroundingPois.length !== 0) {
          that.positionTitle = rs.surroundingPois[0].title;
          that.positionAddress = rs.surroundingPois[0].address;
          that.popupShow = true;
        }
        console.log(rs);
      });
    });
  },
};
 }
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

由于对这个地图不是很熟，所以只能写这么多啦