E企盈小程序营销工具技术服务商 热线:4006-838-530

小程序调用高德地娄底E企盈小程序图组件

E企盈小程序直播系统

这是高德官方的详细说明高德开放平台上微信小程序SDK(http://lbs.amap.com/api/wx/summary/)。以下是我个人在实际操作中的步骤及遇到的问题:1、首先申请一个高德的KEY,用于让小程序调用,以便使用高德地图上的功能,这个没有什么坑,官方说明也讲的很清楚。2、下载 微信小程序SDK,建议去高德官网下载最新版。3、小程序上具体实现步骤:路线规划常用于出行路线的提前预览,我们提供4种类型的路线规划,分别为:驾车、步行、公交和骑行,满足各种的出行场景。这里仅说明一下驾车方面的。4、驾车路线规划(1)、在页面的 js 文件中,实例化 AMapWX 对象,请求进行驾车路线规划。 首先,引入 amap-wx.js 文件(amap-开通儿童套件小程序电话:4006-838-530wx.js 从相关下载页面下载的 zip 文件解压后得到)。var amapFile = require(‘path/to/amap-wx.js’);     //如:..­/..­/libs/amap-wx.js然后,构造 AMapWX 对象,并调用 getDrivingRoute 方法Page({  data: {    markers: [{      iconPath: “../../img/mapicon_navi_s.png”,      id: 0,      latitude: 39.989643,      longitude: 116.481028,      width: 23,      height: 33    },{      iconPath: “../../img/mapicon_navi_e.png”,      id: 0,      latitude: 39.90816,      longitude: 116.434446,      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({      origin: ‘116.481028,39.989643’,      destination: ‘116.434446,39.90816’,      success: function(data){        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) + ‘元’          });      开通真皮包小程序电话:4006-838-530  }                },      fail: function(info){      }    })  },  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’    })  }})重点:这官方给的文档里面有很多坑, 其中的 高德key 你要改成你申请下来的一个key;var key = config.Config.key;这句我目前没明白啥意思,注释掉了,不影响程序 最主要的是 origin: ‘116.481028,39.989643’, destination: ‘116.434446,39.90816’,这两个坐标点,官方给的是死数据,如何用活的数据呢?origin: this.data.markers[0].longitude+’,’+this.data.markers[0].latitude, destination: this.data.markers[1].longitude + ‘,’ + this.data.markers[1].latitude,找了很多文章才找到这个坑,希望看到这篇文章的朋友能跳过这个坑。(2)、编写页面的 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/viewview class=”map_box”  map id=”navi_map” longitude=”116.451028″ latitude=”39.949643″ scale=”12″ markers=”{{markers}}” polyline=”{{polyline}}”/map/viewview class=”text_box”  view class=”text”{{distance}}/view  view class=”text”{{cost}}/view  view class=”detail_button” bindtouchstart=”goDetail”详情/view/view(3)、编写页面的 wxss 文件,设置页面样式。.flex-style{  display: -webkit-box;  开通电暖桌小程序电话:4006-838-530display: -webkit-flex;  display: flex;}.flex-item{  height: 35px;   line-height: 35px;  text-align: center;  -webkit-box-flex: 1;  -webkit-flex: 1;  flex: 1}.flex-item.active{  color:#0091ff;}.map_box{  position:absolute;  top: 35px;  bottom: 90px;  left: 0px;  right: 0px;}#navi_map{  width: 100%;  height: 100%;}.text_box{  position:absolute;  height: 90px;  bottom: 0px;  left: 0px;  right: 0px;}.text_box .text{  margin: 15px;}.detail_button{  position:absolute;  bottom: 30px;  right: 10px;  padding: 3px 5px;  color: #fff;  background: #0091ff;  width:50px;  text-align:center;  border-radius:5px;}(4)、运行效果如下:(5)、步行、骑行、公交路线参考http://lbs.amap.com/api/wx/guide/route/route 5、本文的重点是在地图上确定两个点进行路线规划,两个点的坐标是自己定义的。 重点:origin: this.data.markers[0].longitude+’,’+this.data.markers[0].latitude, destination: this.data.markers[1].longitude + ‘,’ + this.data.markers[1].latitude,可以用wx.chooseLocation来确定这两个位置。 如有不对之处,欢迎各位批评指正。

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 小程序调用高德地娄底E企盈小程序图组件
分享到: 更多 (0)
E企盈小程序直播营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏