微信小程序调用腾讯地图新手实例

前言：

一、首先创建自己的腾讯地图的key，不会就直接去申请。
附上腾讯地图api链接：[添加链接描述](https://lbs.qq.com/console/mykey.html)

一、创建如此目录防止一会报错：

注意这个目录差不多了；

二、源码：

MapPlanning.js:
------------------------------------------------------------------------

var amapFile = require('../resource/js/amap-wx.js');
Page({
  data: {
    key: '你自己的key',
    show: false,
    currentLo: null,
    currentLa: null,
    newCurrentLo: null,
    newCurrentLa: null,
    distance: 0,
    duration: 0,
    markers: null,
    scale: 16,
    polyline: null,
    statusType: 'car',
    includePoints: [],
    // 附属地图上的iocs
    controls: [{
      id: 1,
      iconPath: '../resource/images/输入框.png',
      position: {
        left: 10,
        top: 20,
        width: 350,
        height: 60
      },
      clickable: true
    }],
    //动画对象
    animationData: {},
    // 是否全屏
    isAllShow:false,
    // 动态地图高度
    mapHight:80,
  },
  onShow() {
    var _this = this;
    wx.getLocation({
      success(res) {
        //获取本地经度纬度
          _this.setData({
          currentLo: res.longitude,
          currentLa: res.latitude,
          includePoints: [{
            longitude: res.longitude,
            latitude: res.latitude
          }],

          markers: [{
            id: 0,
            longitude: res.longitude,
            latitude: res.latitude,
            title: res.address,
            iconPath: '../resource/images/地标_起点.png',
            width: 25,
            height: 25
          }]
        });
      }
    })
  },
  /**
   * 点击了搜索框
   */
  controltap(e) {
    var _this = this;
    
    if (!_this.data.isAllShow){
      _this.getAddress();
    }else{
      _this.setData({
        mapHight: 80,
        isAllShow:false,
        'controls[0]': {
          id: 1,
          iconPath: '../resource/images/输入框.png',
          position: {
            left: 10,
            top: 20,
            width: 350,
            height: 60
          },
          clickable: true,
        }
      })
    }
    console.log(_this.data.isAllShow)
  },
  /**
   * 获取终点
   */
  getAddress(e) {
    var _this = this;
    // 调用选择位置
    wx.chooseLocation({
      success(res) {
        var markers = _this.data.markers;
        console.log(markers.length)
        //如果==2，刚好起点带终点
        if (markers.length>=2){
          markers[1] = {
            id: 0,
            longitude: res.longitude,
            latitude: res.latitude,
            title: res.address,
            iconPath: '../resource/images/地标_终点.png',
            width: 25,
            height: 25
          }
        }else{
          markers.push({
            id: 0,
            longitude: res.longitude,
            latitude: res.latitude,
            title: res.address,
            iconPath: '../resource/images/地标_终点.png',
            width: 25,
            height: 25
          });
        }
        
        

        // 画路线
        var points = _this.data.includePoints;
        points.push({
          longitude: res.longitude,
          latitude: res.latitude
        });
        //数据赋值
        _this.setData({
          newCurrentLo: res.longitude,
          newCurrentLa: res.latitude,
          includePoints: points,
          markers: markers,
          show: true
        });
        _this.getPolyline(_this.data.statusType);
      }
    });
  },
  /**
   * 画折线
   */
  drawPolyline(self, color) {
    return {
      origin: this.data.currentLo + ',' + this.data.currentLa,
      destination: this.data.newCurrentLo + ',' + this.data.newCurrentLa,
      success(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])
              })
            }
          }
        }
        self.setData({
          distance: data.paths[0].distance,
          duration: parseInt(data.paths[0].duration / 60),
          polyline: [{
            points: points,
            color: color,
            width: 6,
            arrowLine: true
          }]
        });
      }
    }
  },
  /**
   * 选择出行当时的折线
   */
  getPolyline(_type) {
    var amap = new amapFile.AMapWX({ key: this.data.key });
    var self = this;
    switch (_type) {
      case 'car':
        amap.getDrivingRoute(this.drawPolyline(this, "#0091ff"));
        break;
      case 'walk':
        amap.getWalkingRoute(this.drawPolyline(this, "#1afa29"));
        break;
      case 'ride':
        amap.getRidingRoute(this.drawPolyline(this, "#2da08a"));
        break;
      default:
        return false;
    }
  },
  goTo(e) {
    var _type = e.currentTarget.dataset.type;
    this.setData({ statusType: _type });
    this.getPolyline(_type);
  },
  // 点击箭头图标
  tapShow(){
    console.log('图标')
    var _this = this;
     var tempShow = !_this.data.isAllShow;
     console.log(tempShow)//true
    _this.setData({
      isAllShow: tempShow
    })

    //隐藏map中的
    if (_this.data.isAllShow){
      _this.setData({
        'controls[0]': {
          id: 1,
          iconPath: '../resource/images/左箭头-2.png',
          position: {
            left: 10,
            top: 10,
            width: 30,
            height: 30
          },
          clickable: true
        },
        mapHight: 100
      })
    }
  }
})

MapPlanning.wxml:
------------------------------------------------------------------------

<!-- 地图 -->
<view class="tui-map">
  <map id="map"
   longitude="{{currentLo}}" 
   latitude="{{currentLa}}" 
   scale="{{scale}}" 
   controls="{{controls}}"
   bindcontroltap="controltap"
   markers="{{markers}}" 
   polyline="{{polyline}}"  
   include-points="{{includePoints}}" 
   show-location 
   style="width: 100%; height: {{mapHight}}%;"></map>
</view>

<!-- 出行方式 -->
<view class="tui-search-bottom {{show ? '' : 'tui-hide'}}" wx:if="{{!isAllShow}}">
  <span class="xiala">
    <image src='../resource/images/下箭头-2.png' class='jiantou' bindtap='tapShow'></image>
  </span>
  
  <view class="page-group">
    <view class="page-nav-list {{statusType == 'car' ? 'active' : ''}}" data-type="car" bindtap="goTo">驾车</view>
    <view class="page-nav-list {{statusType == 'walk' ? 'active' : ''}}" data-type="walk" bindtap="goTo">步行</view>
    <view class="page-nav-list {{statusType == 'ride' ? 'active' : ''}}" data-type="ride" bindtap="goTo">骑行</view>
  </view>

  <!-- 计算时间和距离 -->
  <view>
  <view class="tui-warn">
      {{distance}}米
    </view>
    <view class="tui-warn">
      {{duration}}分钟
    </view>
  </view>

</view>

MapPlanning.wxss:
------------------------------------------------------------------------

/* 地图格子样式 */
.tui-map{
  width: 100%;
  height: calc(100%);
  position: fixed;
  bottom: 0;
  left: 0;
}

/* 出行方式组合 */
.page-group{
  padding: 0px;
  margin: 0px;

  display: table;
  width: 100%;
  table-layout: fixed;
  background-color:#fff;

  float: left;
}
/* 出行方式组合之横向样式 */
.page-nav-list{
  padding:20rpx 0 ;
  font-size: 30rpx;
  display: table-cell;
  text-align: center;
  width: 100%;
  color: #222;

  border-radius: 15rpx;

}

/* 出行方式组合/横向样式/选择伪类 */
.page-nav-list.active{
  color:blue;
  background-color: lightseagreen;
}
.tui-warn{
  height: 40px;
  width: 40%;
  line-height: 50px;
  padding-left: 10px;
  color: lightseagreen;
  font-size: 30rpx;
  float: left;

  background-color: white;
}
.tui-search-bottom{
  padding: 0px;
  margin: 0px;

  height: 90px;
  /* background: red; */
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1000;

  float: left;
}
/* 箭头样式 */
.jiantou{
  padding: 0px;
  margin: 0px;
  width: 50rpx;
  height: 50rpx;
  float: left;

  z-index: 10000;
}

/* 下拉样式 */
.xiala{
  padding: 0px;
  margin: 0px;
  float: left;
  height: 50rpx;
  /* 相对定位 */
  position: fixed;
  bottom: 85px;
  left: 47%;

  z-index: 10000;
}
.shouqi{
  padding: 0px;
  margin: 0px;
  float: left;

  /* 相对定位 */
  position: fixed;
  bottom: 5px;
  left: 47%;

  z-index: 10000;
}

三、效果图：

四、如果你json没配好：

app.json:

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/mine/mine",
    "pages/MapPlanning/MapPlanning"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "color": "#a9b7b7",
    "selectedColor": "#11cd6e",
    "borderStyle": "black",
    "list": [
      {
        "selectedIconPath": "pages/resource/images/首页_填充.png",
        "iconPath": "pages/resource/images/首页.png",
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "selectedIconPath": "pages/resource/images/地图_填充.png",
        "iconPath": "pages/resource/images/地图.png",
        "pagePath": "pages/MapPlanning/MapPlanning",
        "text": "地图导航"
      },
      {
        "selectedIconPath": "pages/resource/images/用户_填充.png",
        "iconPath": "pages/resource/images/用户.png",
        "pagePath": "pages/mine/mine",
        "text": "个人中心"
      }
    ]
  },
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
  }
}