HBuilderX 内置高德地图定位以及构建路径

最新推荐文章于 2024-04-09 10:17:44 发布
最新推荐文章于 2024-04-09 10:17:44 发布
阅读量4.1k 收藏 7
点赞数
分类专栏： 前端 文章标签： 高德地图 定位 创建路径
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/OttsWang/article/details/89878507
版权

定位

构建驾车路径

以上两个为该项目的基础，首先，先进行简单的结合，
 

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>Map Example</title>
		<script type="text/javascript">
			var em = null,
				map = null,
				start_point=null,end_point=null;
			// H5 plus事件处理
			function plusReady() {
				// 确保DOM解析完成
				if (!em || !window.plus || map) {
					return
				};
				map = new plus.maps.Map("map");
				map.centerAndZoom(new plus.maps.Point(116.3977, 39.906016), 12);
			}
			if (window.plus) {
				plusReady();
			} else {
				document.addEventListener("plusready", plusReady, false);
			}
			// DOMContentloaded事件处理
			document.addEventListener("DOMContentLoaded", function() {
				em = document.getElementById("map");
				plusReady();
			}, false);
			// 获取用户的当前位置信息
			function getUserLocation() {
				map.getUserLocation(function(state, point) {
					if (0 == state) {
						// alert( JSON.stringify(point) );
						map.centerAndZoom(point, 18);
						start_point = new plus.maps.Point(point.getLng(), point.getLat());
					} else {
						alert("Failed!");
					}
				});
			}
			function drivingSearch() {
				// 检索从北京天安门到大钟寺的驾车线路
				var searchObj = new plus.maps.Search(map);
				searchObj.onRouteSearchComplete = function(state, result) {
					console.log("onRouteSearchComplete: " + state + " , " + result.routeNumber);
					if (state == 0) {
						if (result.routeNumber <= 0) {
							alert("没有检索到结果");
						}
						for (var i = 0; i < result.routeNumber; i++) {
							map.addOverlay(result.getRoute(i));
						}
					} else {
						alert("检索失败");
					}
				}
				getUserLocation();
				end_point = new plus.maps.Point(116.3977, 39.906016);
				searchObj.drivingSearch(start_point, "", end_point, "");
			}
		</script>
		<style type="text/css">
			* {
				-webkit-user-select: none;
			}

			html,
			body {
				margin: 0px;
				padding: 0px;
				height: 100%;
			}
			#map {
				width: 100%;
				position: fixed;
				top: 100px;
				bottom: 0px;
				line-height: 200px;
				text-align: center;
				background: #FFFFFF;
			}
		</style>
	</head>
	<body>
		<button type="button" onclick="drivingSearch()">导航</button>
		<div id="map">地图加载中...</div>

	</body>
</html>

这里我是把getUserLocation塞到drivingSearch里面，即先获取位置再构建路径，但运行之后，你需要点击两次按钮才能拿构建路径，这里的原因是js并不会按照程序所给的顺序执行命令，而是多线程，这段代码中，程序先构建了路径，之后再获取了起点，第二次点击才能构建成功，这里用延时函数setTimeout来解决顺序问题，代码如下

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>Map Example</title>
		<script type="text/javascript">
			var em = null,
				map = null,
				start_point=null,end_point=null;
			// H5 plus事件处理
			function plusReady() {
				// 确保DOM解析完成
				if (!em || !window.plus || map) {
					return
				};
				map = new plus.maps.Map("map");
				map.centerAndZoom(new plus.maps.Point(116.3977, 39.906016), 12);
			}
			if (window.plus) {
				plusReady();
			} else {
				document.addEventListener("plusready", plusReady, false);
			}
			// DOMContentloaded事件处理
			document.addEventListener("DOMContentLoaded", function() {
				em = document.getElementById("map");
				plusReady();
			}, false);
			// 获取用户的当前位置信息
			function getUserLocation() {
				map.getUserLocation(function(state, point) {
					if (0 == state) {
						// alert( JSON.stringify(point) );
						map.centerAndZoom(point, 18);
						start_point = new plus.maps.Point(point.getLng(), point.getLat());
					} else {
						alert("Failed!");
					}
				});
			}
			function drivingSearch() {
				if(start_point)
				{
					var searchObj = new plus.maps.Search(map);
				searchObj.onRouteSearchComplete = function(state, result) {
					console.log("onRouteSearchComplete: " + state + " , " + result.routeNumber);
					if (state == 0) {
						if (result.routeNumber <= 0) {
							alert("没有检索到结果");
						}
						for (var i = 0; i < result.routeNumber; i++) {
							map.addOverlay(result.getRoute(i));
						}
					} else {
						alert("检索失败");
					}
				}
				end_point = new plus.maps.Point(116.3977, 39.906016);
				searchObj.drivingSearch(start_point, "", end_point, "");
				}
				else 
				{
					setTimeout(drivingSearch,500);
				}
				
			}
			function daoahng(){
				getUserLocation();
				drivingSearch();
			}
		</script>
		<style type="text/css">
			* {
				-webkit-user-select: none;
			}

			html,
			body {
				margin: 0px;
				padding: 0px;
				height: 100%;
			}
			#map {
				width: 100%;
				position: fixed;
				top: 100px;
				bottom: 0px;
				line-height: 200px;
				text-align: center;
				background: #FFFFFF;
			}
		</style>
	</head>
	<body>
		<button type="button" onclick="daoahng()">导航</button>
		<div id="map">地图加载中...</div>

	</body>
</html>

那么进一步的，让地图自动加载定位以及规划路径的呢？代码如下

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>Map Example</title>
		<script type="text/javascript">
			var map = null,
				start_point = null,
				end_point = null;

			function drivingSearch() {
				if (start_point) {

					var searchObj = new plus.maps.Search(map);
					end_point = new plus.maps.Point(116.3977, 39.906016);

					searchObj.onRouteSearchComplete = function(state, result) {
						console.log("onRouteSearchComplete: " + state + " , " + result.routeNumber);
						if (state == 0) {
							if (result.routeNumber <= 0) {}
							for (var i = 0; i < result.routeNumber; i++) {
								map.addOverlay(result.getRoute(i));

							}
						} else {
							// alert("检索失败");
						}
					}
					searchObj.drivingSearch(start_point, "", end_point, "")

				}
				else 
				{
					setTimeout(drivingSearch,500);
				}
				

			}

			function getUserLocation() {
				map.getUserLocation(function(state, point) {
					if (0 == state) {
						start_point = new plus.maps.Point(point.getLng(), point.getLat());

					} else {
						alert("定位失败，请确保GPS已经开启"); //没开定位
					}
				});
			}
			// 创建地图控件
			function createMap() {
				if (window.plus && !map) {
					map = new plus.maps.Map("map");
					plus.webview.currentWebview().append(map);
					getUserLocation();
					drivingSearch();
				} else {
					setTimeout(createMap, 500);
				}
			}
			window.load=createMap();
		</script>
		<style type="text/css">
			* {
				-webkit-user-select: none;
			}

			html,
			body {
				margin: 0px;
				padding: 0px;
				height: 100%;
			}
			#map {
				width: 100%;
				position: fixed;
				top: 100px;
				bottom: 0px;
				line-height: 200px;
				text-align: center;
				background: #FFFFFF;
			}
		</style>
	</head>
	<body>
		<div id="map">地图加载中...</div>

	</body>
</html>

判断游戏啊window.plus 以及地图是否创建即可

OttsWang
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Hbuilder开发app引入地图
qq_41078088的博客
04-25 2667
由于开发需要使用到地图进行定位，所以在网上找了许多的资料，一开始，准备引入百度地图，但是因为各种原因，引入失败，只好另寻他路，找到了HTML5中国产业联盟这个网址：http://www.html5plus.org/doc/zh_cn/maps.html 里面关于Hbuilder开发App的各种详细介绍，例如：调用手机摄像头、获取手机的通讯录等等。 里面其中的一个是关于Maps的，如何引入手机的内置...
uniapp、hbuilderx做微信小程序，获取当前城市定位（省份国家街道等）
qq_47818483的博客
10-08 3308
获取用户当前位置分为3步 1.获取位置用户请求权限 2.获取经纬度 3.经纬度转换为城市 一.获取位置用户请求权限 获取权限的目的主要是因为避免转换不了城市的报错（可能出现不提示“需要先请求用户权限”的信息，进而导致后续报错或没反应） 1.在项目里的需要的页面里使用button按钮绑定获取定位事件 <button type="default" @click="getLocation">点击获取定位</button> 2.js部分 getLocation() { wx.getLoc
HBuilderX 内置高德地图的drivingSearch的用法
OttsWang的博客
04-29 1960
原文档 Boolean searchObj.drivingSearch( start, startCity, end, endCity ); 参数： start:(String|Point) 必选驾车线路检索的起点地址名称或坐标 若起点地址为名称则需使用地名关键字，如起点为坐标则需要使用plus.maps.Point类型对象。 startCity:(String) 必...
iphone开发：地图绘制轨迹 (摘自 云怀空－abel)
yanhaodeng的专栏
07-25 622
iOS中的MapKit集成了google地图api的很多功能加上iOS的定位的功能，我们就可以实现将你运行的轨迹绘制到地图上面。这个功能非常有用，比如汽车的gprs追踪、人员追踪、快递追踪等等。这篇文章我们将使用Map Kit和iOS的定位功能，将你的运行轨迹绘制在地图上面。 实现    在之前的一篇文章：iOS开发之在google地图上显示自己的位置中描述了如何在地图上显示自己的位置，如果我
HBuilderX使用高德地图，获取当前定位
BetterGG的博客
03-23 4910
1、配置高德地图key 2、地图插件配置，该链接有高德地图和百度地图的配置方法 上链接中的知识，不在复述，补充一点关键资料 2-1、获取安卓key 结果如下： 2-2、生成IOS的key ...
关于如何用HBuilder X 来调用百度地图接口API的过程：
m0_52433668的博客
03-12 1748
关于如何用HBuilder X 来调用百度地图接口API的过程： 第一步：搜索 百度地图开放平台进入官网，点击 立即注册 第二步：注册成功后到首页点击 控制台，点击 应用管理，点击 创建应用填好应用名称，然后在白名单里填上 * (*表示允许所有浏览器访问)，点击提交 第三步：点击开发文档，然后点击JavaScript API 第四步：点击示例DEMO 第五步：在进入示例DEMO后，选择自己想要的API复制代码即可，最后将自己的AK(密钥)复制到属性ak...
uniapp之安卓使用高德地图
qq_43253632的博客
05-25 3573
最近在做地图定位相关的东西，然后天真的我以为uni和原生微信应该是差不多操作的，但是！！！现实给我了一巴掌，并告诉我你丫的白日做梦呢吧。 之后度娘了一波，大部分都是直接把uni官方那一套粘贴过来，最后的最后终于通过七零八碎的文章搞定了。 首先，你要先登陆高德开放平台https://lbs.amap.com/，然后到控制台的应用管理---->我的应用里面创建一个应用 然后点击添加（主要说安卓） 这个时候呢，就会出现问题了，安全码SHA1和调试码SHA1以及PackageName这些要从哪里来勒？ 首先
使用hbuilder的maps模块调起百度地图导航
一念执着。c的博客
03-22 6746
首先需要在百度地图开放平台，创建应用拿到appid，然后在hbuilder进行如下配置： hbuilder的manifest.json的配置如下： permissions下添加如下代码： "Maps": { "description": "地图" } 然后引入百度地图的js： &lt;script type="text/java...
多功能高德地图-多功能路径-电子围栏-定位打卡
12-09
本程序包含 多功能路径、电子围栏、定位打卡 功能 结合之前文章将程序源码整理在一起。 代码都已安排注释，下载后先安装node_modules依赖， main.js中配置好密钥 components=>map=>index.vue中也需要密钥 才可正常...
JS基于高德地图定位城市闪烁特效
07-24
在JavaScript（JS）开发中，有时...实现JS基于高德地图定位城市闪烁特效的步骤大致如下： 1. **引入高德地图API**：在HTML文件中，我们需要引入高德地图的JavaScript库，通常通过`<script>`标签实现。例如： ```html ...
高德地图 定位 划线 导航
07-09
本篇将详细探讨“高德地图 定位 划线 导航”这一主题，涉及地图显示、定位技术、路线规划以及路径划线等核心功能。 一、地图(Mapview)展示 地图(Mapview)是高德地图的基础组件，它能够实时展示地理位置信息，包括...
vue使用elementui结合高德地图的定位以及位置显示
11-25
在Vue.js应用中，ElementUI是一个非常流行的前端组件库，提供了丰富的UI元素和交互设计，而高德地图则是一款强大的地图服务提供商，提供地图展示、定位、路线规划等功能。将ElementUI与高德地图结合，可以创建出具有...
Hbuider hybrid app开发之地图操作方法
千里马的专栏
07-22 5098
var map = null; var zoom = 13;//缩放值 function creatMap(data,ws){//创建地图---data：一些地图设置参数 如图标、中心点经纬度 if (!ws) {return}; wo = ws.opener(); map = new plus.maps.Map("map"); if(!data){
HBuilderX 中开发vue，引入百度地图获取当前ip地址定位
baicai_123的专栏
04-09 615
获取ip定位（注意：这里的self.BMapGL是data参数中自己定义的全局变量了，所以这里名称可以自己随意选取了，为了方便代码修改，最好是用BMapGL）2、新建一个bMap.js（文件名随意）文件，用来设置你的百度密钥。3、在vue中引入bMap.js，并设置ak，然后获取ip定位。1、安装mapvgl： npm install mapvgl。
HBuilderX云打包后Android手机高德地图无法使用问题
weixin_43968658的博客
03-01 1590
公司H5包壳APP项目有需要使用高德地图，用HBuilderX真机调试安卓和苹果手机都能使用，但是云打包后，安卓手机却打不开地图。 遇到问题，首先想看有没有什么报错，安卓手机可以在手机上下载谷歌浏览器，然后打开手机设置的开发者选项，手机USB连上电脑。电脑谷歌浏览器浏览 chrome://inspect/#devices，如下图 特别需要注意的地方 1、manifest.json 中的 debug: “true” 需要设置，否则看不到APP。 2、点inspect查看调试，会出现404，这里需要翻墙
在HBuilder中采用百度地图动态画轨迹
爱吃干锅的少年
09-19 1488
本demo采用的百度地图，所以要在manifest.json里面配置你从百度申请AK，不然地图不能正常显示。下面就献上代码吧 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1.0, maximum-scale
HBuilderX 开发uniapp打包之后定位、选择地图无法使用的原因
mr_lihuijie的博客
08-12 6241
一、未配置地图key 使用定位和选择地图需要配置地图apikey，如图，可选择百度或高德地图（二选一） 云端打包地图功能需要到第三方地图平台申请应用后获取相关配置参数： 高德LBS开放平台 百度LBS开放平台配置参数需要提交云端打包后才能生效，如果需要真机运行生效请使用自定义基座 二、配置方式 高德LBS开放平台申请应用 登录高德LBS开放平台，点击有上角的“控制台”按钮，在控制台界面左侧导航列表选择“应用管理”下的“我的应用”。 创建应用 如果已经创建应用可忽略此步骤 在“我的应.
Hbuilder中百度地图插件的使用
热门推荐
弹指间，BUG灰飞烟灭！
06-24 2万+
需要一个app,有地图和导航功能，需要调用百度地图插件。 1.打开百度地图LBS开放平台（http://lbsyun.baidu.com/）。 2.点击API控制台进入。 3.在工具Hbuilder中创建html5+APP。 新建移动app(HelloMap)–>模板选择HTML5+–>创建 将新建项目plus文件夹中demo文件删除，只留以下三个文件
简约清新PPT模板，适用于工作总结，工作计划
最新发布
07-15
【作品名称】：简约清新PPT模板，适用于工作总结，工作计划 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
怎么在hbuilder中引入高德地图的api
04-22
您可以按照以下步骤在HBuilder中引入高德地图API： 1. 在高德开放平台上注册账号，创建应用，获取开发者Key。 2. 在HBuilder项目的html文件中添加如下代码： ``` <script src="//webapi.amap.com/maps?v=1.4.15&key=yourKey"></script> ``` 将“yourKey”替换为您申请的高德地图开发者Key。 3. 在JavaScript代码中创建地图对象并进行相关操作，例如： ``` var map = new AMap.Map('container',{ zoom:11, center:[116.397428,39.90923] }); ``` 这将在id为“container”的div中创建一个地图，将其缩放级别设置为11，并将其中心设置为经纬度为[116.397428,39.90923]的点。 希望这能回答您的问题。如果您有任何其他问题，请随时问我。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值