效果:
用到腾讯地图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













