vue+百度地图实现搜索功能

最新推荐文章于 2024-03-07 16:53:23 发布

转载最新推荐文章于 2024-03-07 16:53:23 发布 · 4.4k 阅读

文章标签：

#vue #百度地图 #地图

博客整理了百度地图和高德地图，重点介绍百度地图在Vue中的实现。包括在index.html中引入资源链接，生成百度地图api的key，以及给出html、js、css部分代码，还提供了参考链接，代码可能需自行完善。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这次整理了两个地图，这里的是百度的地图，另一个高德的地图地址https://blog.youkuaiyun.com/qq_42165062/article/details/92782197

效果图比较low.需要的自己改下样式
在这里插入图片描述
首先引入在index.html中引入资源链接
key在百度地图api里边生成

<script src='http://api.map.baidu.com/api?v=2.0&ak=你的key'></script>

html部分

<template>
    <div id="all">
        <input type="text" id="suggestId" name="address_detail" placeholder="地址" v-model="address_detail" class="input_style">
        <div id="allmap"></div>
    </div>
</template>

js部分

<script>
  import $ from 'jquery'
  export default {
    data(){
      return {
        address_detail: null, //详细地址
        center: {lng: "", lat: ""},
      }
    },
    methods:{
      address(){
        let that = this;
        $.ajax({
          type : "get",
          async:false,
          url : 'http://api.map.baidu.com/geocoder/v2/',
          dataType : "jsonp",
          data:{
            location:this.center.lat+','+this.center.lng,
            output:'json',
            pois:'1',
            ak:'QsVXkxxkfjL9W9A1EbsXsY80vtEFIQ6j'
          },
          success: function(json){
            console.log("success");
            console.log(json);
            that.address_detail = json.result.formatted_address
          },
          error: function() {
            alert("失败");
          }
        });
      },
    },
    mounted(){
      this.$nextTick(function () {

        var th = this
        // 创建Map实例
        var map = new BMap.Map("allmap");
        // 初始化地图,设置中心点坐标，
        var point = new BMap.Point(121.51713,31.079655); // 创建点坐标，联航路的经纬度坐标
        map.centerAndZoom(point, 15);
        map.enableScrollWheelZoom();
      //添加缩略图控件
      map.addControl(new BMap.OverviewMapControl({isOpen:false,anchor:BMAP_ANCHOR_BOTTOM_RIGHT}));
      //添加缩放平移控件
      map.addControl(new BMap.NavigationControl());
      //添加比例尺控件
      map.addControl(new BMap.ScaleControl());
      //添加地图类型控件
      //map.addControl(new BMap.MapTypeControl());
        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.center = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
            map.centerAndZoom(th.center, 18);
            map.addOverlay(new BMap.Marker(th.center));    //添加标注
          }

          var local = new BMap.LocalSearch(map, { //智能搜索
            onSearchComplete: myFun
          });
          local.search(myValue);
          console.log(local)
          //测试输出坐标（指的是输入框最后确定地点的经纬度）
          map.addEventListener("click",function(e){
            console.log(e)
            //经度
            console.log(th.center.lng);
            //维度
            console.log(th.center.lat);
            th.address()
          })
        }
        // 初始化获取经纬度转化地址
        map.addEventListener("click",function(e){
          console.log(e.point)
          th.center.lng = e.point.lng;
          th.center.lat = e.point.lat;
          //经度
          console.log(e.point.lng);
          //维度
          console.log(e.point.lat);
          th.address()
        })
      })
    },
  }
</script>

css部分

<style scoped>
    #all{
        height:800px;
        width:800px;
        margin: 0 auto;
    }
#allmap{
    height:500px;
    width:800px;
    margin: 0 auto;
}
</style>

需要的同学自己更改下代码，可能有些地方写的不够完善，
参考链接：https://www.cnblogs.com/shuaifing/p/8185311.html