快速使用高德地图、腾讯地图、天地图的API

一、vue中使用高德地图

登录高德开放平台 developer.amap.com, 注册成为开发者，创建应用申请key时需注意-服务平台的选取：

1.申请应用时-服务平台：Web端(JS API)

实际项目中的需求：初始化高德地图在页面中, 自定义地图主题,根据业务需要在指定位置添加标记,点击标记弹出标记点位的相关信息等.

1.index.html页面准备

<script type="text/javascript">
window._AMapSecurityConfig = {
  securityJsCode: '6f8711d505e9604915424accdcbb3162' // 密钥
}
</script>
<script
src="https://webapi.amap.com/maps?v=1.4.15&key=你申请的key(密钥对应)&plugin=AMap.Geocoder,AMap.PolygonEditor,AMap.CircleEditor"></script>

2.初始化地图

<el-amap ref="map" class="amap-box" :zoom="zoom" :center="center" :mapStyle="mapStyle" :events="mapEvents">
    ...
</el-map>

// 初始生成地图
function initMap() {
  const map = new AMap.Map('amap-box', {
    resizeEnable: true,
    center: [116.397428, 39.90923],
    zoom: 11.8
  })
}

3. 其他:添加点标记

...

2.申请应用时-服务平台：Web服务

使用场景：微信小程序获取当前位置只能获取经纬度坐标信息,配合调用此api可获取对应中文详情地址
(浏览器里地址栏输入url可以直接调用此方法) 

【地理编码查询】-根据中文地址信息获取经纬度
https://restapi.amap.com/v3/geocode/geo?key=你申请的key值&output=&city=beijing&address=北京市海淀区理工大学科技园

【逆地理编码查询】-根据经纬度信息获取详细地址   
https://restapi.amap.com/v3/geocode/regeo?output=&location=116.167550,39.807326&key=你申请的key值&radius=300&extensions=

二、微信小程序中使用腾讯地图sdk

登录腾讯位置服务 lbs.qq.com/, 注册成为开发者，创建应用申请key

1. 下载sdk到本地

https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview

会得到 qqmap-wx-jssdk.js

2.集成sdk到项目中

新建js文件夹,将下载下来的sdk放进去,再新建一个qqMapSdk.js文件实例化腾讯地图.

// qqMapSdk.js页面

// const QQMapWX = require('./qqmap-wx-jssdk.js'); 
import { QQMapWX } from './qqmap-wx-jssdk.js' // 01:引入SDK核心类
// 02:实例化API核心类
const qqmapsdk = new QQMapWX({
  key: '' // 必填开发密钥(key) 登录腾讯位置服务官网,登录后创建应用得到.
});

// 03:封装并导出方法： 
// 根据中文地址信息获取经纬度
export const getLatlon = (address: string) => {
  return new Promise((resolve, reject) => {
    qqmapsdk.geocoder({
      address, // 地址参数，例：固定地址，address: '北京市海淀区彩和坊路海淀西大街74号'
      success: function (res: any) {
        resolve(res)
      },
      fail: function (error: any) {
        reject(error)
      },
    })
  })
}

// 根据经纬度信息获取详细地址 
export const getAddress = (locationStr: String) => {
  return new Promise((resolve, reject) => {
    qqmapsdk.reverseGeocoder({
      location: locationStr || '',
      success: function (res: any) {
        resolve(res)
      },
      fail: function (error: any) {
        reject(error)
      },
    })
  })
}

3. 获取详细地址

// homePage.js
import { reverseGeocoderFn } from '../assets/js/qqMapSdk'
 
componentDidMount() {
     getAddress().then(res=>{
      if(res.message === 'Success'){
        const { address, formatted_addresses } = res.result // { address:'北京市东城区新城东街19号院', formatted_addresses:{ recommend:'北京市政府(旧址)北', standard_address:'北京市东城区正义路2号' } }
        this.setState({ txSdkAddress: formatted_addresses.recommend || ''})
        console.log('腾讯sdk方式获取到的地址：', formatted_addresses.recommend, '---',res )
      }
    })
 }

三、vue中使用天地图

登录天地图官网 lbs.tianditu.gov.cn/, 注册成为开发者，创建应用申请key

1. index.html页面准备

<script src="http://api.tianditu.gov.cn/api?v=4.0&tk=你申请的key" type="text/javascript"></script>

2.封装方法供页面调用

// 地理编码查询时,地址里携带的特殊字符变空串,解决浏览器地址栏解析传参错误查询不了的问题
removeSecialtxt(text) {
  var reg = /[#,",“,”,\s]+/g // 去除其它字符 \s:空格
  var removed = text.replace(reg, '')
  return removed
}

// 天地图方式获取地址信息
getAdressInfoByTianditu(obj, fn) {
  let addressInfo = {}
  const key = key // 天地图key
  let url = ''
  if (obj.address) {
    const params = { keyWord: this.removeSecialtxt(obj.address) }
    url = window._CONFIG['domianURL'] + `/tianditu/geocoder?ds=${JSON.stringify(params)}&tk=${key}`
  } else {
    url =
      window._CONFIG['domianURL'] +
      `/tianditu/geocoder?postStr={"lon":${Number(obj.fd_lng)},"lat":${Number(
        obj.fd_lat
      )},"ver":1}&type=geocode&tk=${key}`
  }
  axios.get(url).then(res => {
    console.log('天地图方式获取地址-res', res)
    if (res.status === 200 && res.data.location && res.data.location.lon && res.data.location.lat) {
      addressInfo.fdLongitude = Number(res.data.location.lon)
      addressInfo.fdLatitude = Number(res.data.location.lat)
      addressInfo.address = obj.address
      console.log('01-success-地理编码查询', addressInfo)
      fn(addressInfo)
    } else if (res.status === 200 && res.data.result) {
      // res.data.result : {formatted_address: "北京市东城区龙潭街道左安门内大街", location: {lon: 116.433374, lat: 39.871119}}
      const { formatted_address } = res.data.result
      addressInfo.fdLongitude = Number(obj.fd_lng)
      addressInfo.fdLatitude = Number(obj.fd_lat)
      addressInfo.address = formatted_address
      console.log('02-success-逆地理编码查询', addressInfo)
      fn(addressInfo)
    } else {
      this.$message.warning('获取位置信息错误，请联系管理员！')
      return
    }
  })
},



// 调用
this.getAdressInfoByTianditu({ fd_lng, fd_lat }, res => {
      // console.log('根据经纬度查地址-res', res)
})

this.getAdressInfoByTianditu({ address: searchName }, res => {
     // console.log('天地图方式-根据名称查经纬度-res', res)
})

注意：window._CONFIG['domianURL'] = 项目中实际域名api访问地址,实际项目中需要配置代理

3. 官网示例

天地图官网：http://lbs.tianditu.gov.cn/server/geocodinginterface.html

请求示例： http://api.tianditu.gov.cn/geocoder?ds={"keyWord":"北京市海淀区莲花池西路28号"}&tk=您的密钥

请求：http://api.tianditu.gov.cn/geocoder?postStr={'lon':116.37304,'lat':39.92594,'ver':1}&type=geocode&tk=您的密钥