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

Bertha 。 2022-05-27 04:16 224阅读 0赞

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

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

来看一下示意图：

![20180411144724847][]

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

![20180411144613307][]

实例代码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 解析返回结果，自己生成操作界面和地图展示界面
    });

四种自驾游类型：

<table> 
 <tbody> 
  <tr> 
   <td>DrivingPolicy</td> 
   <td>类型</td> 
   <td>说明</td> 
  </tr> 
  <tr> 
   <td>AMap.DrivingPolicy.LEAST_TIME</td> 
   <td>Const</td> 
   <td>最快捷模式</td> 
  </tr> 
  <tr> 
   <td>AMap.DrivingPolicy.LEAST_FEE</td> 
   <td>Const</td> 
   <td>最经济模式</td> 
  </tr> 
  <tr> 
   <td>AMap.DrivingPolicy.LEAST_DISTANCE</td> 
   <td>Const</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>AMap.DrivingPolicy.REAL_TRAFFIC</td> 
   <td>Const</td> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

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

[20180411144724847]: /images/20220527/1d40c5cbc2ab4e34877cb8374dac406b.png
[20180411144613307]: /images/20220527/9f17d8ee618447c999bfa1589a2b6407.png
[api]: http://lbs.amap.com/api/javascript-api/reference/route-search#m_AMap.Driving