微信小程序--map

官方api：https://mp.weixin.qq.com/debug/wxadoc/dev/component/map.html

很多时候，都会用到地图，不仅方便，更直观，用户体验更好，
这里我们就来介绍一下地图的简单使用；
效果图如下，

1.这里使用了https://github.com/Jacky-MYD/WeChat的自定义的toast，大家可以下载研究下，
1.app.js中：

//app.js
import { ToastPannel } from './component/toastTest/toastTest'
App({
  ToastPannel,
  onLaunch: function () {

  },
  globalData: {
    userInfo: null
  }
})

2.app.json中：

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/toast/toast"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "demo",
    "navigationBarTextStyle": "black"
  }
}

3.app.wxss中：

 /* 引用toast的样式 */
@import "./component/toastTest/toastTest.wxss"; 

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
} 

4.index.js中：

//index.js
//获取应用实例
const app = getApp()
var isFirst = true;
var isFirstCircles = true;

Page({
  data: {
    scale: 13,
    //设置是否显示带
    location: true,
    //设置圆
    circles: [],
    markers: [{
      iconPath: "../images/location.png",
      id: 0,
      latitude: 38.859464,
      longitude: 121.527323,
      width: 25,
      height: 25,

    }],
  },
  regionchange(e) {
    console.log(e.type)
  },
  markertap(e) {
    console.log(e.markerId)
  },
  controltap(e) {
    console.log(e.controlId)
  },

  onLoad:function(){
    let app = getApp()
    // toast组件实例

    new app.ToastPannel();
  },


  //显示线路
  showLine: function (e) {
    var that = this;
    if (isFirst == true) {
      isFirst = false;
      that.setData({
        polyline: [{
          points: [{
            longitude: 121.527323,
            latitude: 38.859464
          }, {
            longitude: 121.550674,
            latitude: 38.877136,
          }],
          color: "#FF0000DD",
          width: 2,
          dottedLine: true
        }],
      })
    } else {
      isFirst = true;
      that.setData({
        polyline: [{
          points: [{

          }, {

          }],
          color: "#FF0000DD",
          width: 2,
          dottedLine: true
        }],
      })
    }
  },
  //显示圆
  showCircles: function (res) {
    var that = this;
    if (isFirstCircles == true) {
      isFirstCircles = false;
      //请求接口
      wx.getLocation({
        type: 'wgs84', // 默认为 wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标
        success: function (res) {
          that.setData({
            latitude: res.latitude,
            longitude: res.longitude,
            markers: [{
              id: "1",
              latitude: res.latitude,
              longitude: res.longitude,
              width: 50,
              height: 50,

              //marker 上的气泡 callout
              callout: {
                content: '自定义标记点上方的气泡窗口',
                color: '#000000',
                fontSize: 8,
                borderRadius: 2,
                bgColor: '#ff00ff',
                padding: 4,
                textAlign: 'center',
              },
              //marker 上的气泡 label
              label: {
                content: '显示在标记点旁边的标签',
                color: '#000000',
                fontSize: 8,
                borderRadius: 2,
                bgColor: '#00ff00',
                padding: 4,
                textAlign: 'center',
              },

            }],
            //  圆
            circles: [{
              latitude: res.latitude,
              longitude: res.longitude,
              color: '#FF0000DD',
              fillColor: '#7cb5ec88',
              radius: 3000,
              strokeWidth: 1
            }]
          })
        }
      })
    } else {
      isFirstCircles = true;
      that.setData({
        latitude: res.latitude,
        longitude: res.longitude,
        markers: [{

        }],
        circles: [{
          latitude: res.latitude,
          longitude: res.longitude,
          color: '#ffffff',
          fillColor: '#7cb5ec88',
          radius: 3000,
          strokeWidth: 1
        }]
      })
    }
  },
  //放大
  add: function (e) {
    var that = this;
    console.log("scale===" + this.data.scale)
    if (this.data.scale > 5) {
      that.setData({
        scale: --this.data.scale
      })
    } else {
      that.show("最大放大级别为5");
    }
  },
  //缩小
  reduce: function (e) {
    var that = this;
    console.log("scale===" + this.data.scale)
    if (this.data.scale < 18) {
      that.setData({
        scale: ++this.data.scale
      })
    } else {
      that.show("最大放大级别为18");
    }
  },

})

5.index.wxml中：

<!-- map.wxml -->
<!-- 自定义Toast -->
<import src="../../component/toastTest/toastTest.wxml"/>
<template is="toast" data="{{ ..._toast_ }}"/>

<map id="map" longitude="121.527323" latitude="38.859464" scale="{{scale}}" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" bindregionchange="regionchange" show-location="{{location}}"
  circles="{{circles}}" style="width: 100%; height: 300px;"></map>
<view>
  <view>
    <button class='button' bindtap="add">放大</button>
    <button class='button' bindtap="reduce">缩小</button>
  </view>
  <button bindtap="showLine">显示/隐藏路线</button>
  <button bindtap="showCircles">显示/隐藏圆</button>
</view>

6.index.wxss

.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.usermotto {
  margin-top: 200px;
}

.button{
  width: 50vw;
  float: left;
}

7.demo的下载地址：

http://download.csdn.net/download/afanbaby/10154232

本人菜鸟一个，有什么不对的地方希望大家指出评论，大神勿喷，希望大家一起学习进步。