微信小程序---微信小程序中实现地图的demo及流程

1.下载地图包 ： qqmap-wx-jssdk.min.js

2.在小程序的管理页面配置小程序的请求域名：https://apis.map.qq.com

3.使用

wxml

<view class="page-box">
  <map
  id="citymap"
  name="citymap"
  longitude="{{longitude}}"
  latitude="{{latitude}}"
  polyline="{{polyline}}"
  markers="{{markers}}"
  scale="{{scale}}"
  style="width: 100%; height: 100%;"
  show-location
>		
  
  <cover-view class='map-search-view' bindtap="toMapSearch" >
    <cover-image class='map-img-search' src="./images/search_icon.png"></cover-image>
  </cover-view >
</map>
</view>

js

//引入地图包
var QQMapWX = require('../../../assets/mappackagejs/qqmap-wx-jssdk.min.js');
var qqmapsdk;

const app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    statusBarHeight: getApp().globalData.statusBarHeight,
    headText: '地图导航',
    headImage: '',
    mangFalse: true,
    infoLeft: [],
    latitude:"26.514071",
    longitude:"106.700363",
    polyline:null,
    markers:null,
    mapSearchList:[],
    inputValue:'',
    isShowList:true,
    scale:18,
    location:'26.514071,106.700363'
  },
   //获取搜索地理位置
  // getLocation(){
  //   var that = this;
  //   wx.getLocation({
  //     type: 'gcj02',
  //     success (res) {     
  //       const latitude = res.latitude
  //       const longitude = res.longitude
  //       const speed = res.speed
  //       const accuracy = res.accuracy
  //       that.setData({
  //         latitude:res.latitude,
  //         longitude:res.longitude,
  //       })
  //       // that.getCityinfo()
  //       console.log(that.data.latitude,that.data.longitude)
  //       console.log(latitude,longitude)
  //     }
  //    })
  //   },
  //一进入页面获取地图中心点
  getOriginPlace(e) {
    console.log(e,this.data.latitude,this.data.longitude)
    var _this = this;
    qqmapsdk.reverseGeocoder({
      //位置坐标，默认获取当前位置，非必须参数
      location:_this.data.location,
      //get_poi: 1, //是否返回周边POI列表：1.返回；0不返回(默认),非必须参数
      success: function(res) {//成功后的回调
        console.log(res);
        var res = res.result;
        var mks = [];
        //当get_poi为0时或者为不填默认值时，检索目标位置，按需使用
        mks.push({ // 获取返回结果，放到mks数组中
          title: res.address,
          id: 0,
          latitude: res.location.lat,
          longitude: res.location.lng,
          iconPath: './images/direct_icon.png',//图标路径
          width: 20,
          height: 25,
          // callout: { //在markers上展示地址名称，根据需求是否需要
          //   content: res.address,
          //   color: '#000',
          //   display: 'ALWAYS'
          // }
        });
        _this.setData({ //设置markers属性和地图位置poi，将结果在地图展示
          markers: mks,
          poi: {
            latitude: res.location.lat,
            longitude: res.location.lng
          }
        });
      },
      fail: function(error) {
        console.log(location,失败了)
       
      },
      complete: function(res) {
        console.log(res);
      }
    })
  },
//   //搜索附近地址
//   getNearbySearch:function(){
//     var _this = this;
//     // 调用接口
//     qqmapsdk.search({
//        keyword: this.data.inputValue,  //搜索关键词console.log(res)
//        location: '26.514071,106.700363',  //设置周边搜索中心点
//        auto_extend:1,
//       //  region:"贵阳市",
//        success: function (res) { //搜索成功后的回调
//         console.log(res)
//           var mks = []
//           mks.push({ // 获取返回结果，放到mks数组中
//             title: res.data[0].title,
//             id: res.data[0].id,
//             latitude: res.data[0].location.lat,
//             longitude: res.data[0].location.lng,
//             iconPath: "./images/direct_icon.png", //图标路径
//             width: 20,
//             height: 25
//           })
//           _this.setData({ //设置markers属性，将搜索结果显示在地图中
//             markers: mks
//           })
//           _this.setData({
//             isShowList:true,
//           })
//        },
//        fail: function (res) {
//        },
//        complete: function (res){
//        }
//    });
//  },
  upHeade: function () {

  },
  toMapSearch(){
    wx.navigateTo({
      url:  "/mapNavigation/pages/mapsearch/mapsearch"
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    qqmapsdk = new QQMapWX({
      key: '52VBZ-X7VRQ-T5H57-GQOSY-EVEWJ-OTFJA'
  });
    if (options.mange === '0') {
      this.setData({
        mangFalse: false
      })
    }
    this.getOriginPlace()
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    this.getOriginPlace()
    // this.getLocation()
    // qqmapsdk.geocoder({ //获取目标地址的地图信息，把详细地址输入address即可
    //   address: '贵阳市花溪区黄河路',
    //   success: function (res) {    //返回的console.log(res)数据里面有该地址的经纬度
    //     // console.log(res)
    //     console.log("接口调用成功返回的回调")
    //   },
    //   fail: function (res) {
    //     // console.log("接口调用失败返回的回调")
    //   },
    //   complete: function (res) {
    //     // console.log("接口调用结束的回调函数（调用成功、失败都会执行）")
    //   }
    // })
  },
})