小程序 查看地图

小程序内置地图查看位置并跳转地图app

1.我的示例

代码如下（示例）：

//https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/methodGeocoder 微信小程序javascriptSDK
//https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.openLocation.html  小程序用到的api 
//index.wxml
 <view class="go" bindtap="addressClick"  data-geocoder="北京市海淀区"></view>
 
 //index.js
  var QQMapWX = require("../utils/qqmap-wx-jssdk.min.js");
  var qqmapsdk = new QQMapWX({
    key: '自己生成的key' // 必填
  });
 addressClick(e) {
    var _this = this;
    //调用地址解析接口  此方法详情请看定位篇章
    qqmapsdk.geocoder({
      //获取表单传入地址
      address: e.currentTarget.dataset.geocoder, //地址参数，例：固定地址，address: '北京市海淀区彩和坊路海淀西大街74号'
      success: function (res) { //成功后的回调
        var res = res.result;
        var latitude = res.location.lat;
        var longitude = res.location.lng;
        //唤起微信内置地图导航
        wx.openLocation({
          latitude: latitude,
          longitude: longitude,
          scale: 18, //缩放5-18
          address:'地址的详细说明',
          name:'位置名'
        });
      },
      fail: function (error) {
        console.error(error);
      },
      complete: function (res) {
        console.log(res);
      }
    })
 }

2.官网示例

代码如下（示例）：

//index.wxml
 <view class="go" bindtap="addressClick"  data-geocoder="北京市海淀区"></view>
//index.js
addressClick(){
	//获取当前的地理位置、速度
	wx.getLocation({
	 type: 'gcj02', //返回可以用于wx.openLocation的经纬度
	 success (res) {
	   const latitude = res.latitude
	   const longitude = res.longitude
		   wx.openLocation({
		     latitude,
		     longitude,
		     scale: 18
		   })
		 }
	})
}

---

总结

记录七秒记忆📝