高德地图API之货车路线

货车路线：

引入 AMap.TruckDriving

注意：和驾车路线、步行路线不同的是，必须指定cidy和size，并且坐标传入为json格式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>map</title>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a&plugin=AMap.TruckDriving,AMap.Autocomplete"></script>
    <style>
        *{margin:0;padding:0;list-style: none;}
        #container {width:100%; height: 100%;top:0;left:0;position: absolute; }
        #panel{position: fixed;width:280px;top:10px;right:10px;background-color: #fff;}
        #search{position: absolute;width:200px;height:100px;top:10px;left:10px;background-color: #fff;}
    </style>
</head>
<body>
    <div id="container"></div>
    <div id="panel"></div>

    <script>
        var map=new AMap.Map("container",{
            zoom:11
        });
        console.log(map.getCenter().toString());//121.549792,29.868388

        new AMap.TruckDriving({
            map:map,
            panel:"panel",
            city:"宁波",
            size:1
        }).search([{lnglat:[121.549792,29.868388]},{lnglat:[121.549792,30.468388]},{lnglat:[121.549792,31.368388]}],function(status,data){
            //console.log(data);
        });  

    </script>
</body>
</html>

使用地点名来规划货车路线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>map</title>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a&plugin=AMap.TruckDriving,AMap.Autocomplete"></script>
    <style>
        *{margin:0;padding:0;list-style: none;}
        #container {width:100%; height: 100%;top:0;left:0;position: absolute; }
        #panel{position: fixed;width:280px;top:10px;right:10px;background-color: #fff;}
        #search{position: absolute;width:200px;height:100px;top:10px;left:10px;background-color: #fff;}
    </style>
</head>
<body>
    <div id="container"></div>
    <div id="panel"></div>

    <script>
        var map=new AMap.Map("container",{
            zoom:11
        });
        console.log(map.getCenter().toString());//121.549792,29.868388

        new AMap.TruckDriving({
            map:map,
            panel:"panel",
            city:"宁波",
            size:1
        }).search([
            {keyword:"宁波大学"},
            {keyword:"宁波老外滩"}
        ],function(status,data){
            //console.log(data);
        });  

    </script>
</body>
</html>

可以用于多点的情况

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>map</title>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a&plugin=AMap.TruckDriving,AMap.Autocomplete"></script>
    <style>
        *{margin:0;padding:0;list-style: none;}
        #container {width:100%; height: 100%;top:0;left:0;position: absolute; }
        #panel{position: fixed;width:280px;top:10px;right:10px;background-color: #fff;}
        #search{position: absolute;width:200px;height:100px;top:10px;left:10px;background-color: #fff;}
    </style>
</head>
<body>
    <div id="container"></div>
    <div id="panel"></div>

    <script>
        var map=new AMap.Map("container",{
            zoom:11
        });
        console.log(map.getCenter().toString());//121.549792,29.868388

        new AMap.TruckDriving({
            map:map,
            panel:"panel",
            city:"宁波",
            size:1
        }).search([
            {keyword:"宁波大学"},
            {keyword:"宁波老外滩"},
            {keyword:"宁波大厦"}
        ],function(status,data){
            //console.log(data);
        });  

    </script>
</body>
</html>

通过事件来规划货车路线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>map</title>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a&plugin=AMap.TruckDriving,AMap.Autocomplete"></script>
    <style>
        *{margin:0;padding:0;list-style: none;}
        #container {width:100%; height: 100%;top:0;left:0;position: absolute; }
        #panel{position: fixed;width:280px;top:10px;right:10px;background-color: #fff;}
        #search{position: absolute;width:200px;height:100px;top:10px;left:10px;background-color: #fff;}
    </style>
</head>
<body>
    <div id="container"></div>
    <div id="panel"></div>
    <div id="search">
        起点<input type="text" id="node1"><br>
        终点<input type="text" id="node2"><br>
        <button id="btn">开始导航</button>
    </div>

    <script>
        var map=new AMap.Map("container",{
            zoom:11
        });
        console.log(map.getCenter().toString());//121.549792,29.868388

        new AMap.Autocomplete({
            input:"node1"
        })
        new AMap.Autocomplete({
            input:"node2"
        })

        btn.onclick=function(){
            new AMap.TruckDriving({
                map:map,
                panel:"panel",
                city:"宁波",
                size:1
            }).search([
                {keyword:node1.value,city:"宁波"},
                {keyword:node2.value,city:"宁波"}
            ],function(status,data){
                //console.log(data);
            });
        }

    </script>
</body>
</html>

也可以增加多点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>map</title>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a&plugin=AMap.TruckDriving,AMap.Autocomplete"></script>
    <style>
        *{margin:0;padding:0;list-style: none;}
        #container {width:100%; height: 100%;top:0;left:0;position: absolute; }
        #panel{position: fixed;width:280px;top:10px;right:10px;background-color: #fff;}
        #search{position: absolute;width:200px;height:100px;top:10px;left:10px;background-color: #fff;}
    </style>
</head>
<body>
    <div id="container"></div>
    <div id="panel"></div>
    <div id="search">
        起点<input type="text" id="node1"><br>
        途径<input type="text" id="node3"><br>
        终点<input type="text" id="node2"><br>
        <button id="btn">开始导航</button>
    </div>

    <script>
        var map=new AMap.Map("container",{
            zoom:11
        });
        console.log(map.getCenter().toString());//121.549792,29.868388

        new AMap.Autocomplete({
            input:"node1"
        })
        new AMap.Autocomplete({
            input:"node2"
        })
        new AMap.Autocomplete({
            input:"node3"
        })

        btn.onclick=function(){
            new AMap.TruckDriving({
                map:map,
                panel:"panel",
                city:"宁波",
                size:1
            }).search([
                {keyword:node1.value,city:"宁波"},
                {keyword:node3.value,city:"宁波"},
                {keyword:node2.value,city:"宁波"}
            ],function(status,data){
                //console.log(data);
            });
        }

    </script>
</body>
</html>

原文地址：https://www.cnblogs.com/chenyingying0/p/12435097.html

时间： 2024-10-22 16:45:05

高德地图API之货车路线的相关文章

高德地图 API 显示跑步路线

模仿对象此前在尝试制作时,我采用 Nike+ 官网效果为模板仿制.目前 Nike+ 已经升级,看不了之前版本的样式及动态效果,暂且看看样式区别不大的 Nike+ Run Club App 地图,动画部分依然以此前 Nike+ 官网效果为准. 分析一下,想要仿制跑步路线图,其中有两个难点,第一个是画线动态效果,第二个是路线的渐变效果.画线动画是跑步过程的表现,渐变效果则是实时配速的表现. 光看都能感觉到渐变效果比较难,故这边就先不模仿它,搞定画线动画先.之前在 Nike+ 网页端,还在终点显示了

高德地图API之公交路线

引入插件 AMap.Transfer <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>map</title> <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&ke

【高德地图API】从零开始学高德JS API（五）路线规划——驾车|公交|步行

先来看两个问题:路线规划与导航有什么区别?步行导航与驾车导航有什么区别? 回答: 1.路线规划,指的是为用户提供3条路线推荐.[高德]在提供路线规划的时候,会提供用户自定义路线规划功能,这是别家没有做到的.导航,指的是为驾车用户提示路口信息,向左向右,进入匝道等信息. 2.我们这里说的步行导航和驾车导航,严格的说,应该是路线规划.从A地到B地,如果是驾车,路线规划会将公路路网做为搜索数据:如果是步行,过街天桥.地下通道.人行道做为搜索数据. ---------------------------

百度地图API和高德地图API资料集锦

【高德地图API】如何打造十月妈咪品牌地图？

原文:[高德地图API]如何打造十月妈咪品牌地图? 摘要:品牌地图除了地图,商铺标点外,还有微博关注,路线查询等功能. ----------------------------------------------------------------- 网站视图: ----------------------------------------------------------------- 一.首先获取店铺的信息一般品牌点会提供地址,店铺名,电话,图片等信息. 这里,我们需要把地址转换成经纬

高德地图api实现地址和经纬度的转换(python)

利用高德地图web服务api实现地理/逆地址编码 api使用具体方法请查看官方文档文档网址:http://lbs.amap.com/api/webservice/guide/api/georegeo/ 1.利用python第三方库requests实现 Requests库文档地址:http://www.python-requests.org/en/master/ 1 #!/usr/bin/env python3 2 #-*- coding:utf-8 -*- 3 ''' 4 利用高德地图api实

高德地图API INVALID_USER_SCODE问题以及keystore问题

今天这篇文章会给大家介绍三个问题: 1,接入API时出现invalid_user_scode问题首先进行第一个大问题,接入高德地图API时出现invalid_user_scode问题因为项目需要接入高德地图的API,在接入其它API时会出现类似问题,在进行定位的时候出现了下列问题运行时log信息如下可以看到,定位失败有两个原因: 1,错误代码为10,定位服务启动失败. 2,错误代码为7,key错误. 根据高德地图的官方使用文档的介绍,对相关问题进行处理问题1:服务启动失败:检查清单配置

【高德地图API】如何获得行政区域？如何制作行政规划图？

什么是行政规划图?如何获得每个行政区域的边界轮廓图?举例:重庆市江北区.如图: 官方类参考:http://developer.amap.com/javascript/reference/search#Partition 行政规划代码: function byDistrict(){ var partition = new AMap.Partition(); //创建一个新的行政规划类 partition.byDistrict(district,city,byDi

【高德地图API】从零开始学高德JS API（七）——定位方式大揭秘

摘要:关于定位,分为GPS定位和网络定位2种.GPS定位,精度较高,可达到10米,但室内不可用,且超级费电.网络定位,分为wifi定位和基站定位,都是通过获取wifi或者基站信息,然后查询对应的wifi或者基站位置数据库,得到的定位地点.定位数据库可以不断完善不断补充,所以,越定位越准确.本文详细描述了,如果使用高德JS API来实现位置定位.城市定位的方法,包含了IP定位,浏览器定位,检索定位等多种网络定位方法.当然,如果您的手机有GPS功能,那么使用浏览器定位的时候,会自动获取GPS信息,使