您好,小程序模板欢迎您。
小程序模板
当前位置 : 首页> 小程序教程> 微信小程序页面怎么使用腾讯地图

微信小程序页面怎么使用腾讯地图

以下是微信小程序使用腾讯地图的代码示例:


1. 在小程序的app.json文件中添加腾讯地图SDK的引用

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "plugins": {
    "myPlugin": {
      "version": "1.0.0",
      "provider": "wxidxxxxxxxxxxxxxxxx",
      "requiredLibraries": [
        "libA",
        "libB"
      ]
    },
    "tencentMap": {
      "version": "1.0.0",
      "provider": "wxidxxxxxxxxxxxxxxxx"
    }
  }
}


2. 在小程序页面的js文件中引入腾讯地图SDK

const QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js');
const qqmapsdk = new QQMapWX({
  key: 'your_key'
});


3. 在小程序页面的wxml文件中添加地图组件


4. 在小程序页面的js文件中使用腾讯地图SDK提供的接口

Page({
  data: {
    markers: []
  },
  onLoad: function() {
    qqmapsdk.search({
      keyword: '酒店',
      success: (res) => {
        const markers = res.data.map((item) => ({
          id: item.id,
          latitude: item.location.lat,
          longitude: item.location.lng,
          title: item.title,
          iconPath: '/images/marker.png'
        }));
        this.setData({
          markers
        });
      }
    });
  }
});

联系客服 意见反馈

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了