腾讯地图vue组件开发

背景

百度地图插件vue-baidu-map拾取的经纬度在小程序上显示时存在偏差。

小程序使用的是腾讯自家的地图。两个地图用的是两套坐标系，腾讯地图、高德地图用的是GCJ-02坐标，也就是国测局坐标系，而百度是自成一套，BD-09坐标系，所以相同地点在经纬度在两个坐标系是不一样的，或者说有偏移。

解决方案如下：

对于后台百度地图传过来的经纬度，要做一次转换，转换成腾讯地图的经纬度，再传给小程序显示。

function convert2TecentMap(lng, lat) {
  if (lng == '' && lat == '') {
    return {
      lng: '',
      lat: ''
    }
  }
  var x_pi = 3.14159265358979324 * 3000.0 / 180.0
  var x = lng - 0.0065
  var y = lat - 0.006
  var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi)
  var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi)
  var qqlng = z * Math.cos(theta)
  var qqlat = z * Math.sin(theta)
  return {
    lng: qqlng,
    lat: qqlat
  }
}

由于不想做转换，所以基于腾讯地图封装了个vue组件。

• 实现的功能：
  • 外部传入经纬度，地图上显示标记。
  • 根据关键词搜索地址。
  • 点击地图，标记点，并显示经纬度、地址详细信息。
  • 点击搜索结果的某一项，地图上显示标记。
• 效果图：

ff7a5900-497d-11eb-97b7-0dc4655d6e68.png

组件的使用

1. 申请mapKey

• 打开腾讯位置服务系统，登录/注册账号->右上角进入控制台-> key管理。
• 设置合法域名或IP。这一步很重要，否则后续的逆向解析将会提示“域名/ip未授权”。【应用产品】设置为WebServiceAPI，配置即将引入该组件的网站域名或ip，其他保存默认设置，单击【保存】。
  
  

  90a27910-498f-11eb-8a36-ebb87efcf8c0.png

2. 内部实现逻辑

• mapKey：需换成您上一步申请到的key。

3. 使用

• 引入腾讯APIjs文件。在vue项目的index.html中引入，其中key需换成第一步申请到的key。

• 设置代理。在vue.config.js文件中，添加配置。

devServer: {
    proxy: {
      "/wellTencentMap": {
        target: "https://apis.map.qq.com",
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          '^/wellTencentMap': '' //重写接口
        }
      },
    }
  }

• 替换mapKey，组件实现逻辑中的mapKey需换上面申请到的key。

data() {
  return {
    mapKey: 'JDKBZ-****',
  };
},

• 使用组件。（此处我的组件名为well-tencent-map）

• 参数：

selectedValue：可不传、可传null、支持异步获取回来的数据。若传入，格式如下：
{
  location: {
    lat: null,
    lng: null,
  },
  address: null,
  province: null,
  city: null,
  district: null
}

• 事件：

selected-change：当标记的点发生变化时，触发。