react + ts +高德地图的使用初次使用记录下

最新推荐文章于 2025-04-17 11:46:39 发布

郑立峰

最新推荐文章于 2025-04-17 11:46:39 发布

阅读量1.8k

点赞数 3

分类专栏： react ts 高德地图

本文链接：https://blog.youkuaiyun.com/weixin_44070105/article/details/106243087

版权

本文记录了在React项目中使用TypeScript集成高德地图遇到的问题及解决方案。由于官方静态引用需明确协议，导致问题，后通过安装@amap/amap-jsapi-loader npm包成功解决。并封装了getAMap函数，该函数接收div元素和AMap.Map配置，返回包含地图实例和高德原生构造函数的对象。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

遇到坑高德官网静态引用地图不能使用 // 必须写上http 或https协议而且在ts 中 AMap会标红
感谢胡哥提醒使用高德npm包新版高德有npm 包万幸 npm i @amap/amap-jsapi-loader
封装了一个 getAMap 函数第一个参数是需要渲染地图的div 第2个是AMap.Map配置具体配置参考高德官网

import AMapLoader from '@amap/amap-jsapi-loader';

export let getAMap = (id = 'container',config = {}) => {
  return new Promise((yes, no) => {
    AMapLoader.load({
      key: '你的key', // 申请好的Web端开发者Key，首次调用 load 时必填
      version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: [], //插件列表
    })
      .then((AMap) => {
       let map =  new AMap.Map(id, {
            zoom: 11,//级别
            center: [116.397428, 39.90923],//中心点坐标
            layers: [//使用多个图层 
            ],
            viewMode: '3D',//使用3D视图
            ...config
          });
        yes({