Вводная конфигурация карты апплета WeChat + анализ координат адреса карты Tencent

Апплет WeChat

окончательный эффект

1. Реализуемая функция

  • Показать карту.

    • Ссылаться наmapкомпоненты

  • Показать несколько магазинов на карте.

    • markerТочки маркеров используются для отображения местоположения маркеров на карте.

  • Щелкните значок увеличения магазина, чтобы отобразить информацию о выбранном магазине.

    • Измените размер отметки выбранного магазина.

  • Поместите визуальный маркер в центр карты.

    • cover-viewМетка размещает изображение маркера, размещает его в центре размера карты и отлаживает его самостоятельно.

  • После перемещения получите расположение центральной точки карты и выберите ближайший магазин.

    • mapизbindregionchangeСобытие, срабатывающее при изменении поля зрения, повторном запросе, изменении размера метки для ближайшего магазина (Есть меры предосторожности).

  • После перемещения инверсный адрес разбивается на китайский адрес по координатам центральной точки экрана (подробности см. в четвертом).

  • Увеличьте выбор других страниц города (упакованных в компоненты,нажмите здесь, чтобы посмотреть).

  • Щелкните другие города, преобразуйте координаты в координаты в соответствии с названием и адресом города и обновите представление (подробности см. в четвертом).

2. Вопросы, требующие внимания

  • Срабатывает каждый раз при обновлении представленияbindregionchangeсобытие, если координаты центральной точки вида карты получены и переназначены на координаты карты, это событие будет запускаться непрерывно.
  • Каждый раз, когда вы перетаскиваете положение центральной точки вида, вам нужно перезапросить магазин рядом с координатами. Обратите внимание на способ упаковки
  • Метки, отображаемые на карте, должны использоватьcover-viewилиcover-image

3. Связанные технологии и ссылки

  • апплетmapкомпоненты
  • Апплет WeChat от Tencent Map, javaScript SDK, преобразование адреса (китайский адрес в координаты) и обратное преобразование адреса (координаты в китайский адрес)

4. Использование апплета WeChat javaScript SDK Tencent Maps

Использование Перейти непосредственно к официальным документам, введение также очень подробно. JS-файл непосредственно к загрузке, затем введен. Не изменил ES6 выделения по умолчанию / импорт в экспорт введен

export default QQMapWX

Затем используйте импорт страницы, чтобы создать экземпляр основного класса API в onLoad.

//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);
          }
        });
      });
    },

5. Часть кода реализована

Используемая логика запроса и функции должна быть такой, и была составлена ​​карта разума. (Примечание: между кодом и ментальной картой могут быть расхождения. Изображение представляет собой сводку после завершения кода, который является относительно полным)

map

Этот проект разработан с использованием небольшой программы, разработанной mpvue, в mpvuebindregionchangeсобытие становится

    //不是mpvue开发请无视
    @regionchange="getCenterMap1"
    @end="getCenterMap"

компонент карты

    <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();
          }
        });
      }
    }
Категории