腾讯地图 根据两点间的坐标算出路线

本文介绍如何在微信小程序中使用腾讯地图API实现两点间路线规划,并展示沿途加油站信息。通过JavaScript SDK获取经纬度,计算缩放比例,显示路线与加油站图标。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.先去腾讯地图申请key,传送门
2.下载微信小程序JavaScriptSDK,
3.在小程序引入,
在上一页面取得两地的经纬度,

小程序代码
wxml

<map
id="myMap"
style="width: 100%; height: 1500rpx;"
longitude="{{longitude}}" 
latitude="{{latitude}}"
scale='{{scale}}' 
polyline="{{polyline}}" 
markers="{{markers}}" 
show-compass
>
</map>

js

var QQMapWX = require('./utils/qqmap-wx-jssdk.min.js');
var util=require('./utils/util.js');

// 实例化API核心类
var qqmapsdk = new QQMapWX({
  key: ''
});

Page({

  /**
   * 页面的初始数据
   */
  data: {
    latitude:'',
    longitude:'',//地图显示坐标
    markers:[],//地图标注
    scale:16,//地图缩放尺寸
    polyline: [],//路线
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log(options);
    let startLat = options.startLat;//起点纬度
    let startLng = options.startLng;//起点经度
    let destLat = options.destLat;//终点纬度
    let destLng = options.destLng;//终点经度


    var that = this;
    //调用距离计算接口
    wx.showLoading({
      title: '加载中',
    })
    qqmapsdk.direction({
      mode: 'driving',//可选值:'driving'(驾车)、'walking'(步行)、'bicycling'(骑行),不填默认:'driving',可不填
      //from参数不填默认当前地址
      from: {
        latitude: startLat,
        longitude: startLng
      },
      to: {
        latitude: destLat,
        longitude: destLng
      },
      policy: 'REAL_TRAFFIC',  //结合路况的最优方式
      success: function (res,data) {
        // console.log('返回结果--', res);
        // console.log('返回结果22--', data);
        //计算缩放比例
        let distance = data[0].distance/1000;
        console.log(distance);
        if (distance>500){
          var scale=4;
        } else if (distance>200){
          var scale = 7;
        } else if (distance > 100){
          var scale = 9;
        }else{
          var scale = 12;
        }
        var ret = res;
        var coors = ret.result.routes[0].polyline, pl = [];
        //坐标解压(返回的点串坐标,通过前向差分进行压缩)
        var kr = 1000000;
        for (var i = 2; i < coors.length; i++) {
          coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
        }
        //将解压后的坐标放入点串数组pl中
        for (var i = 0; i < coors.length; i += 2) {
          pl.push({ latitude: coors[i], longitude: coors[i + 1] })
        }
        // console.log('--',pl);
        //查看是否you途径站
        wx.request({
          url: util.baseurl +'Index/getWaystation',
          data:{
            station:pl,
            startLat: startLat,
            startLng: startLng,
            destLat: destLat,
            destLng: destLng,
          },
          method:"post",
          success:function(res){
            wx.hideLoading();
            console.log('路线坐标---', res);
            let oil=res.data;//加油站坐标
            //设置polyline属性,将路线显示出来,将解压坐标第一个数据作为起点
            that.setData({
              latitude: pl[0].latitude,
              longitude: pl[0].longitude,
              polyline: [{
                points: pl,
                color: '#4AC37A',
                borderColor: '#000',
                width: 10,
                arrowLine: true,
                borderWidth: 6
              }],
              scale: scale,
              markers: oil
            })
          }
        })
        
      },
      fail: function (error) {
        wx.hideLoading();
        console.error(error);
      },
      complete: function (res) {
        console.log(res);
      }
    });
  },
  })

php代码

//根据经纬度查询途径站(2公里以内)
    public function getWaystation(){
        $param=$this->request->param();
//        echo "<pre>";
//        var_dump($param);
        $oilSearch=input('oilSearch','');//油品搜索
		//marker地图标记
        $result=array([
            'id'=>0,
            'latitude'=>$param['startLat'],
            'longitude'=>$param['startLng'],
            'iconPath'=>'../../../images/start.png',
            'width'=>20,
            'height'=>30,
        ],[
            'id'=>1,
            'latitude'=>$param['destLat'],
            'longitude'=>$param['destLng'],
            'iconPath'=>'../../../images/dest.png',
            'width'=>20,
            'height'=>30,
        ]);
        //查询加油站
        $where['m.create_time']=['<=',time()];
        $where['m.expire_time']=['>=',time()];
        $res=db('mechanism')
            ->alias('m')
            ->join('jy_user_admin u','m.id=u.mid')
            ->where(array('is_admin'=>1,'m.status'=>1))
            ->where($where)
            ->field('m.id,m.latitude,m.longitude,m.name,m.address')
            ->select();
        //查看每个坐标点两公里以内是否有加油站
        foreach ($param['station'] as $k=>$v){
            foreach ($res as $res_k=>$res_v){
                $distance=$this->distance($v['latitude'],$v['longitude'],$res_v['latitude'],$res_v['longitude']);
                if($distance<=2){
                    //油品搜索
                    $arr=0;
                    if($oilSearch){//油品搜索
                        $oil_price=db('oil_price')->where(['p_mid'=>$res_v['id'],'p_oid'=>$oilSearch])->field('p_price,p_oid,p_mid')->order('p_price desc')->select();
                        foreach ($oil_price as $price_k=>$price_v){
                            if($res_v['id']==$price_v['p_mid']){
                                $arr=1;
                                break;
                            }
                        }
                        if(count($oil_price)>1){
                            $price=end($oil_price)['p_price'].'/L~'.reset($oil_price)['p_price'].'/L';
                        }else{
                            $price=reset($oil_price)['p_price'].'/L';
                        }
                        if($arr==1){
                            $oil=[
                                'id'=>$res_v['id'],
                                'latitude'=>$res_v['latitude'],
                                'longitude'=>$res_v['longitude'],
                                'iconPath'=>'../../../images/oil.png',
                                'width'=>28,
                                'height'=>28,
                                'callout'=> [
                                    'content'=> $res_v['name']."\n".'¥'.$price,
                                    'color'=> '#000',
                                    'display'=> 'BYCLICK',
                                    "padding"=>10
                                ]
                            ];
                            array_push($result,$oil);
                        }
                    }else{
                        $oil_price=db('oil_price')->where('p_mid',$res_v['id'])->field('p_price')->order('p_price desc')->select();
                        if(count($oil_price)>1){
                            $price=end($oil_price)['p_price'].'/L~'.reset($oil_price)['p_price'].'/L';
                        }else{
                            $price=reset($oil_price)['p_price'].'/L';
                        }
                        $oil=[
                            'id'=>$res_v['id'],
                            'latitude'=>$res_v['latitude'],
                            'longitude'=>$res_v['longitude'],
                            'iconPath'=>'../../../images/oil.png',
                            'width'=>28,
                            'height'=>28,
                            'callout'=> [
                                'content'=> $res_v['name']."\n".'¥'.$price,
                                'color'=> '#000',
                                'display'=> 'BYCLICK',
                                "padding"=>10
                            ]
                        ];
                        array_push($result,$oil);
                    }
                }
            }
        }
        return json($result);
    }
    //计算路线与加油站之间的距离
    public function distance($locallat,$locallng,$oillat,$oillng){
        //计算用户当前位置与加油站之间的距离
        $r = 6378.137; // 地球半径
        $radLat1 = $this->rad($locallat);//当前纬度
        $radLat2 = $this->rad($oillat);//加油站纬度
        $lat = $radLat1 - $radLat2;
        $long = $this->rad($locallng) - $this->rad($oillng);

        $s = 2 * asin(sqrt(pow(sin($lat/2), 2) + cos($radLat1)*cos($radLat2)*pow(sin($long/2), 2)));
        $s = $s * $r;
        $distance=round($s * 10) / 10;
        //返回公里
        return $distance;
    }

over

### 车载导航地图开发技术实现 车载导航地图的开发涉及多个关键技术领域,包括但不限于地图SDK接入、路径规划算法、实时交通数据处理以及渲染优化等方面。以下是关于车载导航地图开发的技术细节: #### 地图SDK的选择与集成 在开发过程中,通常会选用成熟的地图服务提供商所提供的SDK工具包,例如百度地图API或腾讯地图API等[^2]。这些SDK提供了丰富的接口支持,能够满足不同场景下的需求,如地图显示、标注放置、路线计算等功能。 对于Android平台而言,可以通过引入百度地图API完成驾车导航功能的具体实现[^3]。下面是一个简单的代码片段展示如何初始化并设置一条驾驶线路覆盖物对象RouteOverlay: ```java // 创建RouteOverlay实例并与当前活动绑定到指定MapView上 RouteOverlay routeOverlay = new RouteOverlay(this, baiduMapView); routeOverlay.setData(routePlanSearchResult.getRouteLines().get(0)); // 设置路径数据源 baiduMapView.getOverlayManager().add(routeOverlay); // 添加至管理器中生效 ``` #### 导航核心逻辑设计 除了基础的地图展现外,还需要关注导航过程中的动态更新机制。这涉及到几个重要环节: - **定位模块**: 获取车辆当前位置坐标; - **检索模块**: 查询兴趣点(Point Of Interest),即POI信息; - **算路模块**: 计算两点最优行驶方案; - **引导模块**: 提供语音提示及视觉指引辅助驾驶员操作。 上述各部分均可以在Java端予以实现,并借助Unity引擎或其他图形化框架进一步增强用户体验效果[^4]。例如,在复杂路况下提供更加直观易懂的画面表达形式——诸如“蚯蚓线”动画模拟前进方向变化趋势;或是当接近特定交叉口前自动弹出放大镜视图以便观察更详尽的道路布局情况等等。 #### 数据解析与渲染性能提升策略 为了保证流畅的操作感受,针对海量地理空要素的有效管理和高效绘制显得尤为重要。一方面要充分利用底层硬件加速能力(GPU),另一方面也要合理安排内存占用水平防止因加载过多不必要的纹理素材而导致卡顿现象发生。此外还可以考虑采用LOD(Level of Detail)分级加载方式按需读取远近不同的区域详情从而达到节省资源消耗的目的。 综上所述,从选型合适的第三方库起步直至深入探讨内部运作原理乃至最后落实具体编码实践各个环节都不可或缺共同构成了完整的车载导航解决方案体系架构蓝图。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值