WeChatミニプログラムでのマップの正しい使用例

"許可"： {
  "スコープ.userLocation": {
    "desc": "あなたの位置情報は、ミニプログラムの位置インターフェースの効果を表示するために使用されます"
  }
}

// グローバル変数 globalData: {
    ユーザー情報: null
  },
// グローバルインポートメソッド、サードパーティのパッケージを簡単にインポートできます require: ($url)=> require($url)

//SDK コアクラスを導入します const QQMapWX = require('./qqmap-wx-jssdk.min.js');
//API コアクラスをインスタンス化します。let key = '';
qqmapsdk を実行します。
キー &&(qqmapsdk = 新しい QQMapWX({
  キー // 必須}));
モジュール.エクスポート = {
  qqmapsdk、
  鍵
}

<表示>
	<van-btn bind:tap="gotoMap" type="info">地図へ移動</van-btn>
</ビュー>

//必要なツール関数を導入します const app = getApp();
const {qqmapsdk} = app.require('utils/util');
ページ（{
  /**
   * マップ開始位置 */
  // ボタンをクリックしてマップページに移動します gotoMap(){
     wx.showLoading({
       タイトル: 「マップページにリダイレクトしています」
     })
    // ジャンプする前に、ユーザーエクスペリエンスを向上させるためにいくつかのことを行う必要があります // 1. ユーザーが位置情報を有効にしているかどうかを確認し、有効になっていない場合はガイドします // 2. プログラムの位置情報の許可を確認し、有効になっていない場合はガイドします // 3. ジャンプを開始する前に、上記の 2 つのポイントを実行します wx.getLocation({
      成功(res){
        wx.navigateTo({
          URL: "/pages/map/index"
        })
      },
      失敗する{
        e && (e.errCode == 2 || e.errCode == 404) の場合 {
          wx.showModal({
            タイトル: 「ヒント」、
            内容：「位置情報の取得に失敗しました。携帯電話の「位置情報」がオンになっていないか確認してください。」
            表示キャンセル: false
          })
        } そうでない場合、(e && ((e.errMsg.indexOf('getLocation:fail auth deny') != -1) || (e.errMsg.indexOf('system permission denied') != -1))) {
          表示モーダル({
            タイトル: 「ヒント」、
            内容: 「位置情報を取得できませんでした。WeChatに位置情報の許可があるかどうかを確認してください」
            confirmText: "再取得",
            成功(res){
              res.confirm === trueの場合{
                設定を検出する()
              } そうでない場合(res.cancel == true){
                戻る;
              }
            }
          })
        } そうでない場合、e.errMsg.indexOf("頻繁") !== -1){
          wx.showModal({
            タイトル: 「ヒント」、
            内容: 「位置情報インターフェースが頻繁に呼び出されています。再度操作する前に 10 ～ 30 秒お待ちください。」
            表示キャンセル: false
          })
        }
      },
      完了（）{
        wx.hideLoading()
      }
    })
    // WeChatの位置情報許可機能を有効にするガイドdetectSettings(){
      wx.getSetting({
        成功(res){
          if(res && (res.authSetting["scope.userLocation"] !== undefined && res.authSetting["scope.userLocation"] !== true)){
            wx.showModal({
              タイトル: 「ヒント」、
              内容:「ミニプログラムには位置情報の許可がありません。WeChat ミニプログラムの位置情報の許可を設定してください。」
              confirmText: "設定へ移動",
              成功(res){
                res.cancel == trueの場合{
                  戻る
                } そうでない場合 (res.confirm === true){
                  wx.openSetting({
                    成功(結果){
                      if(result && (result.authSetting["scope.userLocation"] !== undefined && result.authSetting["scope.userLocation"] ===true)){
                        wx.navigateTo({
                          URL: "/pages/map/index"
                        })
                      } それ以外 {
                        wx.navigateTo({
                          URL: "/pages/index/index"
                        })
                      }
                    },
                  })
                } 
              },
              失敗（）{
                wx.navigateTo({
                  URL: "/pages/index/index"
                })
              }
            })
          } それ以外 {
            wx.navigateTo({
              URL: "/pages/map/index"
            })
          }
        },
        完了（）{
          wx.hideLoading()
        }
      })
    }
   }
})

<!--pages/map/index.wxml-->
<view class="fixed top">
  <van-search bind:search="searchSchool" placeholder="学校名を入力してください" model:value="{{schoolName}}" />
  <view class="school-nav">
    <text class="left">近くの学校</text>
    <view class="right" bind:tap="changeCity">
      <van-icon name="location-o" />
      <text>{{city || "北京"}}</text>
    </ビュー>
  </ビュー>
</ビュー>
<view class="addr-cell" bindtap="subData">
  <block wx:for="{{options}}" wx:key="index">
    <van-cell data-chooseOpt="{{item}}" title-width="70vw" title="{{item.title}}" value="" label="{{item.address}}" />
  </ブロック>
  <view id="txt" class="btm">
    <text wx:if="{{options.length}}">{{count>0 ? "下にプルダウンして更新すると詳細が表示されます" : "すでに一番下まで到達しています"}}</text>
    <text class="no-data" wx:else>関連するデータは取得されませんでした。 。 。 </テキスト>
  </ビュー>
</ビュー>	

//必要なツール関数を導入します const app = getApp();
const {qqmapsdk,key} = app.require('utils/util');
// ライフサイクル関数を初期化する onLoad: function (options) {
  _this = これ;
  _this.init()
},

// 住所を解析して現在の位置を取得する init(location){
  クエリを = {
    成功(res){
      コンソール.log(res)
      res.status === 0 の場合
        // コンソール.log(res.result.location)
        app.globalData.adInfo = res.result.ad_info;
        _this.setData({
          都市: res.result.ad_info.city,
          緯度: res.result.location.lat,
          lng:res.result.location.lng、
        })
        _this.qqSearch();
      } それ以外 {
        wx.showModal({
          タイトル: 「ヒント」
          content:res.message || "地理的な位置情報を取得できませんでした。",
          表示キャンセル: false
        })
      }
    },
    失敗する{
      コンソール.log(e)
    }
  }
  場所 && (query.location = 場所);
  qqmapsdk.reverseGeocoder(クエリ);
}

// 入力が都市の場合、学校は表示されず都市のみが表示されます searchSchool(e){
  // 入力または入力スペースなし if(e && (!e.detail || e.detail.trim() === '')){
    wx.showToast({
      タイトル:「有効な学校名を入力してください」
      アイコン: 'なし'、
      期間: 2000
    })
    戻る
  }
  _this.setData({
    オプション:[],
    カウント: -2
  })
  _this.qqSearch(e.detail);
},
qqSearch(名前){
  // 入力ボックスに学校名を入力します wx.showLoading({
    タイトル: 「情報の取得」
  })
  mks = [];
  数えてみましょう、
      境界 = `nearby(${_this.data.lat},${_this.data.lng},1000)`;
  検索(名前)
  関数検索(名前){
    定数opts = {
      キーワード: '大学', //検索キーワード page_size: 15,
      page_index: _this.data.pageIndex, // その他のキーを取得: key,
      境界
    };
    if(名前){
      opts.boundary = `region(${_this.data.city})`
      opts.keyword = 名前
    }
    // ここでの主な目的は、高頻度のインターフェース呼び出しによって発生するエラーを回避することです。そのため、関連情報を取得するには URL のみを使用できます wx.request({
      URL: "https://apis.map.qq.com/ws/place/v1/search",
      メソッド: "get",
      データ：{
        ...オプション
      },
      success: function (res) { //検索成功後のコールバック console.log(res)
        res.statusCode !== 200 || (res.data && res.data.status !== 0) の場合、戻り値:
        // 初期化とその他の状態 // 何回スライドすればもっと取得できるか計算します if (_this.data.count === -1 || _this.data.count === -2) {
          カウント = res.data.count && Math.floor(res.data.count/10);
        }それ以外 {
          カウント = --_this.data.count;
        }
        (i = 0 とします; i < res.data.data.length; i++) {
          mks.push({ // 返された結果を取得し、それをmks配列に格納します title: res.data.data[i].title,
            アドレス: res.data.data[i].address,
          })
        }
      },
      失敗: 関数 (e) {
        コンソール.log(e)
        wx.showToast({
          title: JSON.stringify(e) || "マップ情報の取得に失敗しました",
          アイコン: "なし",
          所要時間: 3000
        })
      },
      完了: 関数 (){
        タイムアウトを設定します(()=>{
          wx.hideLoading()
          mks.push(..._this.data.options);
          _this.setData({ //マップ上に検索結果を表示するためのマーカープロパティを設定するオプション: mks,
            カウント
          })
        },1000)
      }
    });
  }
},

// 一番下までスライドするライフサイクル関数 onReachBottom: function () {
  _this.data.pageIndex = +++_this.data.pageIndex;
  _this.data.count && _this.qqSearch();
},

サブデータ(e){
  定数データ = e.target.dataset.chooseopt;
  //プロンプトをクリックする状況を処理します textif(!data) return;
  wx.showModal({
    タイトル: 「ヒント」、
    内容: `あなたの学校は[${data.title}]ですか? `、
    成功(res){
      // キャンセル if(res.cancel) {
        戻る;
      } そうでない場合 (res.confirm){
        // OK // バックエンドへの追加または変更のリクエスト。通常は詳細なアドレスが必要ですが、ここでは簡単なプロセスを示します。wx.showToast({
          タイトル: data.title,
          アイコン:「なし」
        })
      }
    },
    失敗（）{
      wx.showToast({
        タイトル: 「失敗」、
        アイコン: 「エラー」
      })
    }
  })
}

都市を変更する(){
  _this.setData({
    オプション:[],
    カウント:-2,
    // シンプルな双方向データバインディング。schoolName を入力すると入力ボックスの内容をクリアします: ''
  })
  wx.chooseLocation({
    緯度:_this.data.lat,
    経度:_this.data.lng、
    成功(res){
      if(res.errMsg === "chooseLocation:ok"){
        // 選択した場所を取得し、逆アドレスで経度と緯度を解析します parsing_this.init(`${res.latitude},${res.longitude}`);
      }
    },
    // キャンセルボタンを押す fail(e){
      if(e.errMsg === "chooseLocation:fail キャンセル"){
        _this.init();
      }
    },
    完了（）{
    }
  })
}