小程序--map组件的使用

小程序map组件的使用

wxml代码
<!-- map地图 -->
<!-- 
longitude 经度
latitude 纬度
scale 一开始的缩放层级 最小3，最大20
markers 地图标记
bindmarkertap 点击markers时的事件
polyline="{{polyline}}" 绘制多边形
style
-->
<view class="map_container">
  <map class="map" id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="16" markers="{{markers}}" wx:if="{{showMap}}" bindmarkertap="markertap"></map> 
</view>

wxss代码
.map_container{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width:750rpx;
  height: 100vh;
}
map{
  width:100%;
  height: 100%;
}

js代码
// pages/index/index.js
// var amapFile = require('../../utils/amap-wx.js');
Page({

  /**
   * 地图页面的初始数据
   */
  data: {
    markers: [],
    polyline:[],
    latitude: '',
    longitude: '',
    showMap:false,//获取成功后再显示地图
  },
  // 地图浮标点击事件
  markertap(e) { // 这是一个事件，在wxml中绑定这个事件，点击浮标后
    wx.openLocation({ //此设置属于高级APi,可以打开微信内置地图组件
      latitude: this.data.latitude,
      longitude: this.data.longitude,
    });
    console.log(this.data.latitude+'  '+this.data.longitude)
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function() {
    var that = this;
    // 调用小程序自带接口获取当前所在位置
    wx.getLocation({
      type: 'wgs84',
      success: (res) => {
        console.log(res);
        that.setData({
          latitude: res.latitude,
          longitude: res.longitude
        })
        var marker = [{// 绘制浮标，传入JSON支持多个
          id: 1,
          latitude: res.latitude,
          longitude: res.longitude,
          iconPath: "/images/location3.png",
          width: 50,
          height: 50,
          callout: {
          content: "距离你最近的茶室34.7Km",
            color: "#333333",
            fontSize: 13,
            borderRadius: 20,
            bgColor: "#ffffff",
            textAlign: "center" ,
            padding: 7,
            display: 'ALWAYS'
          }
        }]
        var polyline= [{ // 绘制多边形区域，两个点绘制直线
          points: [ // 这里传入两个点是直线，如果传入三个点以上就会是首尾相连的多边形区域
            {
              longitude:res.longitude,
              latitude: res.latitude,
            }, {
              longitude:  res.longitude,
              latitude: res.latitude,
            }],
            color: "#FF0000DD", // 设置颜色
            width: 2, // 设置线宽度 注：电脑模拟器无法预览测设设置，此设置需要手机测试
            dottedLine: true // 是否设置为虚线
        }]
        that.setData({
          markers: marker,
          polyline:polyline,
        });
        that.setData({
          showMap: true
        });
      },
    }); 
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})