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

news/2024/7/19 14:03:19 标签: js
  • 百度地图:
    参考文档:百度文档
<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('定位失败')
  }
})

http://www.niftyadmin.cn/n/5212848.html

相关文章

武汉教育E卡通学生证照片尺寸要求及证件照集中采集方法

”武汉教育E卡通“电子学生证旨在数字化中小学生身份&#xff0c;提供通用的教育卡&#xff0c;实现身份认证的电子化、权威化和集成化。校内一卡通系统包括刷卡考勤、电子班牌、图书借阅等&#xff0c;全面记录学生在校业务。同时&#xff0c;采集社会通行、实践活动等数据&am…

Python 自动化用处太大了!|python自动整理文件,一键完成!

随着时代的发展及人工智能的到来&#xff0c;Python 自动化办公能力几乎已成为每个岗位的必备技能&#xff01; 而且到处可见的抖音、朋友圈铺天盖地宣传 Python 可以轻松达到办公自动化&#xff0c;并且学习没门槛&#xff0c;是真的吗&#xff1f; 我很负责的告诉大家&#…

【ARM CoreLink 系列 3.1 -- CCI-500 详细介绍 -上半部】

文章目录 1.1 CCI-500 介绍1.2 CCI-500 features 详细介绍1.2.1 Data Coherency between ACE Masters1.2.2 Quality of Service (QoS)1.2.3 (I/O) Coherency1.2.4 Crossbar Interconnect Functionality1.2.5 Performance Monitoring Unit (PMU)1.2.6 DVM Message Transport1.2.…

【蓝桥杯】刷题

刷题网站 记录总结刷题过程中遇到的一些问题 1、最大公约数与最小公倍数 a,bmap(int,input().split())sa*bwhile a%b:a,bb,a%bprint(b,s//b)2.迭代法求平方根(题号1021) #include<stdio.h> #include<math.h> int main() {double x11.0,x2;int a;scanf("%d&…

Vatee万腾的科技冒险:Vatee独特探索力量的数字化征程

在数字化时代的激流中&#xff0c;Vatee万腾以其独特的科技冒险精神&#xff0c;引领着一场前所未有的数字化征程。这不仅仅是一次冒险&#xff0c;更是对未知的深度探索&#xff0c;将科技的力量推向新的高度。 Vatee万腾在科技领域敢于挑战传统&#xff0c;积极探索未知的可能…

Mac开发环境——MacOSX安装与配置Anaconda与PyCharm详细流程

一、安装与使用Anaconda 1.简介 Anaconda 是一个用于数据科学、机器学习和科学计算的开源发行版和包管理器。有许多可用于数据处理、分析和建模的工具和库&#xff0c;并提供了一个方便的环境管理系统。Anaconda 包含了 Python 解释器和许多常用的 Python 包&#xff0c;以及…

matlab使用plot画图坐标轴上的导数速度一点和加速度两点如何显示

一、背景 在使用matlab中的plot函数画图时&#xff0c;有时需要在坐标轴上显示一个点的导数项&#xff0c;如横坐标是时间&#xff0c;纵坐标是速度&#xff0c;也就是位置的导数 y ˙ \dot y y˙​&#xff0c;如下图所示&#xff0c;这在matlab如何操作呢&#xff1f; 二…

Kubelet详解

这里写目录标题 Kubelet详解一.陈述式资源管理方法1.基本信息查看2.发布 kubectl expose命令3.更新 kubectl set4.回滚 kubectl rollout 二.声明式管理方法 Kubelet详解 一.陈述式资源管理方法 1.kubernetes 集群管理集群资源的唯一入口是通过相应的方法调用 apiserver 的接口…