H5接入百度,高德,腾讯地图

  • 百度地图:
    参考文档:百度文档

const geocoder = new BMap.Geocoder()
geocoder.getPoint(address, (point) => {
  if (point) {
    const info = `location=${point.lat},${point.lng}&title=${title}&content=${address}`
    const browser = baseFunc.browser()
    if (baseFunc.isWx() || !browser.isMobile) {
     window.location.href = `https://api.map.baidu.com/marker?${info}&output=html&src=webapp.companyName.appName`
    } else if (browser.android) {
      window.location.href = `bdapp://map/marker?${info}&coord_type=bd09ll&src=andr.companyName.appName`
    } else {
      window.location.href = `baidumap://map/marker?${info}&coord_type=bd09ll&src=andr.companyName.appName`
    }
   }
  } else {
    Toast('定位失败')
  }
}, '上海市')
  • 腾讯地图
    参考文档:腾讯文档

var url = 'https://apis.map.qq.com/ws/geocoder/v1'
this.$jsonp(url, {
    address: `上海市${address}`,
    key: 'XXXXXX',
    output: 'jsonp'
  }).then(res => {
    if (Number(res.status) === 0) {
      const location = res.result.location
      const browser = baseFunc.browser()
      const info = `marker=coord:${location.lat},${location.lng};title:上海;addr:${this.selectName}`
      if (baseFunc.isWx() || !browser.isMobile) { // 微信内置
        window.location.href = `https://apis.map.qq.com/tools/poimarker?type=0&${info}&key=${this.txKey}&referer=myapp`
        // window.location.href = `https://apis.map.qq.com/tools/poimarker?type=0&keyword=${this.selectName}¢er=${location.lat},${location.lng}&radius=1000&key=QLCBZ-54LCW-QACRK-3QEPO-SCPM3-TRBBU&referer=myapp`
      } else {
        window.location.href = `qqmap://map/marker?${info}&referer=${this.txKey}`
      }
    } else {
      Toast('定位失败')
    }
  })

1.腾讯地图要用jsonp来调用,不然会报跨域问题
2.申请key时要分配测数,不然会提示key次数已用完

  • 高德地图
    参考文档:高德文档
$.ajax({
 type: 'GET',
  url: `https://restapi.amap.com/v3/geocode/geo?address=${address}&city=上海市&key=xxxx`,
  success: (response) => {
  	const browser = baseFunc.browser()
    const location = response.geocodes[0].location.split(',')
    if (baseFunc.isWx() || !browser.isMobile) { // 微信内置
      window.location.href = `https://uri.amap.com/marker?position=${location.join(',')}&name=${this.selectName}`
    } else if (browser.ios) { // 苹果手机
      window.location.href = `iosamap://viewMap?sourceApplication=appname&poiname=${this.selectName}&lat=${location[1]}&lon=${location[0]}&dev=0`
    } else { // 安卓
      window.location.href = `androidamap://viewMap?sourceApplication=appname&poiname=${this.selectName}&lat=${location[1]}&lon=${location[0]}&dev=0`
    };
  },
  error: function (e) {
    Toast('定位失败')
  }
})

你可能感兴趣的:(jquery,vue框架,js)