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

2024-03-10 07:30

本文主要是介绍使用百度地图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 查询地名得到经纬坐标的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/793497

相关文章

一文详解如何使用Java获取PDF页面信息

《一文详解如何使用Java获取PDF页面信息》了解PDF页面属性是我们在处理文档、内容提取、打印设置或页面重组等任务时不可或缺的一环,下面我们就来看看如何使用Java语言获取这些信息吧... 目录引言一、安装和引入PDF处理库引入依赖二、获取 PDF 页数三、获取页面尺寸(宽高)四、获取页面旋转角度五、判断

MyBatis-Plus通用中等、大量数据分批查询和处理方法

《MyBatis-Plus通用中等、大量数据分批查询和处理方法》文章介绍MyBatis-Plus分页查询处理,通过函数式接口与Lambda表达式实现通用逻辑,方法抽象但功能强大,建议扩展分批处理及流式... 目录函数式接口获取分页数据接口数据处理接口通用逻辑工具类使用方法简单查询自定义查询方法总结函数式接口

C++中assign函数的使用

《C++中assign函数的使用》在C++标准模板库中,std::list等容器都提供了assign成员函数,它比操作符更灵活,支持多种初始化方式,下面就来介绍一下assign的用法,具有一定的参考价... 目录​1.assign的基本功能​​语法​2. 具体用法示例​​​(1) 填充n个相同值​​(2)

MySql基本查询之表的增删查改+聚合函数案例详解

《MySql基本查询之表的增删查改+聚合函数案例详解》本文详解SQL的CURD操作INSERT用于数据插入(单行/多行及冲突处理),SELECT实现数据检索(列选择、条件过滤、排序分页),UPDATE... 目录一、Create1.1 单行数据 + 全列插入1.2 多行数据 + 指定列插入1.3 插入否则更

Spring StateMachine实现状态机使用示例详解

《SpringStateMachine实现状态机使用示例详解》本文介绍SpringStateMachine实现状态机的步骤,包括依赖导入、枚举定义、状态转移规则配置、上下文管理及服务调用示例,重点解... 目录什么是状态机使用示例什么是状态机状态机是计算机科学中的​​核心建模工具​​,用于描述对象在其生命

使用Python删除Excel中的行列和单元格示例详解

《使用Python删除Excel中的行列和单元格示例详解》在处理Excel数据时,删除不需要的行、列或单元格是一项常见且必要的操作,本文将使用Python脚本实现对Excel表格的高效自动化处理,感兴... 目录开发环境准备使用 python 删除 Excphpel 表格中的行删除特定行删除空白行删除含指定

MySQL 多列 IN 查询之语法、性能与实战技巧(最新整理)

《MySQL多列IN查询之语法、性能与实战技巧(最新整理)》本文详解MySQL多列IN查询,对比传统OR写法,强调其简洁高效,适合批量匹配复合键,通过联合索引、分批次优化提升性能,兼容多种数据库... 目录一、基础语法:多列 IN 的两种写法1. 直接值列表2. 子查询二、对比传统 OR 的写法三、性能分析

深入理解Go语言中二维切片的使用

《深入理解Go语言中二维切片的使用》本文深入讲解了Go语言中二维切片的概念与应用,用于表示矩阵、表格等二维数据结构,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧... 目录引言二维切片的基本概念定义创建二维切片二维切片的操作访问元素修改元素遍历二维切片二维切片的动态调整追加行动态

prometheus如何使用pushgateway监控网路丢包

《prometheus如何使用pushgateway监控网路丢包》:本文主要介绍prometheus如何使用pushgateway监控网路丢包问题,具有很好的参考价值,希望对大家有所帮助,如有错误... 目录监控网路丢包脚本数据图表总结监控网路丢包脚本[root@gtcq-gt-monitor-prome

Python通用唯一标识符模块uuid使用案例详解

《Python通用唯一标识符模块uuid使用案例详解》Pythonuuid模块用于生成128位全局唯一标识符,支持UUID1-5版本,适用于分布式系统、数据库主键等场景,需注意隐私、碰撞概率及存储优... 目录简介核心功能1. UUID版本2. UUID属性3. 命名空间使用场景1. 生成唯一标识符2. 数