hbuilder调用百度地图如何实现1、输入起点和终点,规划出步行线路 2、点击地图上的任意位置,获取起点和终点,规划步行线路
时间: 2023-06-10 21:07:51 浏览: 59
要实现这两个功能,你需要进行以下步骤:
1. 在HBuilder中引入百度地图的API,可以通过在页面中添加以下代码来实现:
```html
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
```
其中,您需要将“您的密钥”替换为您在百度地图开放平台申请的密钥。
2. 实现起点和终点输入框以及规划路线的功能。
你可以在页面中添加两个输入框来让用户输入起点和终点,然后通过百度地图API中的“步行路线规划服务”来规划出步行路线。你需要在JS代码中编写以下步骤:
首先,创建一个地图对象:
```javascript
var map = new BMap.Map("map-container");
```
然后,根据用户输入的起点和终点地址,获取起点和终点的坐标:
```javascript
var startPoint = new BMap.Point(startLng, startLat);
var endPoint = new BMap.Point(endLng, endLat);
```
接下来,创建一个步行路线规划服务:
```javascript
var walking = new BMap.WalkingRoute(map, {renderOptions:{map: map, autoViewport: true}});
```
然后,调用步行路线规划服务的search方法,传入起点和终点的坐标:
```javascript
walking.search(startPoint, endPoint);
```
最后,将步行路线显示在地图上:
```javascript
walking.setSearchCompleteCallback(function(results){
if (walking.getStatus() == BMAP_STATUS_SUCCESS){
var plan = results.getPlan(0);
var route = plan.getRoute(0);
var path = route.getPath();
var polyline = new BMap.Polyline(path, {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});
map.addOverlay(polyline);
}
});
```
3. 实现通过点击地图来获取起点和终点并规划步行路线的功能。
你可以在页面中添加一个地图容器,并在JS代码中创建一个地图对象:
```javascript
var map = new BMap.Map("map-container");
```
然后,给地图添加一个点击事件监听器,当用户点击地图时获取点击的坐标:
```javascript
map.addEventListener("click", function(e){
var point = new BMap.Point(e.point.lng, e.point.lat);
// 这里可以将点击的坐标显示在页面上或者直接将其作为起点或终点
});
```
接下来,根据用户点击的坐标,调用步行路线规划服务的search方法,传入起点和终点的坐标:
```javascript
walking.search(startPoint, endPoint);
```
最后,将步行路线显示在地图上:
```javascript
walking.setSearchCompleteCallback(function(results){
if (walking.getStatus() == BMAP_STATUS_SUCCESS){
var plan = results.getPlan(0);
var route = plan.getRoute(0);
var path = route.getPath();
var polyline = new BMap.Polyline(path, {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});
map.addOverlay(polyline);
}
});
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)