用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 實戰教程 查看內容

:微信小程序map 地圖引入配置+騰訊地圖地址坐標解析

巴黎彩票计划 www.hknsi.icu Rolan 2019-5-17 00:49

最終效果 一、要實現的功能 展示地圖。 參考map組件 在地圖上展示多個店鋪。 marker標記點用于在地圖上顯示標記的位置。 點擊店鋪放大圖標,展示選擇的店鋪信息。 更改選擇店鋪的標記尺寸大小。 在地 ...

最終效果

一、要實現的功能

  • 展示地圖。

    • 參考map組件
  • 在地圖上展示多個店鋪。

    • marker標記點用于在地圖上顯示標記的位置。
  • 點擊店鋪放大圖標,展示選擇的店鋪信息。

    • 更改選擇店鋪的標記尺寸大小。
  • 在地圖中心點放一個可視化標記。

    • cover-view標簽防止一個標記圖片,訂到在地圖大小的中心,自行調試。
  • 移動后獲取地圖中心點位置,選擇最近一個店鋪。

    • mapbindregionchange事件,視野發生變化時觸發,重新請求,把最近一家店鋪修改標記尺寸大?。?strong>有注意事項)。
  • 移動后根據屏幕中心點坐標逆地址解析成中文地址(詳細看第四)。

  • 增加選擇其他城市頁面(封裝成組件了,點擊這里查看)。

  • 點擊其他城市,根據城市名稱地址解析成坐標,更新視圖(詳細看第四)。

二、注意事項

  • 每次更新視圖都會觸發bindregionchange事件,如果在里面獲取到地圖視圖中心點坐標重新賦值給地圖坐標的話,會造成這個事件不斷的觸發。
  • 每次拖動視圖中心點位置都需要重新請求坐標附件的店鋪。注意封裝方法
  • 展示在地圖上的標簽必須用cover-view或者cover-image

三、涉及到的技術及鏈接

四、騰訊地圖的微信小程序javaScript SDK 使用

使用方式直接去看官方文檔,引入也非常詳細了。直接把下載js文件,然后引入。不改成了es6的expost default/import來導出引入

export default QQMapWX
復制代碼

然后在使用頁面import,在onLoad里實例化api核心類。

//index.vue
import QQMapWX from "@/utils/qqmap-wx-jssdk"; //騰訊地圖,reverseGeocoder逆地址轉碼
export default {
    data(){
        return {
          qqmapsdk: null, //實例化地圖sdk
        }
    },
    onLoad(){
        // 實例化API核心類
        this.qqmapsdk = new QQMapWX({
          key: "3P2BZ-6G***-C***3-***5G-3VDYH-N5BGH" // 必填
        });
    }
}
復制代碼

根據坐標逆解析詳細地址

//根據坐標逆解析詳細地址
getCityinfo() {
      return new Promise((resolved, rejected) => {
        const that = this;
        this.qqmapsdk.reverseGeocoder({
          location: {
            latitude: this.latitude,
            longitude: this.longitude
          },
          success(res) {
            console.log("地址轉碼成功", res);
            const _res = res.result;
            that.cityName = _res.address_component.city;
            that.update({
              cityName: _res.address_component.city,
              nowPlace:
                _res.formatted_addresses.recommend + " - " + _res.address
            });
            that.getShopData();
          },
          fail: function(res) {
            console.log(res);
          }
        });
      });
    },
復制代碼

根據城市/地址解析成坐標

//根據城市/地址解析成坐標
cityNameGetPosition() {
      return new Promise((resolved, rejected) => {
        const that = this;
        this.qqmapsdk.geocoder({
          address: this.cityName,
          success(res) {
            console.log("根據地址轉換坐標", res);
            const _res = res.result.location;
            that.latitude = _res.lat;
            that.longitude = _res.lng;
            that.update({
              latitude: _res.lat,
              longitude: _res.lng
            });
            that.getCityinfo();
          },
          fail(err) {
            console.log("根據地址轉換坐標err", err);
          }
        });
      });
    },
復制代碼

五、實現的部分代碼

使用的請求和功能邏輯應該是這樣的,做了個思維導圖。 (注意:代碼跟思維導圖可能有出入,圖是完成代碼后的總結,是比較完善的)

這個項目開發使用的是mpvue開發的小程序,mpvue里bindregionchange事件變成了

    //不是mpvue開發請無視
    @regionchange="getCenterMap1"
    @end="getCenterMap"
復制代碼

map組件

    <div>
        <!-- 地圖組件 -->
        <map
          id="map"
          :longitude="longitude"
          :latitude="latitude"
          scale="13"
          :markers="markers"
          @markertap="markertap"
          @regionchange="getCenterMap1"
          @end="getCenterMap"
          show-location
          style="width:750rpx; height:99vh;"
        >
        </map>
        <!-- 中心點 -->
        <cover-image  class="centerImg"
        src="/static/images/person.png"
        ></cover-image>
        <!-- 回到我的定位 -->
        <cover-image
          @click="getMyPosition"
          class="backMyPosition"
          src="/static/images/location.png"
        ></cover-image>
    </div>
復制代碼

獲取自身定位wx.getLocation

// 獲取定位
    getMyPosition() {
      return new Promise((resolved, rejected) => {
        wx.getLocation({
          type: "wgs84",
          success: data => {
            // console.log(data,"微信地圖")
            this.latitude = data.latitude;
            this.longitude = data.longitude;
            this.$store.commit("update", {
              latitude: data.latitude,
              longitude: data.longitude
            });
            // 根據坐標獲取城市信息
            this.getCityinfo().then(() => {
              resolved();
            });
          },
          fail() {
            //失敗回調
            //如果用戶拒絕授權,默認為北京
            this.cityName = "北京市";
            this.update({ cityName: "北京市" });
          }
        });
      });
    },
復制代碼

地圖視野更新時觸發

    // 地圖視野更新時觸發
    getCenterMap() {
      if (this.active === "上門") {
        const that = this;
        console.log("自身位置坐標", this.longitude, this.latitude);
        const map = wx.createMapContext("map");
        map.getCenterLocation({
          success(res) {
            // 判斷坐標一致,不用重復請求數據
            if (
              that.longitude === res.longitude &&
              that.latitude === res.latitude
            ) {
              return false;
            }
            //  const ress =  transformFromGCJToWGS(res.latitude,res.longitude)
            that.latitude = res.latitude;
            that.longitude = res.longitude;

            that.$store.commit("update", {
              latitude: res.latitude,
              longitude: res.longitude
            });
            console.log("中心位置坐標", that.longitude, that.latitude);
            // console.log('轉換后的中心位置坐標',ress)
            that.getCityinfo();
          }
        });
      }
    }

分享至 : QQ空間
收藏
原作者: 絮 來自: 掘金
龙江福彩36选7 极速赛车三码技巧 新时时彩赚钱方法 31选7走势图300期 江西时时还有漏洞吗 重庆时时五星彩开奖 手机赛车游戏 新时时五星直选 12期六开彩开奖结果 财神时时彩计划在线网 重庆时时下载手机版 时时彩彩票开奖结果查询 加拿大28开奖网站51快开 最新赚钱app 49号码图2019 秒速飞艇计划人工在线