使用高德地图JS API 开发一些常见使用问题(急救包)

本文记录开发使用高德地图JS API 开发一些常见使用问题

API文档 👉传送门
关于如何引入高德地图JS API方式 请移步前面文章👉使用高德地图JS API 开发一些常见使用方法(急救包)

前篇👉:
使用高德地图JS API 开发——普通点标记Marker

使用高德地图JS API 开发——海量点标记LabelMarker

使用高德地图JS API 开发——区划浏览/下钻功能(4)

1.JS API版本问题 2.0 、1.4
  • 目前高德地图JS API已经迭代2.0大版本,在交互体验、视觉体验,还是接口能力都有大幅提升;对于老版本 1.4基本上大部分API也都支持
    在这里插入图片描述
2.密钥AMapSecurityConfig.securityJsCode、key使用问题

使用高德地图开发 尽量把密钥(securityJsCode)、key都要加上,后续功能开发可能会需要到

  • 不使用密钥 地图可以用(1.4版本不引入key也能用)。但是许多API服务需要搭配密钥支持,比如天气、自定义地图、搜索、路线规划、地理编码等服务,
  • 密钥、key安全使用,要看引入方式 ,关于如何引入 请移步前面文章👉使用高德地图JS API 开发一些常见使用方法(急救包) 。也可以设置域名白名单,一把梭都省事了👇。
3.设置域名白名单问题

高德地图JS API设置域名白名单的作用主要是为了安全和权限控制。当你在高德地图开放平台创建应用并获得API密钥(Key)时,如果你指定了域名白名单,那么只有列表中指定的域名下的网页才能通过该Key调用高德地图的API服务。这样做有以下几个好处:

  1. 安全性:防止恶意网站或未经授权的第三方滥用你的API Key,从而保护你的账号安全和避免因他人滥用而导致的费用损失。
  2. 资源控制:确保你的API请求来自于可信的源,帮助你更好地统计和管理API的使用情况,比如流量监控和配额限制。
  3. 数据保护:某些API可能涉及敏感数据或有使用限制,限制调用来源可以帮助保护数据不被非法访问或不当使用。
  4. 合规性:部分法律法规或行业标准可能要求对API访问进行严格控制,设置白名单是满足这些要求的一种方式。
    在这里插入图片描述
    建议设置域名白名单,相对来说安全,避免一些不必要的麻烦提示:1.4版本添加白名单不一定能生效
    在这里插入图片描述
4.API方法使用不生效没效果

在使用高德地图开发过程中,如果使用AMap方法不生效报错,比如使用AMap.CitySearch定位服务
在这里插入图片描述

可能是没有正确引入、没有找到这个API,以下面代码引入方式为例,在key后面追加&plugin,比如&plugin=AMap.CitySearch, 多个插件逗号拼接

  <script type="text/javascript"
    src="https://webapi.amap.com/maps?v=1.4.1&amp;key='你申请的key值'&plugin=AMap.CitySearch">
  </script>
  initLocation() {
      // 获取当前定位信息 城市名
      var citySearch = new window.AMap.CitySearch();
      citySearch.getLocalCity(function (status, result) {
        if (status === "complete" && result.info === "OK") {
          console.log(result.city)
        }
      });
  },
5.隐藏地图标注地区名称 showLabel
const map = new AMap.Map('container', {
   showLabel: false, // 取消地图层标注
});

在这里插入图片描述

6.zoom缩放颗粒度

地图默认2D状态下 设置setZoom 大小和鼠标轮滑缩放都一样 颗粒度很粗,设置小数位是不生效的

const map = new AMap.Map('container', {
   viewMode:'2D', // 不设置 地图也默认2D
   zoom: 9, // 初始设置地图层级
});
var zoom = 10
map.setZoom(zoom); //设置地图层级

3D状态下 设置setZoom 大小, 缩放支持小数,缩放自如,颗粒度2D相比细致很多

const map = new AMap.Map('container', {
   viewMode:'3D',
   zoom: 9, // 初始设置地图层级
});
var zoom = 10.5
map.setZoom(zoom); //设置地图层级

提示:但是使用3D属性看需求,不影响性能就放心用,造成性能导致项目卡的话 可以使用自动缩放视野map.setFitView()

7.设置区域限制显示范围
方法返回值说明
setBounds(bound:Bounds)-指定当前地图显示范围,参数bounds为指定的范围
setLimitBounds(bound:Bounds)-设置Map的限制区域,设定区域限制后,传入参数为限制的Bounds。地图仅在区域内可拖拽,相关示例
const map = new AMap.Map('container', {
    zoom: 11,
    showIndoorMap: false
});
var bounds = map.getBounds();
map.setLimitBounds(bounds);
7.设置地图语言
const map = new AMap.Map('container', {
    resizeEnable: true,
    center: [121.498586, 31.239637],
    lang: "en" //可选值:en,zh_en, zh_cn
});

在这里插入图片描述

后续继续补充更多 🙏
  • 38
    点赞
  • 25
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
高德地图API是一款功能强大的地图服务,它提供了多种功能和接口供开发使用使用高德地图API需要经过以下几个步骤: 1. 首先,你需要申请一个高德地图开发者账号,并创建一个应用。你可以访问高德地图开放平台的官方网站,在那里你可以找到相关的注册和创建应用的步骤。 2. 在创建应用后,你会得到一个API Key,这是你使用高德地图API的权限凭证。在使用API时,你需要在请求中携带这个API Key。 3. 接下来,你可以根据你的需求选择合适的API接口进行开发高德地图API提供了地图显示、地理编码、逆地理编码、路径规划、导航等一系列功能的接口。 4. 根据你选择的接口,你需要按照API文档中的要求构造API请求,并将API Key携带在请求中。 5. 发送请求后,你会收到API的响应数据。根据响应数据的格式和内容,你可以进行相应的处理和展示。 以下是一些常用的高德地图API接口和功能: - 地理编码:将地址转换为经纬度坐标,可以使用 Geocoding API 实现。 - 逆地理编码:将经纬度坐标转换为具体地址,可以使用 Regeocoding API 实现。 - 路径规划:根据起点和终点计算出最优路径,可以使用 Directions API 实现。 - 导航:提供步行、驾车、骑行等导航功能,可以使用 Navigation API 实现。 - 地图显示:在网页或移动应用中显示地图,可以使用 JavaScript API 或 Android/iOS SDK 实现。 希望以上信息能帮助你初步了解如何使用高德地图API。如果你有其他相关问题,请随时提问。 相关问题: 1. 高德地图API有哪些常用的功能? 2. 如何在网页中使用高德地图? 3. 高德地图API的请求参数有哪些?

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

水煮白菜王

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值