要实现HBuilder调用
百度地图并实现输入
起点和
终点规划步行线路以及
点击地图上任意位置获取
起点和
终点规划步行线路，你需要先完成以下步骤：
1. 在HBuilder中创建一个HTML5+项目。
2. 在项目根目录下创建一个名为“baidu
map”的文件夹，并在该文件夹下创建一个名为“index.html”的文件，并在其中添加
百度地图的
API引用代码。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
百度地图API实例</title>
<style type="text/css">
#container {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript" src="http://
api.
map.baidu.com/
api?v=2.0&ak=你的
百度地图API密钥"></script>
</body>
</html>
```
请将上述代码中的“你的
百度地图API密钥”替换为你自己的
百度地图API密钥。
3. 在“baidu
map”文件夹下创建一个名为“js”的文件夹，并在该文件夹下创建一个名为“main.js”的文件，并在其中添加以下代码：
```javascript
var
map = new B
Map.
Map("container");
map.centerAndZoom(new B
Map.
Point(116.404, 39.915), 11);
map.enableScrollWheelZoom(true);
// 规划步行路线
function walkingRoute(start, end) {
var walking = new B
Map.WalkingRoute(
map, {
renderOptions: {
map:
map,
autoViewport: true
}
});
walking.search(start, end);
}
// 监听地图
点击事件
map.addEventListener("click", function (e) {
var marker = new B
Map.Marker(e.
point);
map.addOverlay(marker);
if (
map.getOverlays().length > 1) {
map.removeOverlay(
map.getOverlays()[0]);
}
walkingRoute(e.
point,
map.getOverlays()[0].getPosition());
});
// 获取
起点和
终点并规划步行路线
function getWalkingRoute() {
var start = document.getElementById("start").value;
var end = document.getElementById("end").value;
var localSearch = new B
Map.LocalSearch(
map, {
onSearchComplete: function (results) {
if (localSearch.getStatus() == B
MAP_STATUS_SUCCESS) {
var startLocation = results.getPoi(0).
point;
var endLocation = results.getPoi(1).
point;
walkingRoute(startLocation, endLocation);
}
}
});
localSearch.search([start, end]);
}
```
4. 在“baidu
map”文件夹下创建一个名为“index.css”的文件，并在其中添加以下
样式代码：
```css
html, body, #container {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
input {
width: 100%;
height: 40px;
font-size: 16px;
padding: 10px;
box-sizing: border-box;
margin-bottom: 20px;
}
button {
width: 100%;
height: 40px;
font-size: 16px;
background-color: #009688;
color: #fff;
border: none;
border-radius: 5px;
}
```
5. 在“index.html”文件中添加
起点和
终点输入框和规划步行路线按钮。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
百度地图API实例</title>
<style type="text/css">
#container {
width: 100%;
height: 100%;
}
html, body, #container {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
input {
width: 100%;
height: 40px;
font-size: 16px;
padding: 10px;
box-sizing: border-box;
margin-bottom: 20px;
}
button {
width: 100%;
height: 40px;
font-size: 16px;
background-color: #009688;
color: #fff;
border: none;
border-radius: 5px;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="controls">
<input type="text" id="start" placeholder="请输入
起点">
<input type="text" id="end" placeholder="请输入
终点">
<button onclick="getWalkingRoute()">规划步行路线</button>
</div>
<script type="text/javascript" src="http://
api.
map.baidu.com/
api?v=2.0&ak=你的
百度地图API密钥"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
```
6. 运行项目，在输入框中输入
起点和
终点并
点击“规划步行路线”按钮即可实现规划步行路线。在地图上
点击任意位置也可以获取
起点和
终点并规划步行路线。
扫一扫
1769
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
