【.Net微信_服务号】3.微信公众号中高德地图显示路线

最新推荐文章于 2023-04-27 12:08:45 发布

Anabel Chen

最新推荐文章于 2023-04-27 12:08:45 发布

阅读量1.2k

点赞数 1

分类专栏：【微信_服务号】文章标签：高德地图

本文链接：https://blog.csdn.net/benben513624/article/details/79896328

版权

【微信_服务号】专栏收录该内容

5 篇文章 0 订阅

订阅专栏

最近公众号中要实现一个地图规划路线的功能，查了一下高德地图API，高德地图为我们提供了一个自驾游插件Map.Driving

官方解释：驾车路线规划服务，提供起、终点坐标的驾车导航路线查询功能。AMap. Driving构造函数的参数为 DrivingOptions 对象。DrivingOptions 允许设置驾车策略和返回信息详略。用户可以通过自定义回调函数取回并显示查询结果。若服务请求失败，系统将返回错误信息。

来看一下示意图：

点击进入高德地图，就会进入路线规划界面，如下图所示：

实例代码GaoDe.aspx：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GaoDe.aspx.cs" Inherits="LJWY_WX01_GaoDe" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">

    <title></title>
        <style>
        body,#mapContainer{
            margin:0;
            height:100%;
            width:100%;
            text-align: center;
            font-size:12px;
        }
        .center{
            position: absolute;
            width: 100%;
            bottom: 24px;
        }
    </style>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main.css?v=1.0?v=1.0" />
    //微信使用高德地图必须引入的js
    <script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
    <script src="http://webapi.amap.com/maps?v=1.3&key=06fb75f531ce19fd2af711465487d07a"></script>
    <script>
        function init() {
            var button = document.getElementById('bt');
            map = new AMap.Map("mapContainer");
            AMap.plugin(["AMap.Driving"], function() {
                var drivingOption = {
                    policy:AMap.DrivingPolicy.LEAST_TIME,
                    map:map
                };
                var driving = new AMap.Driving(drivingOption); //构造驾车导航类 其他导航方式设置相同
                //根据起终点坐标规划驾车路线
                driving.search([{keyword:'陆家嘴',city:'上海'},{keyword:'上海火车站',city:'上海'}],function(status,result){
                //driving.search(['起点坐标'],['终点坐标'],function(status,result){
                //city:公交换乘的城市，支持城市名称、城市区号、电话区号，此项为必填
                    button.onclick = function(){
                        driving.searchOnAMAP({
                            origin:result.origin,
                            destination:result.destination
                        });
                    } 
                });

            });
        }
    </script>
</head>
<body οnlοad="init()">
    <form id="form1" runat="server">
    <div>
        <div id="mapContainer" ></div>
        <div class='center'>
            <div id='bt' class="btmtip">点击去高德地图</div>
        </div>
    </div>
    </div>
    </form>
</body>
</html>

以上查找路线同样可以选择以经纬度来查询，如下：

driving.search([116.379028, 39.865042], [116.427281, 39.903719], function(status, result) {
     //TODO 解析返回结果，自己生成操作界面和地图展示界面
});

四种自驾游类型：

DrivingPolicy	类型	说明
AMap.DrivingPolicy.LEAST_TIME	Const	最快捷模式
AMap.DrivingPolicy.LEAST_FEE	Const	最经济模式
AMap.DrivingPolicy.LEAST_DISTANCE	Const
AMap.DrivingPolicy.REAL_TRAFFIC	Const

更多内容我们可以参考高德官方api

Anabel Chen

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
【.Net微信_服务号】3.微信公众号中高德地图显示路线

最近公众号中要实现一个地图规划路线的功能，查了一下高德地图API，高德地图为我们提供了一个自驾游插件Map.Driving官方解释：驾车路线规划服务，提供起、终点坐标的驾车导航路线查询功能。AMap. Driving构造函数的参数为 DrivingOptions 对象。DrivingOptions 允许设置驾车策略和返回信息详略。用户可以通过自定义回调函数取回并显示查询结果。若服务请求失败...
复制链接

扫一扫

专栏目录