微信小程序:高德地图在小程序中的实践(含静态地图)

前言

前人栽树,后人乘凉。记录下工作的点点滴滴,让同道中人少走弯路~

来看看需求和问题:房产相关的项目,详情中需要显示房源地址,底部要有固定的菜单(不是tabbar),房源数据过多,数据超过一屏时,map组件从底部进入,会穿透固定在底部的菜单,导致页面闪烁。

开始

参考一些行业大佬的产品,发现他们使用的只是一张图片,没有使用原生的map组件去实现,我想可能也是开发中遇到了坑。。

鉴于我司全部项目数据使用的是高德地图,在小程序中为了坐标一致,也使用高德推出的 微信小程序SDK。下面介绍一下如何使用。

实践

官方链接:https://lbs.amap.com/api/wx/summary/
参照官方的教程,在获取相应的key值,并下载所需的文件到本地,在项目中使用

获取key

在页面的js中引入高德的js文件:

// 引入高德地图
var amapFile = require('../../../libs/map/amap-wx.js')

 初始化地图调用方法获取静态地图:

// 绘制静态图片 【lon:经度, lat: 纬度】
getStaticMapImg(lon, lat) {
  let that = this
  var myAmapFun = new amapFile.AMapWX({
    key: '你申请的key值'
  }) myAmapFun.getStaticmap({
    // 中心点
    location: lon + ',' + lat,
    // 缩放
    zoom: 14,
    // 图片的宽高
    size: that.data.staticImgWidth + '*' + that.data.staticImgHeight,
    // 图片的清晰度
    scale: 2,
    // 标记点
    // markers: 'large,0xFF0000,这:116.37359,39.92437',
    // markers: '-1,http://admin.broker.fangbee.cn/img/house-icon.png,0:'+lon+','+lat,
    // -1,标注图片的URL地址,0: 经度,纬度
    markers: '-1,http://xxx.yyy.zzz.cn/img/map.png,0:' + lon + ',' + lat,
    // 标签  内容,字体,粗细,字号,字体颜色,背景颜色
    // labels: '"",0,0,32,0xffffff,0x087b46:116.37359,39.92437',
    // labels: '朝阳公园,2,0,16,0xFFFFFF,0x008000:116.48482,39.94858',
    success: function(res) {
      that.setData({
        // res.url: 返回的静态图片的URL地址
        mapStaticImg: res.url
      })
    },
    fail: function(err) {
      console.log(err)
    }
  })
}

在官方的小程序示例中,是没有自定义标注图片的,但是在普通的js API中是有的,所以参照着试一试,结果就OK了,皆大欢喜~

还有一些被注释掉的,都是一些其他的标记,有兴趣可以打开看一看。

附上一张效果图(上是静态地图,下是map组件):

效果图

总结

  1. 在没有使用静态图片之前,也是用的高德地图实例化map组件。具体的实现可以参考官方的文档示例,项目中还有地图周边的应用,如果有小伙伴需要,可以留言,后期整理出来放在github上;
  2. 在我还没有开始我的项目之旅时,我记得有群友在群里问过这样的实现。那时候没有接触到生成静态地图,一直误以为是map组件,现在回想起,甚是惭愧~真是抱歉;
  3. 学会总结,学会分享。大家一起成长,一起进步。虽然写博客一方面是希望大家遇到类似问题时,能少走弯路,但是有些坑自己爬过才会比较深刻;
  4. 嘘寒问暖 不如打笔巨款~

发布了60 篇原创文章 · 获赞 101 · 访问量 36万+
展开阅读全文

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

09-21

#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是两个写死的经纬度,[高德路线规划](http://lbs.amap.com/api/wx/guide/route/route),现在这个样子是我自己改的,摸索了微信小程序3天了,还不太懂,希望有大神能不吝赐教!! 问答

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览