微信小程序通过腾讯地图规划路线

分手后的思念是犯贱 2022-05-25 04:53 586阅读 0赞

参考:https://blog.csdn.net/u011330225/article/details/74612620

  1. index.wxml:
  2. <map id="map" polyline="{
  3. {polyline}}" markers="{
  4. {markers}}" include-points="{
  5. {markers}}" style="width: 100%; height: 700rpx;"></map>
  6. index.js:
  7. var coors;
  8. const config = require("../../utils/config.js");
  9. var qqMapKey = config.qqMapSdk;
  10. Page({
  11. data: {
  12. polyline:[],
  13. markers:[{
  14. latitude:23.362490,
  15. longitude:116.715790,
  16. }, {
  17. latitude:23.37228,
  18. longitude:116.75498,
  19. }],
  20. },
  21. onLoad: function (options) {
  22. let that2 = this;
  23. wx.request({
  24. url:'https://apis.map.qq.com/ws/direction/v1/driving/?from=23.362490,116.715790&to=23.37228,116.75498&output=json&callback=cb&key='+qqMapKey,
  25. success:function(res){
  26. coors = res.data.result.routes[0].polyline
  27. for(var i=2; i< coors.length; i++) {
  28. coors[i]= coors[i-2]+ coors[i]/1000000
  29. }
  30. console.log(coors)
  31. //划线
  32. var b=[];
  33. for(var i=0; i< coors.length; i=i+2) {
  34. b[i/2]={
  35. latitude: coors[i],longitude:coors[i+1]
  36. };
  37. console.log(b[i/2])
  38. }
  39. that2.setData({
  40. polyline: [{
  41. points: b,
  42. color:"#99FF00",
  43. width:4,
  44. dottedLine:false }],
  45. })
  46. }
  47. })
  48. },
  49. });

url 请求返回的详细信息:

70

返回路线:

70 1

发表评论

表情:
评论列表 (有 0 条评论,586人围观)

还没有评论,来说两句吧...

相关阅读