vue-baidu-map遇到的问题

Question

想问下使用vue-baidu-map在搜索环境搜索出来的地址有些不正确，和百度地图同样的搜索字段，得到的地址结果不同，请问是什么原因呢

Answer 1

【相关推荐】

• 你可以看下这个问题的回答https://ask.csdn.net/questions/7441182
• 我还给你找了一篇非常好的博客，你可以看看是否有帮助，链接：使用vue-baidu-map对百度地图进行输入框搜索定位
• 除此之外, 这篇博客: vue 使用 vue-baidu-map组件 自定义百度地图 和 通过定位获取百度地图的经纬度中的 二 获取百度地图的经纬度 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

  先附上vue baidu map的文档，还有很多功能可以直接套用
  https://dafrok.github.io/vue-baidu-map/#/zh/start/usage
  话不多说，直接上代码

  H5代码

  <template>
     <baidu-map
       :center="center"  //初始化经纬度
       :zoom="zoom" //初始化缩放程度
       :dragging="true" 
       :scroll-wheel-zoom="true"
       class="map"
       @ready="handler" //地图初始化
       @click="getClickInfo"
       @moving="syncCenterAndZoom"  //移动就会记录经纬度
       @moveend="syncCenterAndZoom"
       @zoomend="syncCenterAndZoom"
     >
     //地理位置的搜索功能
       <bm-local-search
         :keyword="keyword"
         :auto-viewport="true"
         :location="location"
       ></bm-local-search>
       //缩放比例尺的展示
       <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
       //定位
       <bm-geolocation
         anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
         :showAddressBar="true"
         :autoLocation="true"
       ></bm-geolocation>
       //添加一个小红点的，并将当前的经纬度写入数据中
       <bm-marker :position="{lng:center.lng, lat: center.lat}"></bm-marker>
     </baidu-map>
   </template>
  

  data里面需要添加的数据

  //百度地图初始化数据
  baidumapSwitch:false,
  center: { lng: 114.220941, lat: 22.690015 },
  zoom: 16,
  location: "深圳市",
  keyword: "请输入搜索关键词",,
  baiduDevicelocationx:114.220941,
  baiduDevicelocationy:22.690015
  

  js

  //百度地图初始化（这个一定要！否则地图回加载不出来）
  handler({ BMap, map }) {},
  //点击获取到当前经纬度
  getClickInfo(e) {
    console.log(e.point.lng);
    console.log(e.point.lat);
    this.center.lng = e.point.lng;
    this.center.lat = e.point.lat;
  },
  //双向绑定经纬度以及缩放尺寸
  syncCenterAndZoom(e) {
    const { lng, lat } = e.target.getCenter();
    this.center.lng = lng;
    this.center.lat = lat;
    // this.zoom = e.target.getZoom();
  },
  //经纬度同步
  baidumap(){
   this.baiduDevicelocationx = this.center.lng
   this.baiduDevicelocationy = this.center.lat
  }
  

  然后大概出现的图片效果就会是这样了，把center里面的经纬度用v-model绑定起来然后赋值到你想用的地方就好了
  

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^