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

<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=XXXXX"></script>
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('定位失败')
  }
}, '上海市')
<script src="https://map.qq.com/api/gljs?v=1.exp&key=xxxx"></script>
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}&center=${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('定位失败')
  }
})
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值