本文主要是介绍使用百度地图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.dataconsole.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 = thisvar local = new BMap.LocalSearch(map, {renderOptions:{map: map}});let name = this.hosdata[this.count].namelocal.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 = arrconsole.log(results.$q[0].title)})local.clearResults()},sch(){},start(){let that = thisfunction 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 = filenamea.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下载
注意:准确度还行,但需要整理一下
结果
这篇关于使用百度地图api 查询地名得到经纬坐标的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!