vue项目使用百度地图

最新推荐文章于 2024-07-15 15:31:14 发布

勇敢牛牛，冲冲冲

最新推荐文章于 2024-07-15 15:31:14 发布

阅读量558

点赞数 1

分类专栏： js 文章标签： vue.js 百度 javascript

本文链接：https://blog.csdn.net/qq_44613011/article/details/122602094

版权

js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

vue项目使用百度地图

1. 安装npm install vue-baidu-map —save

2. pulic/index.html引入js文件

 <head>
   <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=AoV4NBftZmNXf4LgCCmZ0CnrGCoOqHLE"></script>
   <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=AoV4NBftZmNXf4LgCCmZ0CnrGCoOqHLE"></script>
  </head>

3.在组件中使用

<div class="baidumap" id="allmap"></div>
<div class="transit">
   <span style="font-weight: 800;color: #606266;">坐标经纬度</span>
   <span style="margin-left: 5px;"> {{lng}}/{{lat}}</span>
</div>
<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
export defalut{
  data(){
    return:{
       address_detail: null,
        lng: 0,
        lat: 0
    }
  },
  mounted() {
      this.getMap()
    },
  methods:{
     /* 百度地图*/
     getMap() {
        var th = this
        // 创建Map实例
        var map = new BMap.Map("allmap");
        // 初始化地图,设置中心点坐标，
        var point = new BMapGL.Point(105.291, 37.094);
        map.centerAndZoom(point, 5);
        map.enableScrollWheelZoom(true);
        // var point = new BMap.Point(); // 创建点坐标，汉得公司的经纬度坐标
        // map.centerAndZoom("北京",12);
        // map.enableScrollWheelZoom();
        var ac = new BMap.Autocomplete( //建立一个自动完成的对象
          {
            "input": "suggestId",
            "location": map
          })
        var myValue
        ac.addEventListener("onconfirm", function(e) { //鼠标点击下拉列表后的事件
          var _value = e.item.value;
          myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
          this.address_detail = myValue
          setPlace();
        });

        function setPlace() {
          map.clearOverlays(); //清除地图上所有覆盖物
          function myFun() {
            th.userlocation = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
            map.centerAndZoom(th.userlocation, 18);
            th.lng = th.userlocation.lng
            th.lat = th.userlocation.lat
            map.addOverlay(new BMap.Marker(th.userlocation)); //添加标注
          }

          var local = new BMap.LocalSearch(map, { //智能搜索
            onSearchComplete: myFun
          });
          local.search(myValue);

          //测试输出坐标（指的是输入框最后确定地点的经纬度）
          map.addEventListener("click", function(e) {
            map.clearOverlays(); //清除地图上所有覆盖物
            map.addOverlay(new BMap.Marker(e.point))
            var myGeo = new BMap.Geocoder();
            th.lng = e.point.lng
            th.lat = e.point.lat
            myGeo.getLocation(e.point, function(result) {
              th.address_detail = null
              th.address_detail = result.address; //获取到当前定位的详细地址信息
            })
          })
        }
      } 
  }
}
<style scoped lang="scss">
 .baidumap {
      width: 200px;
      height: 200px;
      margin-left: 150px;
      margin-bottom: 20px;
    }
    .transit{
       margin-left: 60px;
       margin-bottom: 20px;
    }
</style>