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

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

直接看代码吧

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;" bindregiοnchange="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;}

小程序成品预览

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