百度地图API 教程使用 嵌套到vue3项目中使用,能够定位并且搜索地点名称位置,反向解析获取经度和维度

本文主要是介绍百度地图API 教程使用 嵌套到vue3项目中使用,能够定位并且搜索地点名称位置,反向解析获取经度和维度,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

文章目录

  • 目录

    文章目录

    流程

    小结


    • 概要
    • 安装流程
    • 技术细节
    • 小结

概要

注册百度地图成为开发者:

登录百度账号

注册成功开始下一步

百度地图API是百度提供的一组开发接口,用于在自己的应用程序中集成地图功能。通过百度地图API,您可以实现地图展示、地理编码、逆地理编码、路线规划、定位等功能。以下是一些常见的百度地图API功能:

  1. 地图展示:通过百度地图API,您可以在自己的网页或移动应用中嵌入地图,并自定义地图样式、添加覆盖物、标注等功能。

  2. 地理编码和逆地理编码:地理编码是将地址信息转换为经纬度坐标的过程,而逆地理编码则是将经纬度坐标转换为地址信息的过程。通过百度地图API,您可以实现这些功能。

  3. 路线规划:百度地图API提供了路线规划功能,可以帮助用户规划驾车、步行、骑行等不同交通方式的路线,并提供导航指引。

  4. 定位服务:通过百度地图API,您可以获得用户的位置信息,实现定位功能。

  5. 地图数据可视化:百度地图API还提供了丰富的数据可视化功能,如热力图、点聚合等,帮助用户更直观地展示地图数据。

要使用百度地图API,您需要注册百度开放平台账号,创建应用并获取API密钥。随后,您可以根据具体的需求选择合适的API接口,并按照文档说明进行集成开发。

教程

创建成功的百度AK应用

项目开发,配置使用的语法是vue3

vue语法

效果图

代码,根据实际的需求来拿取,可以参考百度地图官网

onMounted(() => {BMap = window.BMap;console.log(BMap);map = new BMap.Map("l-map");map.centerAndZoom("北京", 12);ac = new BMap.Autocomplete({"input": "suggestId","location": map});ac.addEventListener("onhighlight", onHighlight);ac.addEventListener("onconfirm", onConfirm);var point = new BMap.Point(route.query.longitude, route.query.latitude); // 创建点坐标map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放// 创建标注点var marker = new BMap.Marker(point); // 创建标注map.addOverlay(marker); // 将标注添加到地图中// 定位当前浏览器位置var geolocation = new BMap.Geolocation(); // 创建定位实例console.log(geolocation);geolocation.getCurrentPosition(function (r) {if (this.getStatus() == BMAP_STATUS_SUCCESS) {var mk = new BMap.Marker(r.point); // 根据定位结果创建标注map.addOverlay(mk); // 将标注添加到地图中map.panTo(r.point); // 平移地图到定位结果的位置// alert('您的位置:' + r.point.lng + ',' + r.point.lat); // 弹出定位结果的经纬度信息storaddress.value = route.query.addressconsole.log(storaddress.value);} else {// alert('failed' + this.getStatus()); // 定位失败时弹出错误状态}});// 点击地图获取经度和维度map.addEventListener('click', handleClick);function handleClick(e) {// alert('点击的经纬度:' + e.point.lng + ', ' + e.point.lat);longitude.value = e.point.lnglatitude.value = e.point.latconsole.log(e);var pt = e.point;console.log(pt);console.log(longitude.value);console.log(latitude.value)var geoc = new BMap.Geocoder();const marker = new BMap.Marker(new BMap.Point(longitude.value, latitude.value));map.addOverlay(marker);console.log(map.addOverlay(marker));geoc.getLocation(pt, (rs) => {const addComp = rs.addressComponents;storaddress.value = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;console.log(storaddress.value + '牛');});}});
onBeforeUnmount(() => {if (ac) {ac.removeEventListener("onhighlight", onHighlight);ac.removeEventListener("onconfirm", onConfirm);}
});function onHighlight(e) {let str = "";let _value = e.fromitem.value;let value = "";if (e.fromitem.index > -1) {value = _value.province + _value.city + _value.district + _value.street + _value.business;}str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;value = "";if (e.toitem.index > -1) {_value = e.toitem.value;value = _value.province + _value.city + _value.district + _value.street + _value.business;}str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;G("searchResultPanel").innerHTML = str;
}function onConfirm(e) {let _value = e.item.value;let myValue = _value.province + _value.city + _value.district + _value.street + _value.business;G("searchResultPanel").innerHTML = "onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;setPlace(myValue);console.log(e.item.value);storaddress.value = e.item.value.province + e.item.value.city + e.item.value.district + e.item.value.business + e.item.value.streetNumber;console.log(storaddress.value);
}function setPlace(myValue) {if (map) {map.clearOverlays();function myFun() {var pp = local.getResults().getPoi(0).point;map.centerAndZoom(pp, 18);map.addOverlay(new BMap.Marker(pp));}var local = new BMap.LocalSearch(map, {onSearchComplete: myFun})local.search(myValue);longitude.value = local.rd.QC.lnglatitude.value = local.rd.QC.latconsole.log(longitude.value);console.log(latitude.value);// var pt = local.rd.QC;// console.log(pt);// console.log(longitude.value);// console.log(latitude.value)// var geoc = new BMap.Geocoder();// const marker = new BMap.Marker(new BMap.Point(longitude.value, latitude.value));// map.addOverlay(marker);// console.log(map.addOverlay(marker));// geoc.getLocation(pt, (rs) => {//     console.log(rs);//     const addComp = rs.addressComponents;//     console.log(addComp);//     storaddress.value = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;//     console.log(storaddress.value + '牛');// });console.log(storaddress.value)}
}

技术细节

根据实际情况,参考api文档,复制文档的代码就能够实现需求的功能

小结

这篇关于百度地图API 教程使用 嵌套到vue3项目中使用,能够定位并且搜索地点名称位置,反向解析获取经度和维度的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



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

相关文章

Golang HashMap实现原理解析

《GolangHashMap实现原理解析》HashMap是一种基于哈希表实现的键值对存储结构,它通过哈希函数将键映射到数组的索引位置,支持高效的插入、查找和删除操作,:本文主要介绍GolangH... 目录HashMap是一种基于哈希表实现的键值对存储结构,它通过哈希函数将键映射到数组的索引位置,支持

Java学习手册之Filter和Listener使用方法

《Java学习手册之Filter和Listener使用方法》:本文主要介绍Java学习手册之Filter和Listener使用方法的相关资料,Filter是一种拦截器,可以在请求到达Servl... 目录一、Filter(过滤器)1. Filter 的工作原理2. Filter 的配置与使用二、Listen

Pandas使用AdaBoost进行分类的实现

《Pandas使用AdaBoost进行分类的实现》Pandas和AdaBoost分类算法,可以高效地进行数据预处理和分类任务,本文主要介绍了Pandas使用AdaBoost进行分类的实现,具有一定的参... 目录什么是 AdaBoost?使用 AdaBoost 的步骤安装必要的库步骤一:数据准备步骤二:模型

使用Pandas进行均值填充的实现

《使用Pandas进行均值填充的实现》缺失数据(NaN值)是一个常见的问题,我们可以通过多种方法来处理缺失数据,其中一种常用的方法是均值填充,本文主要介绍了使用Pandas进行均值填充的实现,感兴趣的... 目录什么是均值填充?为什么选择均值填充?均值填充的步骤实际代码示例总结在数据分析和处理过程中,缺失数

如何使用 Python 读取 Excel 数据

《如何使用Python读取Excel数据》:本文主要介绍使用Python读取Excel数据的详细教程,通过pandas和openpyxl,你可以轻松读取Excel文件,并进行各种数据处理操... 目录使用 python 读取 Excel 数据的详细教程1. 安装必要的依赖2. 读取 Excel 文件3. 读

SpringBoot项目中报错The field screenShot exceeds its maximum permitted size of 1048576 bytes.的问题及解决

《SpringBoot项目中报错ThefieldscreenShotexceedsitsmaximumpermittedsizeof1048576bytes.的问题及解决》这篇文章... 目录项目场景问题描述原因分析解决方案总结项目场景javascript提示:项目相关背景:项目场景:基于Spring

解决Maven项目idea找不到本地仓库jar包问题以及使用mvn install:install-file

《解决Maven项目idea找不到本地仓库jar包问题以及使用mvninstall:install-file》:本文主要介绍解决Maven项目idea找不到本地仓库jar包问题以及使用mvnin... 目录Maven项目idea找不到本地仓库jar包以及使用mvn install:install-file基

如何为Yarn配置国内源的详细教程

《如何为Yarn配置国内源的详细教程》在使用Yarn进行项目开发时,由于网络原因,直接使用官方源可能会导致下载速度慢或连接失败,配置国内源可以显著提高包的下载速度和稳定性,本文将详细介绍如何为Yarn... 目录一、查询当前使用的镜像源二、设置国内源1. 设置为淘宝镜像源2. 设置为其他国内源三、还原为官方

Python使用getopt处理命令行参数示例解析(最佳实践)

《Python使用getopt处理命令行参数示例解析(最佳实践)》getopt模块是Python标准库中一个简单但强大的命令行参数处理工具,它特别适合那些需要快速实现基本命令行参数解析的场景,或者需要... 目录为什么需要处理命令行参数?getopt模块基础实际应用示例与其他参数处理方式的比较常见问http

Python利用ElementTree实现快速解析XML文件

《Python利用ElementTree实现快速解析XML文件》ElementTree是Python标准库的一部分,而且是Python标准库中用于解析和操作XML数据的模块,下面小编就来和大家详细讲讲... 目录一、XML文件解析到底有多重要二、ElementTree快速入门1. 加载XML的两种方式2.