微信小程序> 小程序显示指定地址的地图

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

浏览量:664 时间: 来源:我是高手高手高高手

效果:

小程序


用到腾讯地图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("成功拨打电话")      },    })  },  /**   * 生命周期函数--监听页面加载   */  onLoad: 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;    }  }})



引用:"https://www.cnblogs.com/lliuhh/p/7832806.html

https://www.cnblogs.com/founderswitch/p/7818220.html

微信小程序

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎