Home > Article > Web Front-end > Implement map navigation function using JavaScript and Tencent Maps
Implement map navigation function using JavaScript and Tencent Maps
- WBOYOriginal
- 2023-11-21 09:55:41949browse
Using JavaScript and Tencent Maps to implement map navigation functions
With the development of society and the improvement of people's living standards, travel and travel have become an important part of people's lives. . When traveling or traveling, the map navigation function has become an indispensable auxiliary tool for people. This article will introduce how to use JavaScript and Tencent Maps to implement map navigation functions, and provide specific code examples.
First, we need to prepare a file containing HTML and JavaScript. In the HTML file, we need to add a <div> element that contains the map display and some buttons for selecting the start and end points. In the JavaScript file, we will use the API provided by Tencent Maps to implement the map navigation function. <p>HTML code example: </p><pre class='brush:html;toolbar:false;'><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>地图导航</title>
<style>
#map {
width: 100%;
height: 500px;
}
</style>
</head>
<body>
<h1>地图导航</h1>
<div>
<label for="start">起点：</label>
<input type="text" id="start" placeholder="请输入起点地址">
</div>
<div>
<label for="end">终点：</label>
<input type="text" id="end" placeholder="请输入终点地址">
</div>
<button onclick="navigate()">导航</button>
<div id="map"></div>
<script src="https://map.qq.com/api/js?v=2.exp&key=YOUR_KEY"></script>
<script src="script.js"></script>
</body>
</html></pre><p>JavaScript code example: </p><pre class='brush:javascript;toolbar:false;'>function navigate() {
// 获取起点和终点的输入值
var start = document.getElementById("start").value;
var end = document.getElementById("end").value;
// 创建地图实例
var map = new qq.maps.Map(document.getElementById("map"), {
center: new qq.maps.LatLng(39.916527, 116.397128), // 设定地图的中心点坐标
zoom: 13 // 设定地图的缩放级别
});
// 创建起点和终点标记
var startMarker = new qq.maps.Marker({
position: map.getCenter(), // 设置标记的位置为地图的中心点
map: map
});
var endMarker = new qq.maps.Marker({
position: map.getCenter(),
map: map
});
// 创建DrivingService实例并设置回调函数
var drivingService = new qq.maps.DrivingService({
complete: function (result) {
// 获取导航信息
var route = result.detail.routes[0];
// 清除之前的导航路线
map.clearOverlays();
// 绘制导航路线
var polyline = new qq.maps.Polyline({
path: route.polyline,
strokeColor: "#FF0000",
strokeWeight: 3,
strokeOpacity: 0.7
});
polyline.setMap(map);
// 设置起点和终点标记的位置
startMarker.setPosition(route.start);
endMarker.setPosition(route.end);
}
});
// 根据起点和终点进行导航
drivingService.search(start, end);
}</pre><p>In the above code, you need to replace <code>YOUR_KEY with your own Tencent Map API key. Then, when the user clicks the "Navigation" button, the navigate() function will be called. In this function, we first get the start and end addresses entered by the user. Then, create a map instance and set the map's center point coordinates and zoom level. Next, create start and end markers and add them to the map. Finally, create an DrivingService instance and set its callback function. In the callback function, navigate based on the starting point and end point, and draw the navigation route. At the same time, we also clear the previous navigation route and update the location of the start and end markers.
Using JavaScript and Tencent Maps, we can easily implement map navigation functions. Through the above code examples, you can adjust and expand them according to your own needs to meet the needs of more map navigation functions.
The above is the detailed content of Implement map navigation function using JavaScript and Tencent Maps. For more information, please follow other related articles on the PHP Chinese website!