使用百度地图api 查询地名得到经纬坐标

说明：

解析json文件中的地名，通过百度地图api获取到经纬坐标
并下载

代码简单写的

利用到的东西

百度地图api
vue
axios
json

开始

json数据

页面：

代码：

<template>
  <div class="hello">
    <button @click="host">cccccccccccccccccc</button>
    <button @click="add">+1</button>
    <p>{{count}}</p>
    <button @click="dlo">下载</button>
    <button @click="start"> go</button>
    <div id="allmap"></div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      count:-1,
      hosdata:[]
    }
  },
  mounted() {
     axios.get('/data/sch.json').then((res)=>{
       this.hosdata = res.data
       console.log(this.hosdata.length)
     })
      
  },
  methods: {
    add(){
      this.count++
      console.log(this.count)
    },
    host(){
      var map = new BMap.Map("allmap");          
      map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
      let that = this
      var local = new BMap.LocalSearch(map, {
        renderOptions:{map: map}
      });
      let name = this.hosdata[this.count].name
      local.search(name);//查询
      local.setSearchCompleteCallback(function(results){
        let arr = [results.$q[0].point.lng,results.$q[0].point.lat,results.$q[0].title]//获取坐标
        that.hosdata[that.count].jw = arr
        console.log(results.$q[0].title)
      })
      local.clearResults()

    },
    sch(){

    },
    start(){
      let that = this
      function show1() {
          that.add()
      }
      function show2() {
          that.host()
      }
      async function show() {
        await show1()
        await show2()

      }

      var time =  setInterval(() => {
        show()
      }, 1000);
      
    },
    dlo(){
      saveShareContent(this.hosdata,'aaaa.json')
      function saveShareContent (data, filename) {
        if(!data) {
          alert('保存的数据为空');
          return;
          }
          if(!filename) 
            filename = 'json.json'
          if(typeof data === 'object'){
            data = JSON.stringify(data, undefined, 4)
          }
          var blob = new Blob([data], {type: 'text/json'}),
          e = document.createEvent('MouseEvents'),
          a = document.createElement('a')
          a.download = filename
          a.href = window.URL.createObjectURL(blob)
          a.dataset.downloadurl = ['text/json', a.download, a.href].join(':')
          e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
          a.dispatchEvent(e)
        }
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>

#allmap{width:100%;height:500px;}

</style>

思路：
通过setInterval来控制count自增，然后赋值
最后通过dlo将json下载
注意：准确度还行，但需要整理一下
结果