微信小程序之高德地图API路线规划

#wxml代码#

 <view class="flex-style">
  <view class="flex-item active" bindtouchstart="goToCar">驾车</view>
  <view class="flex-item" bindtouchstart="goToWalk">步行</view>
  <view class="flex-item" bindtouchstart="goToBus">公交</view>
  <view class="flex-item" bindtouchstart="goToRide">骑行</view>
</view>
<view class="map_box">
  <map id="navi_map" longitude="{{longitude}}" latitude="{{latitude}}" scale="12" markers="{{markers}}" polyline="{{polyline}}" show-location="true"></map>
</view>
<view class="text_box">
  <view class="text">{{distance}}</view>
  <view class="text">{{cost}}</view>
  <view class="detail_button" bindtouchstart="goDetail">详情</view>
</view>

#js代码#

var amapFile = require('../../utils/amap-wx.js');
var config = require('../../utils/config.js');

Page({
  data: {
    markers: [{
      iconPath: "../../img/mapicon_navi_s.png",
      id: 0,
      latitude:'',
      longitude:'',
      width: 23,
      height: 33
    },{
      iconPath: "../../img/mapicon_navi_e.png",
      id: 0,
      latitude:'',
      longitude:'',
      width: 24,
      height: 34
    }],
    distance: '',
    cost: '',
    polyline: []
  },
  onLoad: function() {
    var that = this;
    var key = config.Config.key;
    var myAmapFun = new amapFile.AMapWX({key: key});
    myAmapFun.getDrivingRoute({
      success: function(data){
        origin: data[0].longitude,data[0].latitude;
        destination: data[1].longitude,data[1].latitude;
        var marker = [{
          latitude: data[0].latitude,
          longitude: data[0].longitude
        },
        {
          latitude: data[1].latitude,
          longitude: data[1].longitude
        }
        ]
        that.setData({
          markers: marker[0],
          latitude: data[0].latitude,
          longitude: data[0].longitude
        });
        that.setData({
          markers: marker[1],
          latitude: data[1].latitude,
          longitude: data[1].longitude
        });
        var points = [];
        if(data.paths && data.paths[0] && data.paths[0].steps){
          var steps = data.paths[0].steps;
          for(var i = 0; i < steps.length; i++){
            var poLen = steps[i].polyline.split(';');
            for(var j = 0;j < poLen.length; j++){
              points.push({
                longitude: parseFloat(poLen[j].split(',')[0]),
                latitude: parseFloat(poLen[j].split(',')[1])
              })
            } 
          }
        }
        that.setData({
          polyline: [{
            points: points,
            color: "#0091ff",
            width: 6
          }]
        });
        if(data.paths[0] && data.paths[0].distance){
          that.setData({
            distance: data.paths[0].distance + '米'
          });
        }
        if(data.taxi_cost){
          that.setData({
            cost: '打车约' + parseInt(data.taxi_cost) + '元'
          });
        }

      }
    })
  },
  goDetail: function(){
    wx.navigateTo({
      url: '../navigation_car_detail/navigation'
    })
  },
  goToCar: function (e) {
    wx.redirectTo({
      url: '../navigation_car/navigation'
    })
  },
  goToBus: function (e) {
    wx.redirectTo({
      url: '../navigation_bus/navigation'
    })
  },
  goToRide: function (e) {
    wx.redirectTo({
      url: '../navigation_ride/navigation'
    })
  },
  goToWalk: function (e) {
    wx.redirectTo({
      url: '../navigation_walk/navigation'
    })
  }
})

怎么改才能让marker的两个标记变成活的经纬度,原来的高德地图API是两个写死的经纬度,高德路线规划,现在这个样子是我自己改的,摸索了微信小程序3天了,还不太懂,希望有大神能不吝赐教!!

0

2个回答

markers是数组,同一更新好经纬度后整个更新,而不是设置markers为当个marker

                     //origin: data[0].longitude, data[0].latitude;
                   // destination: data[1].longitude, data[1].latitude;
                    /*var marker = [{
                        latitude: data[0].latitude,
                        longitude: data[0].longitude
                    },
                    {
                        latitude: data[1].latitude,
                        longitude: data[1].longitude
                    }
                    ]
                    that.setData({
                        markers: marker[0],
                        latitude: data[0].latitude,
                        longitude: data[0].longitude
                    });
                    that.setData({
                        markers: marker[1],
                        latitude: data[1].latitude,
                        longitude: data[1].longitude
                    });*/

                                        =============》


                    var markers = that.data.markers;
                    markers[0].longitude = data[0].longitude; markers[0].latitude = data[0].latitude
                    markers[1].longitude = data[1].longitude; markers[1].latitude = data[1].latitude
                    that.setData({ markers: markers });
0
weixin_41844824
浅议永久333 电脑上显示markers标志,但手机上没有显示是怎么回事
10 个月之前 回复
showbo
支付宝加好友偷能量挖 回复羽毛大大: myAmapFun.getDrivingRoute({ success: function(data){。data是什么?看你的代码是数组,但是高德返回的是json对象,你自己搞清楚data的结构
接近 2 年之前 回复
qq_39719589
羽毛大大 我觉得我wxml文件写的有问题嘛,只能看到终点的图片,看不到起点的。
接近 2 年之前 回复
qq_39719589
羽毛大大 恩,好的
接近 2 年之前 回复
showbo
支付宝加好友偷能量挖 回复羽毛大大: 继续在这里问或者提问题都行,新问题站内短信发我连接下就行
接近 2 年之前 回复
qq_39719589
羽毛大大 我再摸索摸索,有不会可以再问你吗?
接近 2 年之前 回复
showbo
支付宝加好友偷能量挖 回复羽毛大大: 就是setData更新,没更新自己微信工具开发工具里面看是不是报错了。或者data.taxi_cost就不是等价于true的值,没执行setData
接近 2 年之前 回复
qq_39719589
羽毛大大 var points = []; ************************ that.setData({ cost: '打车约' + parseInt(data.taxi_cost) + '元' }); }那这一部分怎么改啊?第二个点总把第一个点覆盖掉,而且位置还不对,wxml中的map需要什么样的修改呢?
接近 2 年之前 回复

var key = config.Config.key;请问这句是什么意思?

1
tonywu1061
tonywu1061 回复qq_37189596: 在那个路程规划页面的最下面有一个获取完整信息,会导向github地址,你就会发现它那个libs下面还有一个config.js的文件,示例页面里面没有提,就是配置一下高德的key
一年多之前 回复
qq_37189596
我说算你狠 我也遇到这个问题了,这个var key的config怎么加啊
一年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
微信小程序-路线规划,地图导航功能基于高德地图API
主要实现微信小程序中的地图路线规划和地图导航功能nn小程序二维码:nnnn更新 nn2018年4月18日:新增限行限号查询。nn2018年5月7日:新增快递查询,模板消息发送。nn准备nn1、在http://lbs.amap.com/申请keynn2、在微信小程序后台把restapi.amap.com添加进request合法域名nn本文知识点nn1、微信小程序基本构架nn2、页面之间跳转nn3、在...
微信小程序----原生API实现【到这里去(目的地)】路线规划
前言rnrnrn 在此之前,采用了高德地图微信小程序API实现路线规划,但是由于公交路线规划不够准确,同时没有做转车等显示,所以这里补加微信小程序wx.openLoaction实现该效果!rnrnrnrnrn效果图rnrnrn个人中心进入公司地址 rnrn定位公司地址 rnrn到公司地址去并且实现驾车路线规划 rnrn骑行路线规划 rnrn返回小程序页面 rnrnrnrn效果视频rnrnrnrnrnrnWXML代码rnrnrnrn&amp;amp;lt;map class=&amp;quot;...
微信小程序----高德地图API实现的DEMO
微信小程序----高德地图API实现的周边,天气,路线规划,地址详情等的DEMO。
微信小程序__腾讯地图开发__路径规划绘制
现象nnn 我们想用微信小程序实现在map&amp;gt;组件上自定义显示导航路径,但是目前为止官方并未给出相应的方法实现,map&amp;gt;组件确实有绘制点对点连线的属性polyline,但是呢我们没有一系列的坐标集合也是画不出一条路径的,n n n n 更糟糕的是即便你内置微信小程序JavaScript SDK,它目前为止也不能给你相应的返回导航路径中所有坐标集合方法实现,不信你看介绍 n n...
微信小程序实现路径规划
通勤助手小程序使用了线路规划这一功能,借助腾讯地图的rnrnWebService API中的路线规划服务和划线可实现这一功能。index.wxml文件如下,点击路线形成规划图。index.js文件如下rnrnrnrnrn  id="map"rn  polyline="{{polyline}}"rnmarkers="{{markers}}"rninclude-points="{{markers}}"
微信小程序---高德地图API
本文章介绍微信小程序调用高德地图API的过程,使用高德定位功能做演示。nn微信小程序目前支持百度地图、高德地图、腾讯地图。用法都基本一致,简单说一下他们的区别,高德地图精度应该是最准确的,毕竟本来就是做地图出生的。百度地图的精度目前较高德而言,还是要稍稍欠缺一点,但是他的附近商家那些要比高德好一点。而关于腾讯地图,暂时来说还是只能表示呵呵,希望越来越好吧。n1.既然本章是介绍微信小程序如何使用高德...
基于高德地图自定义规划路径小demo
设置避让区域,避让道路,重新规划路径,支持自定义路径样式
微信小程序----map组件实现(路线规划)
效果图rnrnrnrnrnrn实现原理rnrnrn通过map组件标记起始点和绘制路线图;rn通过高德地图API获取不同类型的路线坐标点,以及耗费时间和路程。rnrnrnrnrnWXMLrnrnrnrn&amp;amp;amp;lt;view class=&amp;amp;quot;flex-style&amp;amp;quot;&amp;amp;amp;gt;rn &amp;amp;amp;lt;view class=&amp;amp;quot;flex-item {{status == 'car' ?
百度地图API适应手机移动端微信小程序定位导航路径规划
百度地图API适应手机移动端微信小程序定位导航路径规划,可以固定目的地,或者自己稍加修改不限目的地,公交查询功能添加了路线展示,可以添加到页面。
高德地图 步行路线规划 Walking
AMap.Walking 步行导航服务,提供起、终点步行路线规划服务n官方api解释n AMap.Walking步行导航服务,提供起始、终点步行路线查询服务。用户可以通过自定义回调函数取回并显示查询结果。若服务请求失败,系统将返回错误信息。n当我们到某个陌生的区域找工作或找餐馆时,这时我们就可以打开步行导航系统为我们进行导航了,高德地图为我们提供了一个插件,AMap.Walking,通过调用该插
微信小程序----map路线规划
效果图rnrnrn 进入页面直接定位到当前位置,输入目的地!rnrnrnrnrnrn 返回首页查看路线规划—选择驾车、步行、骑行rnrnrnrnrn原理rnrnrn采用微信小程序的map组件;rn采用高德地图的 微信小程序SDK获取规划路线的坐标点。rnrnrnWXMLrnrnrnrnview class=&amp;amp;amp;amp;quot;tui-map&amp;amp;amp;amp;quot;&amp;amp;amp;amp;gt;rn map id=&amp;amp;amp;amp;q
微信小程序实现地图搜索/定位/检索/天气/路线规划
小程序地图采用微信小程序提供的map组件;周边的数据坐标点通过高德地图提供的API接口,获取定位位置的周边或者指定位置周边的数据。此代码提供小程序map搜索/定位/检索/天气/路线规划
高德地图坑爹的路线规划长度问题
高德地图提供的路线规划很两种方式,一种是利用搜索的方式异步规划,可以选择驾车、步行、公交。只需要把要规划的起点和终点传到方法里就可以了。rnrnrn还要一种是高德提供的导航,里面也有路线规划成功的回调可以获取路线长度。rnrnrn但是坑爹的问题来了,这两种方法的长度和高德地图自己app出来的结果不一样,会有200米左右的偏差(距离远偏差会更多),而且我自己写的语音播报的距离居然是和高德地图给的数据
高德地图 路径规划 步行和骑车
关键代码: nnn var btnArray = ['步行', '骑车'];n mui.confirm('您不在当前位置', '', btnArray, function(e) {n if(e.index == 1) {n //骑车n AMap.plugin([&quot;AMap.Riding&quot;], function() {n var drivingOption = ...
对接高德地图API规划路线
                                                                     对接高德地图API规划路线nn一,首先是去高德官网申请nn这边是java服务端调用api接口,所以应该社区web服务的appkeynnnnnn nn二,然后写几个工具类nna.发送http请求nnb.参数对象nnc.返回接收对象nnhttpRequestnnpa...
微信小程序开发(2)——地图定位、地图滑动、创建路线等
1.地图的使用nn在wxml文件中使用地图,动态设置中心点位置和地图大小等信息。nnn&amp;lt;map id=&quot;map&quot; n longitude=&quot;{{longitude}}&quot; n latitude=&quot;{{latitude}}&quot; n scale=&quot;14&quot; n controls=&quot;{{controls}}&quot; n markers=&quot;{{markers}}&quot; n polylin
[WebGIS] Demo3-使用高德地图Web服务|路线规划
高德地图路径规划服务rn提供两个点之间的路线:步行、公交、驾车使用rnjQueryrnArcGIS API for javascript
小程序实现map搜索/定位/检索/天气/路线规划
小程序地图采用微信小程序提供的map组件;周边的数据坐标点通过高德地图提供的API接口,获取定位位置的周边或者指定位置周边的数据。此代码提供小程序map搜索/定位/检索/天气/路线规划
高德地图API路径规划结果清除
关于高德地图API之路径规划结果的清除(js API)n偶然用到高德地图API做路径规划,在做的过程中发现连续进行不同的路径规划产生的结果是叠加的。如何清除上一次的路径规划呢?开发手册上有一个**clear()**函数,就是用来清除搜索结果的。废话不多说,直接上代码:n //driving 为全局变量,也只有设为全局变量才能存储每次的路径规划结果,才能调用clear()函数n if(drivi...
高德地图驾车路径规划详情获取
用到这个功能,花了不少时间,还是在大神的指点下才弄出来。没办法毕竟菜鸟一个,原来没有写博客的习惯,从来都是看大神的,然后去用,现在开始记录一下吧,。。。。菜鸟博客,有不对的地方轻喷。。。从高德的sdk和demo里 找了半天,刚开始一直在3D地图里面找,寻找有关drive的类,不要怪 英文毕竟太菜。。。。也百度了一些相关的 ,但是我还是没弄出来….最后才找到原来这个东西在 AMap_Android_
wepy小程序高德地图API自定义地图
只做了高德地图依据搜索地址滑动地图显示对应的建筑,在依据显示的建筑添加地址,搜索地址,显示对应的地址,再将对应的地址显示到地图上滑动
高德地图简单实现及路径规划
为了自己用方便,仅供参考
高德地图的路线规划 简易版
将jar包放入libs目录下。对于每个jar文件,右键-选择Add As Library,导入到工程中。nnnnjar包的下载地址 具体要下什么版本的自己选nn https://lbs.amap.com/api/android-navi-sdk/downloadnnnn nn nn使用自定义配置,将下载文件的 armeabi 文件夹复制到 libs 目录,如果有这个目录,请将下载的 so 库复制到...
小程序版高德地图完美运行demo
小程序版高德地图完美运行demo,1:小程序增加域名白名单https://restapi.amap.com,2修改app.js内的key为你设置的,完美运行
高德api 实现定位 marker 路线规划
package com.example.gdmap; nimport android.app.Activity; nimport android.graphics.BitmapFactory; nimport android.graphics.Color; nimport android.os.Bundle; nimport android.util.Log; nimport android.vie
高德地图WebAPI : 驾车路径规划
高德地图WebAPn驾车路径规划n获取两点间最短驾车距离nJava
高德地图之拖动定位、多点路线规划给路段设置不同颜色
n n n 又有新需求 所以继续地图开发 这里记录两点 一是拖动定位 二是对多点路线规划不同路段设置颜色 下面给出效果图看一下 再上干货n先推荐一个拾取经纬度工具 http://www.gpsspg.com/bs.htmn拖动定位效果nnnnnn拖动nn设置不同路段的颜色nnnnnn颜色nn先说第一种效果 拖动定位 这个效果还是很简单的实现的n说一下思路n1...
高德地图移除路线Demo
高德地图添加路线,移除路线以及更改路线颜色、宽度等操作 高德地图其他操作都很简单就
高德地图之路线规划 多点路线规划路线最短原则排序算法
继续上一篇 写路线规划 nn上一篇写道多点路线规划 高德地图仅仅只会按照你给出的点的顺序进行路线规划 并不会智能的给你按照最近或者最快进行规划 举个例子 A B C D 四个点路线规划 A是起点 D是终点 B C 是途径点 加入你按照 A - B - C - D 的顺序给高德 那么高德返回给你的就是 A - B - C - D这个顺序 加入这时A - B - C - D...
基于高德地图的路径规划+避让区域+途经点导航demo
最近公司有在在路径规划和拥堵绕行这方面,研究了一下高德地图的避让区域和路径规划,发现高德地图居然不支持避让区域导航,没办法,只能自己加以研究研究其它可行的办法了 效果图package cn.lonwin.hightext.Activity;nimport android.os.Bundle;nimport android.util.Log;nnimport com.amap.api.navi.AM...
路径规划导航
本小程序主要是应用于微信小程序中基于腾讯地图的路径规划问题。
使用高德路径规划api实现轨迹的模拟
一、前言nn最近在做一个共享汽车出行平台可视化的项目,用户提供的数据本身只包含起止点,但是用户想查看每天使用用户的动态轨迹信息展示,关于动态轨迹展示方法,可以参考这篇文章:几种动态轨迹可视化效果实现方案-echarts、mapv、deck.gl n。为了满足用户的要求,就需要自己根据起止点 进行轨迹数据的模拟。nnnn二、方法nn轨迹的模拟,我这里真正有用的信息是轨迹点,查找了下百度和高德的地图开...
高德地图JavascriptAPI:驾车路径规划
API在高德地图提供的API中有详细的demo,需要注意几点问题n线路规划的几种方法 n时间最短:LEAST_TIME,n费用最少:LEAST_FEE,n距离虽短:LEAST_DISTANCE,n规避拥堵:REAL_TRAFFICn使用经纬度查询距离时,一个点的经纬度之间要有空格
OpenLayer4结合高德API实现地图选点路径规划
前言:路径规划也是WebGIS一个特点,我们在做某些应用的时候可能会用到路径规划的功能,该功能我们也可以自己实现,利用数据等,但是OpenLayer一大特色就是加载在线地图,向高德,百度等,这些地图都提供一些api接口供大家调用获取数据,在做路径规划的时候,刚开始用的百度提供的api,发现这个路径规划的真烂你都不好意去吐槽,最后换成高德api总体效果还算满意。废话不多说进入正文。nn先来张图:nn...
高德地图JS--批量规划步行路线 优化
调取高德地图JS API 进行步行路线规划nn多个起点到达一个重点,根据搜素结果画路线,进行绘图,并为线路添加点击事件nn效果如下:nnnn代码如下:nnn&amp;lt;!doctype html&amp;gt;n&amp;lt;html&amp;gt;n&amp;lt;head&amp;gt;n &amp;lt;meta charset=&quot;utf-8&quot;&amp;gt;n &amp;lt;meta http-equiv=&quot;X-UA-Compatible&quot;
第三方:高德地图 蓝点,定位,路线规划
 nn第一步:nn如何申请 Keynn1、创建新应用nn进入控制台,创建一个新应用。如果您之前已经创建过应用,可直接跳过这个步骤。nnnn nnnn nn2、添加新Keynn在DOS命令窗口输入下面命令即可nnC:\Users\WIN7\.android&amp;gt;keytool -list -v -keystore debug.keystoren输入密钥库口令:nn*****************...
微信小程序使用高德地图API获取准确定位地址描述
n 高德API文档:微信小程序SDK &amp;gt; 开发指南 &amp;gt; 获取数据 &amp;gt; 获取地址描述数据nnnwxmlnn&amp;lt;button bindtap=&quot;getLocation&quot;&amp;gt;获取定位&amp;lt;/button&amp;gt;nnjsnnnnconst app=getApp()nconst amapFile=require('../../js/amap-wx.js')nPage({n ...
高德地图-添加路线规划(自驾、步行...)
官方参考资料地址:(http://lbs.amap.com/api/android-sdk/guide/route-plan/drive/)官方文档:http://a.amap.com/lbs/static/unzip/Android_Map_Doc/index.htmlActivity关键代码:/*初始化 搜索路线所需的类*/n private void initRouteSearch()
高德地图 android 开发 路线规划 自定义 修改线路颜色和宽度
public class MyDrivingRouteOverlay extends DrivingRouteOverlay {rnpublic int color;// 路线颜色rnpublic float lineWidth;// 路线宽度rnrnrnpublic MyDrivingRouteOverlay(Context context, AMap amap, DrivePath drive
微信小程序开发-高德地图api
第一步:rn既然是高德地图的使用,那么我们首先进入高德地图开放平台:高德地图rn注册之后在应用管理新建一个应用获取keyrnrnrnrnrn获取key之后我们去高德地图API看看高德对API的介绍,rn相关下载那有sdk的下载链接,参考文档有相关的方法介绍。rnrnrnrnrn第二步:rn登录微信开发者平台,在设置里面获取appid,另外在服务器域名设置里面将https://restapi.ama
文章热词 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型 设计制作学习
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 小程序 开发教程 微信 微信小程序游戏开发教程