微信小程序map 地图引入配置+腾讯地图地址坐标解析

标签:程序,地图,引入,配置,腾讯,地址,坐标,解析 发布时间:2019年06月19日 点击2

最终结果

一、要实现的功能

  • 展示地图。

    • 参考map组件
  • 在地图上展示多个店铺。

    • marker标记点用于在地图上表现标记的位置。
  • 点击店铺放大图标dc dc电源模块,展示选择的店铺信息。

    • 更改选择店铺的标记尺寸大小。
  • 在地图中间点放一个可视化标记。

    • cover-view标签防止一个标记图片潍坊网站建设,订到在地图大小的中间,自行调试。
  • 移动后获取地图中间点位置网站排名,选择最近一个店铺。

    • mapbindregionchange事件,视野发生转变时触发,重新请求,把最近一家店铺修改标记尺寸大小(有细致事项)。
  • 移动后根据屏幕中间点坐标逆地址解析成中文地址(细致看第四)。

  • 增长选择其他城市页面(封装成组件了,点击这里查看)。

  • 点击其他城市,根据城市名称地址解析成坐标,更新视图(细致看第四)。

二、细致事项

  • 每次更新视图都会触发bindregionchange事件,假如在里面获取到地图视图中间点坐标重新赋值给地图坐标的话,会造成这个事件赓续的触发。
  • 每次拖动视图中间点位置都必要重新请求坐标附件的店铺。细致封装方法
  • 展示在地图上的标签必须用cover-view或者cover-image

三、涉及到的技术及链接

  • 小程序的map组件
  • 腾讯地图的微信小程序javascript SDK,地址的解析(中文地址转坐标)和逆地址解析(坐标转中文地址)

四、腾讯地图的微信小程序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.$store3564mit("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.$store3564mit("update", {
              latitude: res.latitude,
              longitude: res.longitude
            });
            console.log("中间位置坐标", that.longitude, that.latitude);
            // console.log('转换后的中间位置坐标',ress)
            that.getCityinfo();
          }
        });
      }
    }

手机网站建设