微信小程序中地图定位以及查看路线

微信小程序中关于地图组件的使用（下面是我项目中的一个demo）使用了第三方百度地图，和微信的map组件

1. app.json中引入如下：
2. “permission”: {
   “scope.userLocation”: {
   “desc”: “你的位置信息将用于获取周边服务”
   }
   他
   
   使用地图前询问是否使用定位服务

2.搞定腾讯地图开发API ,取得 key值

1. 申请开发者密钥（key）：申请密钥 https://lbs.qq.com/dev/console/key/add
2. 下载微信小程序JavaScriptSDK，微信小程序JavaScriptSDK v1.0 微信小程序JavaScriptSDK v1.0
3. 登录小程序后台，安全域名设置，在“设置” -> “开发设置”中设置request合法域名，添加https://apis.map.qq.com（微信会有一段时间的缓存，大概10多分钟后，request合法域名生效）
   
   为了保证能够使用可以，可以看看我在项目中的，一开始有www.的时候会报错，所以我吧把www。去掉了
   3.看这里！！你还需要下载一个js sdk 引用腾讯地图JS文件

以上都🆗
那就直接上代码
xml:

武汉海昌海洋极地海洋公园
武汉海昌海洋极地海洋公园武汉海昌海洋极地海洋公园武汉海昌海洋极地海洋公园

查看路线


css:.
bottom-add>view:first-child{
color: #222;
font-weight: bold;
font-size: 36rpx;
}
.bottom-add{padding: 20rpx 30rpx;}
.bottom-add>view:last-child{
color: #666;
font-size: 26rpx;
margin-top: 10rpx;
}
.address{
width: 90%;
height: 80rpx;
margin: auto;
background: #5cc98d;
color: #fff;
text-align: center;
line-height: 80rpx;
border-radius: 50rpx;
/* margin-top: 60rpx; */
}
.add-box{width: 100%;height: 235rpx;position:fixed;bottom:50rpx;}

3.!!!追重要的 js

代码如下：
const app = getApp()
var QQMapWX = require(’…/…/qqmap/qqmap-wx-jssdk.js’);
var demo = new QQMapWX({
key: ‘CZQBZ-DDAL4-NEJUW-D5NHD-XSCX2-YABT4’ // 必填 换成自己申请到的
});
Page({

/**

• 页面的初始数据
  */
  data: {
  latitude: ‘’,
  longitude: ‘’,
  showModal: false,
  gd: true,
  xn: false,
  hd: false,
  xb: false
  },

//触发表单提交事件，调用接口
formSubmit(e) {
var _this = this;
//调用地址解析接口
demo.geocoder({
//获取表单传入地址
address: “北京天安门”, //地址参数，例：固定地址，address: ‘北京市海淀区彩和坊路海淀西大街74号’
success: function (res) {//成功后的回调
console.log(res);
var res = res.result;
var latitude = res.location.lat;
var longitude = res.location.lng;
//根据地址解析在地图上标记解析地址位置
_this.setData({ // 获取返回结果，放到markers及poi中，并在地图展示
markers: [{
id: 0,
title: res.title,
latitude: latitude,
longitude: longitude,
iconPath: ‘…/…/images/location.png’,//图标路径
width: 20,
height: 20,
callout: { //可根据需求是否展示经纬度
// content:“这是地址”,
// width:‘100rpx’,
// height:‘50rpx’,
// color: ‘#000’,
// borderRadius:‘10rpx’,
// display: ‘block’
}
}],
poi: { //根据自己data数据设置相应的地图中心坐标变量名称
latitude: latitude,
longitude: longitude
}
});
},
fail: function (error) {
console.error(error);
},
complete: function (res) {
console.log(res);
}
})
},
seeMap(e) {
var e_add = “武汉极地公园” //这里自定义了一个地址，有需要可以按照传参形式动态显示地图信息
// 地址解析
demo.geocoder({
type: ‘gcj02’,
address: e_add,
success: function (res) {
console.log(res)
var latitude = res.result.location.lat
var longitude = res.result.location.lng

    wx.openLocation({
      latitude: latitude,
      longitude: longitude,
      scale: 14
    })
  },
  fail: function (res) { console.log(res) }
})

},
openMap: function () {
wx.getLocation({
type: ‘gcj02’, //默认为 wgs84 返回 gps 坐标，gcj02 返回可用于wx.openLocation的坐标
success: function (res) {
console.log(res)
var latitude = res.latitude
var longitude = res.longitude
// var latitude = 113.341392;
// var longitude = 23.138709;
wx.openLocation({
latitude: latitude,
longitude: longitude,
scale: 16 //地图缩放的倍数 （可调！）
})
}
})
},
/**

• 生命周期函数–监听页面加载
  */
  onLoad: function (options) {
  this.formSubmit()
  },
  })

效果图：


在手机上预览时会有差别，这没办法，这是微信自动显示了对应的信息