微信小程序地图组件使用详情

目前开发微信小程序的越来越多，周边也有很多小程序案例，

介绍下微信小程序内使用地图组件（这里只介绍小程序前端功能）

直接看代码吧

wxml

<view class="section map_container">
  <map id="loactionMap" longitude="{{longitude}}" latitude="{{latitude}}" scale="17" show-location="true" style="width: {{mapWidth}}px; height: {{mapHeight}}px;" bindregionchange="regionChange">
    <cover-view class="controls-center" style="bottom:{{mapHeight/2}}px;left:{{mapWidth/2 - 14}}px;">
      <cover-image class="location-center-img" src="/images/marker_red.png" />
    </cover-view>

    <cover-view class="controls-address-panel" style="bottom:0px;left:0px;">
      <cover-view class="map_text">
        <cover-view>
          <cover-view class="address-name">{{textData.name}}</cover-view>
          <cover-image wx:if="{{searchLoadingStatus==1}}" 
          class="cover-image-loading" src="/images/goLoad.gif" />
        </cover-view>
        <cover-view class="address-desc">{{textData.desc}}</cover-view>
      </cover-view>
    </cover-view>
  </map>
</view>

 

Page({
  data: {
    mapCtx: null,
    mapWidth: 200,
    mapHeight: 200,
    longitude: 114.0322103,
    latitude: 22.5353646,
    markers: [],
    textData: { name: '', desc: '' },
    //0:加载完成  1:加载中
    searchLoadingStatus: 0,
    //当前选中纬度信息
    currentLocationInfo: {
      longitude: 0,
      latitude: 0
    }
  },
  regionChange: function (e) {
    var that = this;
    var changeType = e.type;
  },
  amapGetRegeo: function (longitude, latitude) {
    var that = this;
    myAmapFun.getRegeo({
      location: longitude + ',' + latitude,
      success: function (data) {
        if (data != null && data.length > 0) {
          that.setData({
            textData: {
              name: data[0].desc,
              desc: data[0].regeocodeData.formatted_address
            },
            currentLocationInfo: {
              longitude: longitude,
              latitude: latitude
            }
          });
          //console.log(that);
        }
        that.setData({
          searchLoadingStatus: 0
        });
      }
    })
  },
  onReady: function (e) {
    var that = this;
    // 使用 wx.createMapContext 获取 map 上下文
    that.mapCtx = wx.createMapContext('loactionMap', this);
  },
  onLoad(options) {
    var that = this;

    that.authorAddress();
    that.setMapSize();
    that.getShareLocation(options);
  },
  //用户地理位置授权
  authorAddress:function(){
    var that = this;
    that.getCurrentLocation('gcj02', function (res) {
      console.log(res);
      that.setData({
        longitude: res.longitude,
        latitude: res.latitude
      });
    });
  },
  //初始化当前位置
  getCurrentLocation: function (typeCode, succFun) {
    var that = this;
    wx.getLocation({
      type: typeCode,
      success: function (res) {
        return succFun(res);
      },
      fail:function(res){
        wx.openSetting({
          success: function (data) {
            console.log(4444)
            console.log(data);
            that.authorAddress();
          },
          fail: function () {
            console.info("设置失败返回数据");
          }
        });
      }
    })
  }
});

wxss

.map_text{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0px;
  height: 70px;
  background: #fff;
  padding: 0 10px;
}
.address-name{
  margin: 10px 0;
  font-size:35rpx;
  font-weight: bold;
  float: left;
}
.address-desc{
  margin: 5px 0;
  display: block;
  font-size:26rpx;
}
.controls {
  position: absolute;
  width: 100rpx;
  bottom: 150rpx;
  right:10rpx;
}

.controls-center{
  position: absolute;
  width: 30px;
}
.controls-center-add{
  position: absolute;
  width: 33px;
}

.controls-address-panel{
  position: absolute;
  width: 100%;
  height:80px;
}

.cover-image-loading{
  width:15px;
  height:15px;
  float:left;
  padding-top:12px;
  padding-left:5px; 
}

.favorite-img {
  width: 100rpx;
  height: 100rpx;
}

小程序成品预览

不清楚的地方可以加我微信