使用百度地图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

相关文章

使用Python开发一个Ditto剪贴板数据导出工具

《使用Python开发一个Ditto剪贴板数据导出工具》在日常工作中,我们经常需要处理大量的剪贴板数据,下面将介绍如何使用Python的wxPython库开发一个图形化工具,实现从Ditto数据库中读... 目录前言运行结果项目需求分析技术选型核心功能实现1. Ditto数据库结构分析2. 数据库自动定位3

Python yield与yield from的简单使用方式

《Pythonyield与yieldfrom的简单使用方式》生成器通过yield定义,可在处理I/O时暂停执行并返回部分结果,待其他任务完成后继续,yieldfrom用于将一个生成器的值传递给另一... 目录python yield与yield from的使用代码结构总结Python yield与yield

Go语言使用select监听多个channel的示例详解

《Go语言使用select监听多个channel的示例详解》本文将聚焦Go并发中的一个强力工具,select,这篇文章将通过实际案例学习如何优雅地监听多个Channel,实现多任务处理、超时控制和非阻... 目录一、前言:为什么要使用select二、实战目标三、案例代码:监听两个任务结果和超时四、运行示例五

python使用Akshare与Streamlit实现股票估值分析教程(图文代码)

《python使用Akshare与Streamlit实现股票估值分析教程(图文代码)》入职测试中的一道题,要求:从Akshare下载某一个股票近十年的财务报表包括,资产负债表,利润表,现金流量表,保存... 目录一、前言二、核心知识点梳理1、Akshare数据获取2、Pandas数据处理3、Matplotl

Java使用Thumbnailator库实现图片处理与压缩功能

《Java使用Thumbnailator库实现图片处理与压缩功能》Thumbnailator是高性能Java图像处理库,支持缩放、旋转、水印添加、裁剪及格式转换,提供易用API和性能优化,适合Web应... 目录1. 图片处理库Thumbnailator介绍2. 基本和指定大小图片缩放功能2.1 图片缩放的

Oracle查询表结构建表语句索引等方式

《Oracle查询表结构建表语句索引等方式》使用USER_TAB_COLUMNS查询表结构可避免系统隐藏字段(如LISTUSER的CLOB与VARCHAR2同名字段),这些字段可能为dbms_lob.... 目录oracle查询表结构建表语句索引1.用“USER_TAB_COLUMNS”查询表结构2.用“a

Python使用Tenacity一行代码实现自动重试详解

《Python使用Tenacity一行代码实现自动重试详解》tenacity是一个专为Python设计的通用重试库,它的核心理念就是用简单、清晰的方式,为任何可能失败的操作添加重试能力,下面我们就来看... 目录一切始于一个简单的 API 调用Tenacity 入门:一行代码实现优雅重试精细控制:让重试按我

MySQL中EXISTS与IN用法使用与对比分析

《MySQL中EXISTS与IN用法使用与对比分析》在MySQL中,EXISTS和IN都用于子查询中根据另一个查询的结果来过滤主查询的记录,本文将基于工作原理、效率和应用场景进行全面对比... 目录一、基本用法详解1. IN 运算符2. EXISTS 运算符二、EXISTS 与 IN 的选择策略三、性能对比

使用Python构建智能BAT文件生成器的完美解决方案

《使用Python构建智能BAT文件生成器的完美解决方案》这篇文章主要为大家详细介绍了如何使用wxPython构建一个智能的BAT文件生成器,它不仅能够为Python脚本生成启动脚本,还提供了完整的文... 目录引言运行效果图项目背景与需求分析核心需求技术选型核心功能实现1. 数据库设计2. 界面布局设计3

使用IDEA部署Docker应用指南分享

《使用IDEA部署Docker应用指南分享》本文介绍了使用IDEA部署Docker应用的四步流程:创建Dockerfile、配置IDEADocker连接、设置运行调试环境、构建运行镜像,并强调需准备本... 目录一、创建 dockerfile 配置文件二、配置 IDEA 的 Docker 连接三、配置 Do