Implement map route planning function using JavaScript and Tencent Maps

Use JavaScript and Tencent Maps to implement map route planning function

With the development of technology, online map services have gradually become one of the important tools in our daily lives. Among them, Tencent Maps, as the leading online map service provider in China, has powerful functions and rich data resources. This article will introduce how to use JavaScript and Tencent Maps to implement map route planning functions, and give specific code examples.

First, we need to introduce the Tencent Map JavaScript API and perform initialization settings. In the HTML document, we need to add the following code:

<script src="https://map.qq.com/api/js?v=2.exp&key=YOUR_KEY"></script>

Among them, YOUR_KEY needs to be replaced with the API key you applied for on the Tencent Map Open Platform. Next, we can initialize the map in the JavaScript code and obtain the container for map display. The code is as follows:

// 初始化地图
var map = new qq.maps.Map(document.getElementById("map"), {
    center: new qq.maps.LatLng(39.90886, 116.39739), // 地图中心点的位置
    zoom: 12 // 地图缩放级别
});

// 获取路线规划服务
var routeService = new qq.maps.DrivingService();

// 设置路线规划完成后的回调函数
routeService.setComplete(function(result) {
    // 清除之前的路线
    map.clearOverlays();
    
    // 获取路线规划结果
    var route = result.detail.routes[0];
    
    // 绘制路线
    var polyline = new qq.maps.Polyline({
        path: route.polyline,
        strokeColor: '#3366FF',
        strokeWeight: 5,
        map: map
    });
    
    // 显示起点
    new qq.maps.Marker({
        position: route.start,
        map: map
    });
    
    // 显示终点
    new qq.maps.Marker({
        position: route.end,
        map: map
    });
    
    // 调整地图视野，使路线可见
    map.fitBounds(polyline.getBounds());
});

// 设置路线规划失败后的回调函数
routeService.setError(function() {
    alert("路线规划失败，请重试！");
});

In the above code, we use the qq.maps.Map class to create a map instance and pass in a DOM element as a container for map display. The qq.maps.DrivingService class is used for route planning. By calling the setComplete and setError methods, the callback functions are set when the route planning is completed or failed.

Next, we can write a function to trigger the route planning operation. The code is as follows:

function searchRoute(start, end) {
    // 设置起点和终点
    routeService.setLocation(new qq.maps.LatLng(start.lat, start.lng), new qq.maps.LatLng(end.lat, end.lng));
    
    // 发起路线规划请求
    routeService.search();
}

In the function, we set the coordinates of the starting point and end point by calling the setLocation method of routeService. Then, call the search method to initiate a route planning request.

Finally, we can add input boxes for the starting point and destination point on the page, and add a button to trigger the route planning operation. The code is as follows:

<div>
    起点：<input type="text" id="start">
    终点：<input type="text" id="end">
    <button onclick="search()">搜索</button>
</div>
<div id="map" style="width: 800px; height: 600px;"></div>

In the JavaScript code, we can get the value in the input box and call the searchRoute function for route planning. The complete code is as follows:

function search() {
    var start = document.getElementById("start").value;
    var end = document.getElementById("end").value;
    
    if (start && end) {
        searchRoute(getLocation(start), getLocation(end));
    } else {
        alert("请输入起点和终点！");
    }
}

// 通过地名获取坐标
function getLocation(address) {
    // TODO: 根据地名获取坐标，可以使用腾讯地图的地点搜索服务，或者其他地理编码服务
    
    // 示例：直接返回一个坐标
    return {
        lat: 39.90886,
        lng: 116.39739
    };
}

In the getLocation function, we can use the location search service of Tencent Maps or other geocoding services to obtain coordinates based on place names. In the sample code, we directly return a fixed coordinate.

Through the above code examples, we can implement the function of map route planning using JavaScript and Tencent Maps. Readers can expand and optimize the code according to actual needs to adapt to more complex application scenarios.

The above is the detailed content of Implement map route planning function using JavaScript and Tencent Maps. For more information, please follow other related articles on the PHP Chinese website!