小程序地图选点

最新推荐文章于 2024-11-13 21:59:37 发布

原创最新推荐文章于 2024-11-13 21:59:37 发布 · 1.7k 阅读

4 ·

CC 4.0 BY-SA版权

小程序造轮子专栏收录该内容

8 篇文章

订阅专栏

1，先到腾讯地图申请一个key，然后下载jssdk，到微信公众平台添加“地图选点”插件。直接上代码

<view class="page-body">
  <view class="page-section page-section-gap">
    <map id="qqMap" style="width: 100%; height: 300px;" latitude="{{latitude}}" longitude="{{longitude}}" show-location></map>
  </view>
</view>

var QQMapWX = require('../../../utils/TX_Map/qqmap-wx-jssdk.js');//引入腾旭地图jssdk
var qqmapsdk;
const app = getApp();

Page({
  data: {
    latitude: 0,//地图初次加载时的纬度坐标
    longitude: 0, //地图初次加载时的经度坐标
    name: "" //选择的位置名称
  },

  onLoad: function () {
    // 实例化API核心类
    qqmapsdk = new QQMapWX({
      key: app.globalData.key//腾讯地图的key
    });
    this.moveToLocation();
  },

  //移动选点
  moveToLocation: function () {
    var that = this;
    wx.chooseLocation({
      success: function (res) {
        app.globalData.lat = res.latitude,
        app.globalData.lng = res.longitude,
        wx.navigateTo({
          url: '../searchStore/searchStore',
        })
        //选择地点之后返回的结果
      },
      fail: function (err) {
        console.log(err)
      }
    });
  },
});

app.json里面上家这俩

  "permission": {
    "scope.userLocation": {
      "desc": "我们将获取你的位置"
    }
  },
  "plugins": {
    "chooseLocation": {
      "version": "1.0.0",
      "provider": "wx76a9a06e5b4e693e"
    }
  },

效果图