vue通过百度地图获取当前位置_vue使用百度地图api获取当前位置-CSDN博客

这个博客展示了如何在Vue应用中集成百度地图API，获取并显示当前位置。首先，通过`<baidu-map>`组件设置地图，并在地图加载完成后设置中心点。然后，创建自定义图标和标注，并添加到地图上。最后，利用Geolocation API获取用户当前的经纬度坐标，但相关信息并未在地图上显示。

vue通过百度地图获取当前位置

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <baidu-map @ready="mapHandle" style="width:100%;height:400px" :scroll-wheel-zoom='true' ></baidu-map>
  </div>
</template>
<script>
   export default {
  
  methods:{
            mapHandle({ BMap, map }) {
            var point = new BMap.Point(115.95845796638,28.696117043877);
            map.centerAndZoom(point, 13)
            var icon = new BMap.Icon(require("../assets/logo.png"),new BMap.Size(74,84));
            var marker = new BMap.Marker(point,{icon:icon}) // 创建标注
            map.addOverlay(marker) // 将标注添加到地图中
             var html = [];
              var opts ={
               width :250,
               height:30,
             }
            html.push('<div class="mapTipWindow"> <ul>');
            html.push("<li>"+ '哈哈' +"</li>");
            html.push("</ul></div>");
            var infowindow = new BMap.InfoWindow(html.join(""),opts);
            marker.addEventListener("click",function(){
                this.openInfoWindow(infowindow);
            });
             const geolocation = new BMap.Geolocation();
              geolocation.getCurrentPosition(function(r) {
                console.log(r, "aaaa");
                if (this.getStatus() == BMAP_STATUS_SUCCESS) {
        
                  console.log(r.point.lat,r.point.lng,r.address.province+r.address.city,'yhjdfdfd');
                }
          });
 
          }
     }
  
   }
</script>