最简洁的方式，实现web端百度地图一键定位导航

最新推荐文章于 2024-03-17 07:29:26 发布
最新推荐文章于 2024-03-17 07:29:26 发布
阅读量1.7w 收藏 24
点赞数 6
分类专栏： 前端开发 文章标签： 百度地图 导航 定位 web定位 web导航
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhongguohaoshaonian/article/details/79128333
版权

web开发过程中经常碰到需要调用百度地图来视线定位导航的过程，许多技术博客上介绍的都是调用百度地图的api，来自定义各种效果，这是一种方式。如果没有特殊需求的话，可以采用笔者下面的方式，一句话就可以实现定位导览和导航功能。

 window.location.href = "http://api.map.baidu.com/marker?location=" + lat + "," + lng + "&title=" + titleName + "&content=" +content+ "&output=html"

lat:纬度坐标
lng:经度坐标
titleName:定位位置显示的标题，一般为定位地点的名称
content:内容介绍，可写地点地址或者简介等。
示例效果图：
这里写图片描述

小圣贤君
关注
  • 6
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 13
    评论
专栏目录
背篼酥课堂-GPS定位（四）nodemcu gps模块 web页面 百度地图 定位
博水之野，人杰地灵
01-12 2128
1项目简介： nodemcu 对gps模块 解析报文，然后在百度地图显示； 使用的库是 解析gps 信号的库为：TinyGPS++ 软串口库 SoftwareSerial 使用nodemcu的webserver,保存html页面，html 页面引用百度地图定位key;如果展示demo,直接用我的代码； 2接线 nodemcu D5 ----------TX GPS 模块 nodemcu D6 -...
web端市面主流地图的加载实现
08-04
适合新入门的同学练习在web端实现市面主流地图的加载
Java web实现百度地图导航
青梅煮酒
07-06 1万+
首先进入百度地图首页 网址：http://lbsyun.baidu.com/index.php?title=首页 接着注册账号登录 接下来要注册成为百度地图个人开发者才能使用百度地图 填写相关的资料，我已经认证成功，资料填写很简单 由于百度地图要基于相应的应用，所以必须创建一个应用才可以使用秘钥，要不然地图不能打开。应用名称随便输入，应用类型一般选择浏览器端，应用服务可以全选，Referer...
前端Vue开发中的百度地图定位组件：实现定位、反向地址查询与详细地址展示
最新发布
chenchuang0128的博客
03-17 548
通过使用Vue和百度地图API，我们成功地在前端实现了地图定位、标记点展示以及详细地址的显示功能。这不仅提升了应用的用户体验，也为开发者提供了一种高效、便捷的方式来实现地图相关的功能。未来，随着前端技术的不断发展，我们期待有更多优秀的插件和工具出现，为开发者带来更多便利和创新。
WEB使用百度地图展示某地地址
乐逍遥
10-27 647
type=webgl&v=1.0&ak=您的密钥">点击【创建应用】进入AK申请页面，填写应用名称，务必选择AK类型为“浏览器端”，JS API只支持浏览器端AK进行请求与访问。第二步注册 获取AK秘钥，点击控制台中的我的应用创建应用。然后就可以在页面上引用 ，记得把你的秘钥换上。第一步 进入百度地图开发平台。下面的这个就是AK秘钥。
【高德地图】web集成百度地图点击获取位置信息,以及搜索获取位置信息案列
qq_44836497的博客
09-27 506
【代码】【高德地图】web集成百度地图点击获取位置信息,以及搜索获取位置信息案列
WEB端唤起 百度|腾讯|高德 地图一键导航功能
羽筠的博客
05-26 2134
腾讯地图 https://3gimg.qq.com/lightmap/v1/marker/index.html?marker=coord:纬度,经度;title:地点名称没有则根据经纬度自去填充;addr:地点位置地址信息没有则根据经纬度自去填充 百度地图 http://api.map.baidu.com/marker?location=纬度,经度&title=标题-地点名称&content=内容-地点位置地址信息&output=html&src=webapp.baidu.openAPIdemo 高德地图
html 打开百度地图，根据经纬度定位到某个地方（位置标注）
PrimaryColor
05-07 1948
位置标注api： http://api.map.baidu.com/marker?location=30.592899,104.062273&title=我的学院&content=学院&output=html&src=webapp.baidu.openAPIdemo 参数说明： location lat<纬度>,lng<经度> title 标注标题 content 标注内容 output 浏览器上必须..
webapp通过点击调用高德地图或百度地图导航
RuGal_的博客
05-10 345
webapp通过点击调用高德地图或百度地图导航 // 高德地图 <a :href="'https://uri.amap.com/marker?position='+经度+','+纬度+'&name='+地址名称">高德地图</a> // 百度地图 <a href="'http://api.map.baidu.com/marker?location='+纬度+','+经度+'&title='+所在位置名称+'&content='+所在位置的简介（可选）+'
在web页面嵌入百度地图（含定点定位）
热门推荐
sunshine-zwq的博客
05-13 1万+
在web页面嵌入百度地图（含定点定位）一、操作步骤二、可能遇到的问题1.标记图标没有正常显示出来2.使用到项目中可能遇到的问题（1）地图内容显示不正常（2）标注名称的边框显示不正常三、参考链接 一、操作步骤 （1）访问链接：http://api.map.baidu.com/lbsapi/creatmap/ （2）选择当前城市，然后输入具体地址，搜索 （3）可根据需求对地图的显示作设置 （4）添加地点标记：点击左侧绿色标记后，鼠标移到右侧底部对指定位置标记 （6）点击图标可切换不同的标记图标，然后添加
地图选点（百度地图web端）
Manong
10-21 2763
百度地图web端的地图选点组件，即调即用
百度地图一键导航生成
01-13
一个工具页面，可使用Firefox或者Chrome直接运行。通过在地图上拾取坐标点，最终生成一键导航的页面地址，可将该地址嵌入到H5页面、微信图文或其他Web页面中，实现点击后打开百度地图，以及一键导航功能。
vue 实现Web端的定位功能 获取经纬度
10-16
主要介绍了vue 实现Web端的定位功能获取经纬度，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
腾讯地图一键导航生成
01-13
一个工具页面，可使用Firefox或者Chrome直接运行。通过在地图上拾取坐标点，最终生成一键导航的页面地址，可将该地址嵌入到H5页面、微信图文或其他Web页面中，实现点击后打开腾讯地图，以及一键导航功能。
百度地图（webapi）移动地图，根据中心点定位
01-22
该文件包括拖动地图根据中心点定位，根据定位显示附近的信息，自动搜索提示等功能
带有定位当前位置的百度地图前端web api实例代码
11-23
废话不多说，直接给大家贴代码了，具体代码如下所示， 关键代码如下： <!DOCTYPE html> <html lang="zh-cn"> <...meta name="viewport" content="initial-scale=1.0, user-scalable=no" />...
java web 完整百度地图demo 准确定位出发地和目的地
11-04
参考了百度开发api文档整合，百度api地址：http://lbsyun.baidu.com/ 输入城市名称，在地图上定位到当前城市，并且输出经度和纬度，输入出发地和目的地分别定位，并查找两地之间的行车距离、时间以及路径分步骤。
Django接收GPS数据并实现百度地图定位
03-27
百度web端实现多边形电子围栏;批量上传围栏信息,地图上提取多边形区域经纬度;可以通过拉拽添加点的形式添加边的数量;可判断marker是否在多边形区域区域内;,超出区域后邮件报警;有详细的数据解析
JavaScript根据百度地图提供的案例实现地图定位
04-14
用于学习
qt实现百度地图和定位
04-30
Qt是一个跨平台的GUI应用程序开发框架，可以在多种操作系统上实现图形用户界面和应用程序的开发。Qt实现百度地图和定位需要使用第三方库，例如QtLocation和QtWebEngine等。其中，QtLocation包含了用于地理位置的QML元素和C++实现，可以实现地图展示和地理位置的查找，QtWebEngine则能够在应用程序中直接嵌入Web页面。下面是一些实现方法： 1.使用QtLocation库 首先要在Qt工程中添加QtLocation库，然后可以通过QML元素和C++实现来创建地图视图和显示定位信息。以下是一个简单的QML示例代码： ```qml import QtQuick 2.6 import QtLocation 5.6 Map { id: map anchors.fill: parent activeMapType: MapType.SatelliteWithLabels Plugin { id: osmPlugin name: "osm" } MapItemView { model: pluginManager.mappingManagerModel } MapCircle { center: pluginManager.positionSource.position.coordinate radius: 500 } } ``` 这个代码创建了一个地图视图，使用了QML语言创建。其中，Map元素是地图视图，activeMapType设置为卫星图，Plugin元素指定了地图数据源，MapCircle指定了一个圆形的位置。 2.使用QtWebEngine库 如果想要在应用程序中直接嵌入Web页面来显示地图，可以使用QtWebEngine库。以下是一个简单的C++示例代码： ```cpp #include <QApplication> #include <QWebEngineView> int main(int argc, char *argv[]) { QApplication app(argc, argv); QWebEngineView *view = new QWebEngineView(); view->load(QUrl("http://api.map.baidu.com")); view->show(); return app.exec(); } ``` 这个代码创建了一个QWebEngineView对象，加载百度地图的API页面，然后显示出来。 以上是两种实现方法的简单示例代码，具体实现还需要根据不同的需求进行调整和修改。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 13
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值