小程序 显示指定地址的地图

效果：

用到腾讯地图API

第一步：搞定腾讯地图开发API ,取得 key值

​​http://lbs.qq.com/qqmap_wx_jssdk/index.html​​

1. 申请开发者密钥（key）：​​申请密钥​​

2. 下载微信小程序JavaScriptSDK，​​微信小程序JavaScriptSDK v1.0​​

3. 登录小程序后台，安全域名设置，在“设置” -> “开发设置”中设置request合法域名，添加https://apis.map.qq.com（微信会有一段时间的缓存，大概10多分钟后，request合法域名生效）

小程序：

wxml代码

< button bindtap= "map" class= 'btn'>地图1 </ button >

< button bindtap= "seeMap" class= 'btn'>地图2 </ button >

< button class= 'btn' bindtap= "openMap">点击进入打开微信地图页面 </ button >

引用腾讯地图JS文件，路径如下：

var QQMapWX = require('../qqmap/qqmap-wx-jssdk.js');

同时显示地址：

官方说明：http://lbs.qq.com/qqmap_wx_jssdk/method-geocoder.html

完整js代码:

// pages/contact-us/contact-us.js
// 引入SDK核心类
var QQMapWX = require('../qqmap/qqmap-wx-jssdk.js');
var demo = new QQMapWX({
  key: 'AOWBZ-0000-0000-0000-YHSLJ-YRFZE' // 必填 换成自己申请到的
});
Page({

  /**
   * 页面的初始数据
   */
  data: {
    showModal: false,
    gd: true,
    xn: false,
    hd: false,
    xb: false
  },
  phoneCall: function (e) {

    wx.makePhoneCall({

      phoneNumber: e.currentTarget.dataset.replyPhone,

      success: function () {

        console.log("成功拨打电话")

      },

    })

  },
  /**
   * 生命周期函数--监听页面加载
   */
  onl oad: function (options) {

  },
  seeMap: function () {
      // 调用接口
      // demo.reverseGeocoder({
      //   location: {
      //     latitude: 39.984060,
      //     longitude: 116.307520
      //   },
      //   success: function (res) {
      //     console.log(res);
      //   },
      //   fail: function (res) {
      //     console.log(res);
      //   },
      //   complete: function (res) {
      //     console.log(res);
      //   }
      // });
      //地址解析(地址转坐标)     

      demo.geocoder({
        address: '广东省广州市天河区天河路490号壬丰大厦西厅1704',
        success: function (res) {
          //console.log(res.result.location.lng);
          var latitude = res.result.location.lat
          var longitude = res.result.location.lng
          wx.openLocation({
            latitude: latitude,
            longitude: longitude,
            scale: 28
          })

        },
        fail: function (res) {
         // console.log(res);
        },
        complete: function (res) {
         // console.log(res);
        }
      });  
  },


  openMap: function () {
    
        wx.getLocation({
          type: 'gcj02', //默认为 wgs84 返回 gps 坐标，gcj02 返回可用于wx.openLocation的坐标
          success: function (res) {
            // var latitude = res.latitude
            // var longitude = res.longitude
            var latitude = 113.341392;
            var longitude = 23.138709;
            wx.openLocation({
              latitude: latitude,
              longitude: longitude,
              scale: 28
            })
          }
        })
  },
  /**
   * 弹出层函数 开始
   */
  // submit: function () {
  //   this.setData({
  //     showModal: true
  //   })
  // },
  submit(e) {
    let aid = e.currentTarget.dataset.id;
    switch (aid) {
      case '1':
        this.setData({
          a_tel:"020-38038789",
          a_add:"广东省广州市天河区天河路490号壬丰大厦西厅1704",
          showModal: true
          
          //gd: this.data.gd ? false : true
        })
        break;
      case '2':
        this.setData({
          a_tel: "0755-33320126",
          a_add: "广东省深圳市福田区深南大道6013号 中国有色大厦1013室",
          showModal: true
          //xn: this.data.xn ? false : true
        })
        break;
    }
  },
  preventTouchMove: function () {
  },
  go: function () {
    this.setData({
      showModal: false
    })
  },
  map: function () {

    wx.navigateTo({    //保留当前页面，跳转到应用内的某个页面（最多打开5个页面，之后按钮就没有响应的）

      url: "/pages/map/map"

    })
  },
  /**
   * 弹出层函数 结束
   */
  onToggle(e) {
    let idId = e.currentTarget.dataset.id;
    switch (idId) {
      case 'gd':
        this.setData({
          gd: this.data.gd ? false : true
        })
        break;
      case 'xn':
        this.setData({
          xn: this.data.xn ? false : true
        })
        break;
      case 'hd':
        this.setData({
          hd: this.data.hd ? false : true
        })
        break;
      case 'xb':
        this.setData({
          xb: this.data.xb ? false : true
        })
        break;
    }
  }
})