高德地图使用插件报错AMap.Xxx is not constructor

最新推荐文章于 2024-08-17 16:20:23 发布

sun_wei_tao

最新推荐文章于 2024-08-17 16:20:23 发布

阅读量1.3w

点赞数 2

分类专栏：高德地图AMap 文章标签：前端

本文链接：https://blog.csdn.net/qq_43447509/article/details/115108767

版权

本文介绍了如何解决在使用高德地图时遇到的'AMap.Xxx is not constructor'错误。提供两种解决方案：1. 同步加载插件，通过在地图的script标签中拼接多个插件；2. 异步加载插件，利用AMap.plugin方法，并用数组方式传入多个插件名。

摘要由CSDN通过智能技术生成

报错的原因是在代码中使用了地图插件例如ToolBar、OverView、Scale，但是并没有加载插件

解决方案

同步加载插件：在引入地图的script标签进行如下拼接，多个插件用逗号分隔

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&plugin=AMap.ToolBar,AMap.Driving"></script>

异步加载插件：通过AMap.plugin方法引入，使用数组接收多个插件参数

AMap.plugin

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

sun_wei_tao

关注关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Error in mounted hook: "TypeError: AMap.MouseTool is not a constructor"

郭宝的博客

10-16

6625

错误提示：解决办法：如果是直接引入的高德地图js文件，那么只需在路径后面添加&plugin=AMap.MouseTool 即可，全部路径如下： <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你申请的KEY=AMap.MouseTo...

AMap3D(功能极其丰富的地图应用源码).zip

12-25

AMap3D(功能极其丰富的地图应用源码).zip

参与评论您还未登录，请先登录后发表或查看评论

高德地图AMap.Map is not a constructor问题解决

最新发布

2301_79779756的博客

08-17

643

TypeError: ‘x’ is not a constructor 错误通常由于尝试以构造函数方式实例化一个非构造函数对象、拼写错误、导入错误或误用非函数对象引起。通过确认对象是否为构造函数、检查拼写和导入、避免误用非函数对象、以及确保模块导出/导入正确，可以有效解决此错误。

vue使用高德地图报错：AMap.DistrictSearch is not a constructor问题解决

夏夏

08-06

1万+

这个问题说的是没有初始化，解决如下：参考：https://blog.csdn.net/shidaping/article/details/78537730

vue安装高德地图

张小胖

10-10

774

<scripttype="text/javascript"src="https://webapi.amap.com/maps?v=1.4.15&key='key自己申请'&plugin=AMap.MouseTool,AMap.Geolocation,AMap.ControlBar,Map3D,AMap.DistrictSearch,AMap.RangingTool,A...

高德+vue Object3DLayer强制刷新后找不到的问题

henghahouhei的博客

05-30

3910

高德+vue Object3DLayer 浏览强制刷新后找不到的问题

TypeError: AMap.Autocomplete is not a constructor

Chan_86的博客

09-23

3293

TypeError: AMap.Autocomplete is not a constructor已解决

vue使用高德地图 -- AMap.Autocomplete is not a constructor报错问题

weixin_44801790的博客

08-15

8611

vue使用高德地图 -- AMap.Autocomplete is not a constructor报错问题

AMap.Geocoder高德地图逆向地理编码（JS代码+对应数据展示前段代码）

04-09

楼主实战，根据自身需求加在对应位置即可——...不包含开发者Key，地图标点等其他高德地图API提供接口技术功能，只适用加进自身开发中项目，添加逆向地理编码功能。个别地方加了注释，不懂自行搜索或遇到问题联系楼主。

AMap.Geocoder高德地图逆向地理编码（JS代码+对应数据展示前段代码）附带效果图

04-09

不包含开发者Key，地图标点等其他高德地图API提供接口技术功能，只适用加进自身开发中项目，添加逆向地理编码功能。个别地方加了注释，不懂自行搜索或遇到问题联系楼主。(跟另一个内容相同，添加了效果图)。当点击...

高德地图返回地址详细信息

12-13

在IT行业中，高德地图是一款广泛应用的导航与地图服务软件，尤其在Android平台上深受开发者和用户的喜爱。"高德地图返回地址详细信息"这个主题主要涉及如何利用高德地图的API获取并处理地理位置的详细信息，包括但不...

ArcGIS API for JavaScript4.10加载高德地图

01-16

在本文中，我们将深入探讨如何使用ArcGIS API for JavaScript 4.10版本来加载高德地图，并结合高德地图的影像数据，实现自定义的GaodeMapLayer模块。ArcGIS API for JavaScript是一个强大的Web GIS开发工具，它允许...

vue中使用高德地图的坑

m0_67873602的博客

06-02

2411

Autocomplete时，首先是报错TypeError: AMap.Autocomplete is not a constructor，可以试下Autocomplete改成大写AutoComplete，然后就是下拉提示出不来时首先检查版本，key和密钥，然后就是层级的问题。.amap-sug-result的z-index设置高点；最后就是如果在同一个组件内如果使用两个地图组件，数据可能会混乱，或者是其中一个地图直接空白不显示，可能是因为两个容器的id，container的问题，改成不一样的id就解决了。

高德地图报错AMap.Autocomplete is not a constructor

qq_58657388的博客

12-21

1269

在plugins引用。

高德地图报错TypeError: undefined is not a constructor

橙子yq的代码世界

11-04

4150

高德地图在开发聚合和路线规划时报错TypeError: undefined is not a constructor(evaluating 'new n.Driving(map:pe)) found in ... 经排查, 原因是没有引入对应的插件, 我们来看看官方文档 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=密钥&plugin=AMap.Marke..

❤后端环境搭建---基于SpringBoot+MySQL+Vue+ElementUI+Mybatis+Redis前后端分离管理系统搭建MySQL（ windows ）

林太白

03-22

3864

❤后端环境搭建---基于SpringBoot+MySQL+Vue+ElementUI+Mybatis+Redis前后端分离管理系统搭建MySQL（ windows ）

❤ 使用框架篇

林太白

03-23

1561

❤使用框架篇

报错AMap.Driving is not a constructor

06-01

如果您在使用高德地图JavaScript API时遇到了“AMap.Driving is not a constructor”错误，这可能是因为您未正确引入Driving插件或引入方式不正确。您需要在HTML页面中正确引入AMap API和Driving插件，例如： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>地图示例</title> <script src="https://webapi.amap.com/maps?v=1.4.15&key=您的key值"></script> <script src="https://webapi.amap.com/ui/1.0/main.js"></script> <link rel="stylesheet" href="https://cache.amap.com/lbs/static/AMapUI-1.0-1.10.1.css"/> <script src="https://cache.amap.com/lbs/static/addToolbar.js"></script> </head> <body> <div id="mapContainer" style="height: 500px;"></div> <script> // 创建地图 var map = new AMap.Map('mapContainer', { center: [116.397428, 39.90923], zoom: 13 }); // 创建Driving对象 var driving = new AMap.Driving({ map: map, panel: 'panel' }); </script> </body> </html> ``` 上面的代码演示了如何正确引入高德地图API和Driving插件，然后创建Driving对象。如果您仍然遇到问题，请检查您的代码和API文档，以确保您正确地使用了Driving插件。