🤖 作者简介：水煮白菜王（juejin/csdn同名） ，一位资深前端劝退师 👻
👀 文章专栏： 高德AMap专栏 ，记录一下平时在博客写作中，总结出的一些开发技巧✍。
感谢支持💕💕💕

关联文章：
高德地图JS API 普通点标记Marker
高德地图JS API 海量点标记LabelMarker
高德地图JS API 区划浏览DistrictExplorer
高德地图JS API 加载行政区边界AMap.Polygon
高德地图JS API AMap.MouseTool绘制

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

API文档
关于如何引入高德地图JS API方式 请移步前面文章👉高德地图JS API 一些常见使用方法（急救包）

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 开发一些常见使用方法（急救包） 。也可以设置域名白名单👇，使用高德地图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相比细致很多。

使用JS API 2.0版本下设置 viewMode:‘2D’, 已支持小数位缩放👍

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

提示：但是使用3D属性看需求，不影响性能就放心用，造成性能导致项目卡的话 可以 根据点位使用自动缩放视野map.setFitView()，另外2.0版本在2D模式下已支持小数位颗粒度缩放

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
});

后续跟进补充更多 🙏

如果你觉得这篇文章对你有帮助，请点赞 👍、收藏 👏 并关注我！👀