高德地图报错 Uncaught TypeError: AMap.Geocoder is not a constructor

最新推荐文章于 2025-01-17 09:41:07 发布
最新推荐文章于 2025-01-17 09:41:07 发布
阅读量5.2k 收藏 3
点赞数 5
CC 4.0 BY-SA版权
文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ZHUzhuzhu08/article/details/126289486
本文介绍了解决在谷歌等浏览器中地图定位出现的问题，并提供了一种通过加载AMap.Geocoder插件来修正定位精度的方法。

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

原本我是这样写的，但是在谷歌或者其他浏览器的时候就报错了，而且谷歌等浏览器，pc端是只能定位到附近的基站

 

出现这个报错可以添加  AMap.plugin("AMap.Geocoder",function(){})

ZHUzhuzhu08
关注
高德地图报错 TypeError: AMap.Geocoder is not a constructor
且听风吟的博客
03-30 3551
高德地图报错 TypeError: AMap.Geocoder is not a constructor
【解决】控制台报错Uncaught TypeError: Object(...) is not a function at eval (vue-router.esm-bundler.js
weixin_44541213的博客
04-01 6306
打开http://localhost:8080/，控制台报错 Uncaught TypeError: Object(...) is not a function at eval (vue-router.esm-bundler.js?f2fc:2127:1) at Object../node_modules/vue-router/dist/vue-router.esm-bundler.js (app.js:2218:1) at __webpack_require__ (app.js:
高德地图 - 地理编码报错：Uncaught TypeError: AMap.Geocoder is not a constructor
qq_53142442的博客
09-09 5654
在项目中使用高德地图的地址编码 let geocoder = new AMap.Geocoder(); 直接这样使用会报错 解决方法一 在添加入口脚本标签时， 加上 &plugin=Amap.Geocoder <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你的key&plugin=AMap.Geocoder"></script> 解决方法二 （
高德地图 - 逆地理编码报错：Uncaught TypeError: AMap.Geocoder is not a constructor
qq_40887780的博客
06-06 7827
前端项目中集成高德地图时，使用逆地理编码（坐标->地址） 会报错： 加个map.plugin 这样就ok了，map.plugin 表示高德地图插件
高德地图报错 AMap.Geocoder is not a construct
qq_41920758的博客
01-17 1389
getLocation 方法使用高德地图的Geocoder服务来解析省市县的地址，并返回对应的经纬度。你需要替换YOUR_AMAP_KEY为你的高德地图API的key，并且确保province、city和district数据是从你的Vue组件的数据中获取的。原本我是这样写的，但是在谷歌或者其他浏览器的时候就报错了，而且谷歌等浏览器，pc端是只能定位到附近的。
❤后端环境搭建---基于SpringBoot+MySQL+Vue+ElementUI+Mybatis+Redis前后端分离管理系统搭建MySQL（ windows ）
林太白
03-22 3958
❤后端环境搭建---基于SpringBoot+MySQL+Vue+ElementUI+Mybatis+Redis前后端分离管理系统搭建MySQL（ windows ）
vue安装高德地图
张小胖
10-10 824
<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 报错TypeError: this.$set is not a function 的解决方法
10-17
然而，当你遇到`TypeError: this.$set is not a function`的错误时，通常是因为`this`上下文没有正确指向Vue实例。下面我们将深入探讨这个问题及其解决方案。 ### 报错场景 在开发过程中，你可能在尝试将API获取的...
JQuery报错Uncaught TypeError: Illegal invocation的处理方法
10-24
然而，在使用jQuery过程中，开发者有时会遇到JavaScript控制台抛出“Uncaught TypeError: Illegal invocation”错误。这个错误通常不是由jQuery自身引起的，而是与JavaScript作用域及上下文有关。 当我们进行Ajax...
高德地图AMap.Map is not a constructor问题解决
热门推荐
shidaping的博客
11-15 7万+
这个问题说的是AMap.Map不是一个构造函数。原因就有于有一部分代码没有执行完毕。这是因为amap js里面有一部分是异步加载的，或者是我们在js中手动加载amap js导致的。amap js提供了一个callback回调，把创建地图的代码放在回调里即可。需要先创建一个全局函数，具体代码如下： window.init = function(){ var map =
高德地图报错AMap.Autocomplete is not a constructor
qq_58657388的博客
12-21 1482
在plugins引用。
vue使用高德地图报错：AMap.DistrictSearch is not a constructor问题解决
夏夏
08-06 1万+
这个问题说的 是没有初始化，解决如下： 参考：https://blog.csdn.net/shidaping/article/details/78537730
AMap.xxx is not constructor高德地图
weixin_43738272的博客
03-10 4482
AMap.xxx is not constructor 出现这个问题是map的插件还没有加载完。 解决办法: 在public文件夹下的index.html直接引入地图的sdk 注意点: 将使用到的插件&拼接到后面，如图中红框。 ...
Uncaught TypeError: AMap.MarkerClusterer is not a constructor
qq_32973061的博客
12-03 1万+
实验点聚合时报错：             cluster = new AMap.MarkerClusterer(map, markers, {                 styles: sts,                 gridSize: 80             });      改为： map.plugin(["AMap.MarkerClusterer"],func...
高德地图定位
qq_40885461的博客
04-14 1535
高德地图开放平台，获取key 获取key值后，将其在index.html中引入 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.13&key=3902ac46d78e575ee30697e17fc419fc"></script> 然后来到App.vue下，即根组...
在js中使用map的时候，出现了异常：Uncaught TypeError: map.get is not a function
sophialiana的博客
10-10 1956
原因：js中有两种声明map的方式。
【高德地图API】从零开始学高德JS API ——地址解析与逆地址解析
江湖行骗老中医
08-05 2934
摘要：无论是百度LBS开放平台，还是高德LBS开放平台，其调用量最高的接口，必然是定位，其次就是地址解析了，又称为地理编码。地址解析，就是将地址转换为经纬度。而逆地址解析，就是将经纬度转换为地址。经纬度一般是由专业测绘机构用GPS采集，然后使用国测局接口加密，最后呈现在互联网地图上的。而地址，这里说的是结构化的带街道门牌号的地址，比如“北京市朝阳区阜通东大街6号”，这个地址是由公安局颁发的。而将地址和经纬度一一对应起来，这个就是高德地图做的事情了，也就是地址解析接口的功能了。地址解析功能，实用性强，调用频次
调用高德逆地理接口_地理编码与逆地理编码
weixin_30767895的博客
12-30 850
本章主要介绍如何将地址描述信息和地理坐标做相互转化，主要包括以内容：正向地理编码逆向地理编码地理编码服务地理编码包含正向地理编码和逆向地理编码两种：正向地理编码： 将地址描述信息转换成地理坐标(经纬度)，对应为AMap.Geocoder的getLocation方法逆向地理编码：将地理坐标(经纬度)转换成地址描述信息，对应为AMap.Geocoder的getAddress方法高德JS API提供AM...
Map.vue:83 初始化主地图失败: TypeError: Cesium.WorldTerrain is not a constructor at initMainMap (Map.vue:50:24) at Map.vue:199:3 at runtime-core.esm-bundler.js:2836:40 at callWithErrorHandling (runtime-core.esm-bundler.js:199:19) at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:206:17) at hook.__weh.hook.__weh (runtime-core.esm-bundler.js:2816:19) at flushPostFlushCbs (runtime-core.esm-bundler.js:385:28) at render2 (runtime-core.esm-bundler.js:6048:7) at mount (runtime-core.esm-bundler.js:3962:13) at app.mount (runtime-dom.esm-bundler.js:1775:19) initMainMap @ Map.vue:83 (匿名) @ Map.vue:199 (匿名) @ runtime-core.esm-bundler.js:2836 callWithErrorHandling @ runtime-core.esm-bundler.js:199 callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:206 hook.__weh.hook.__weh @ runtime-core.esm-bundler.js:2816 flushPostFlushCbs @ runtime-core.esm-bundler.js:385 render2 @ runtime-core.esm-bundler.js:6048 mount @ runtime-core.esm-bundler.js:3962 app.mount @ runtime-dom.esm-bundler.js:1775 (匿名) @ main.ts:8 Map.vue:132 初始化鹰眼地图失败: TypeError: Cesium.RectanglePrimitive is not a constructor at initOverviewMap (Map.vue:122:32) at Map.vue:200:3 at runtime-core.esm-bundler.js:2836:40 at callWithErrorHandling (runtime-core.esm-bundler.js:199:19) at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:206:17) at hook.__weh.hook.__weh (runtime-core.esm-bundler.js:2816:19) at flushPostFlushCbs (runtime-core.esm-bundler.js:385:28) at render2 (runtime-core.esm-bundler.js:6048:7) at mount (runtime-core.esm-bundler.js:3962:13) at app.mount (runtime-dom.esm-bundler.js:1775:19) initOverviewMap @ Map.vue:132 (匿名) @ Map.vue:200 (匿名) @ runtime-core.esm-bundler.js:2836 callWithErrorHandling @ runtime-core.esm-bundler.js:199 callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:206 hook.__weh.hook.__weh @ runtime-core.esm-bundler.js:2816 flushPostFlushCbs @ runtime-core.esm-bundler.js:385 render2 @ runtime-core.esm-bundler.js:6048 mount @ runtime-core.esm-bundler.js:3962 app.mount @ runtime-dom.esm-bundler.js:1775 (匿名) @ main.ts:8 localhost/:1 Uncaught (in promise) SyntaxError: Unexpected token '<', "<!doctype "... is not valid JSON at JSON.parse (<anonymous>) at Resource.js:1180:17 (匿名) @ Resource.js:1180 localhost/:1 Uncaught (in promise) SyntaxError: Unexpected token '<', "<!doctype "... is not valid JSON at JSON.parse (<anonymous>) at Resource.js:1180:17 如上所示报错，修改下面代码：<template> <div class="map-container"> <!-- 主地图容器 --> <div id="cesiumContainer" class="main-map"></div> <!-- 鹰眼地图容器 --> <div id="overviewMap" class="overview-map"></div> </div> </template> <script setup lang="ts"> import { onMounted, onUnmounted, ref } from 'vue'; import * as Cesium from 'cesium'; import 'cesium/Build/Cesium/Widgets/widgets.css'; // 株洲市范围常量 const ZHUZHOU_EXTENT = new Cesium.Rectangle( Cesium.Math.toRadians(112.5), // west Cesium.Math.toRadians(26.0), // south Cesium.Math.toRadians(114.5), // east Cesium.Math.toRadians(28.0) // north ); // 地图实例引用 const mainViewer = ref<Cesium.Viewer | null>(null); const overviewViewer = ref<Cesium.Viewer | null>(null); const rectanglePrimitive = ref<Cesium.RectanglePrimitive | null>(null); // 初始化主地图 const initMainMap = async () => { try { // 设置Cesium访问令牌 Cesium.Ion.defaultAccessToken = "YOUR_CESIUM_ACCESS_TOKEN"; // 创建主地图实例 mainViewer.value = new Cesium.Viewer('cesiumContainer', { sceneMode: Cesium.SceneMode.SCENE3D, animation: false, baseLayerPicker: false, fullscreenButton: true, geocoder: false, homeButton: true, infoBox: false, sceneModePicker: true, selectionIndicator: true, timeline: false, navigationHelpButton: false, shouldAnimate: true, // 修复地形创建方式 terrainProvider: new Cesium.WorldTerrain({ requestVertexNormals: true, requestWaterMask: true }), imageryProvider: new Cesium.UrlTemplateImageryProvider({ url: "http://124.232.190.30:9000/proxy/pk1725866655224/map/zzzsyx_18/{z}/{x}/{y}.png", minimumLevel: 1, maximumLevel: 17 }) }); // 设置初始视图到株洲市范围 mainViewer.value.camera.flyTo({ destination: ZHUZHOU_EXTENT, orientation: { heading: Cesium.Math.toRadians(0), pitch: Cesium.Math.toRadians(-30), roll: 0.0 }, duration: 2.0 }); // 添加错误处理 mainViewer.value.scene.globe.tileLoadProgressEvent.addEventListener((pending) => { if (pending === 0) { console.log('所有瓦片加载完成'); } }); mainViewer.value.scene.error.addEventListener((error) => { console.error('Cesium错误:', error); }); } catch (error) { console.error('初始化主地图失败:', error); } }; // 初始化鹰眼地图 const initOverviewMap = () => { try { // 创建鹰眼地图实例 overviewViewer.value = new Cesium.Viewer('overviewMap', { sceneMode: Cesium.SceneMode.SCENE2D, baseLayerPicker: false, fullscreenButton: false, geocoder: false, homeButton: false, infoBox: false, sceneModePicker: false, selectionIndicator: false, timeline: false, navigationHelpButton: false, animation: false, imageryProvider: new Cesium.ArcGisMapServerImageryProvider({ url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer' }) }); // 隐藏不需要的控件 overviewViewer.value.cesiumWidget.creditContainer.style.display = "none"; // 设置鹰眼地图范围 overviewViewer.value.camera.setView({ destination: new Cesium.Rectangle( Cesium.Math.toRadians(110.0), // west Cesium.Math.toRadians(24.0), // south Cesium.Math.toRadians(116.0), // east Cesium.Math.toRadians(30.0) // north ) }); // 添加株洲市范围指示器 rectanglePrimitive.value = new Cesium.RectanglePrimitive({ rectangle: ZHUZHOU_EXTENT, material: Cesium.Color.RED.withAlpha(0.3), outline: true, outlineColor: Cesium.Color.RED, outlineWidth: 2 }); overviewViewer.value.scene.primitives.add(rectanglePrimitive.value); } catch (error) { console.error('初始化鹰眼地图失败:', error); } }; // 同步主地图和鹰眼地图 const syncMaps = () => { try { if (!mainViewer.value || !overviewViewer.value || !rectanglePrimitive.value) return; // 监听主地图相机变化 mainViewer.value.camera.changed.addEventListener(() => { const camera = mainViewer.value!.camera; // 计算当前视图范围 const rectangle = camera.computeViewRectangle(); if (rectangle) { // 更新鹰眼地图中的矩形 rectanglePrimitive.value!.rectangle = rectangle; // 更新鹰眼地图视角（如果矩形超出当前视图） const overviewCamera = overviewViewer.value!.camera; const overviewRectangle = overviewCamera.computeViewRectangle(); if (overviewRectangle && !Cesium.Rectangle.contains(overviewRectangle, rectangle)) { // 扩展矩形以包含当前视图 const expandedRect = new Cesium.Rectangle( Math.min(overviewRectangle.west, rectangle.west), Math.min(overviewRectangle.south, rectangle.south), Math.max(overviewRectangle.east, rectangle.east), Math.max(overviewRectangle.north, rectangle.north) ); overviewCamera.flyTo({ destination: expandedRect, duration: 0.5 }); } } }); // 鹰眼地图点击事件 overviewViewer.value.screenSpaceEventHandler.setInputAction((click: any) => { const position = click.position; const ray = overviewViewer.value!.camera.getPickRay(position); const cartesian = overviewViewer.value!.scene.globe.pick(ray, overviewViewer.value!.scene); if (cartesian) { // 主地图跳转到点击位置 mainViewer.value!.camera.flyTo({ destination: cartesian, orientation: { heading: mainViewer.value!.camera.heading, pitch: mainViewer.value!.camera.pitch, roll: 0.0 }, duration: 1.0 }); } }, Cesium.ScreenSpaceEventType.LEFT_CLICK); } catch (error) { console.error('地图同步失败:', error); } }; // 组件挂载时初始化地图 onMounted(() => { initMainMap(); initOverviewMap(); // 等待地图初始化完成后再同步 setTimeout(syncMaps, 1000); }); // 组件卸载时销毁地图实例 onUnmounted(() => { try { if (mainViewer.value) { mainViewer.value.destroy(); mainViewer.value = null; } if (overviewViewer.value) { overviewViewer.value.destroy(); overviewViewer.value = null; } } catch (error) { console.error('销毁地图实例失败:', error); } }); </script> <style> /* 全局重置样式 */ * { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; height: 100%; overflow: hidden; /* 防止滚动条 */ font-family: sans-serif; } </style> <style scoped> .map-container { position: fixed; /* 使用 fixed 定位 */ top: 0; left: 0; width: 100%; height: 100%; /* 使用 100% 高度 */ overflow: hidden; /* 隐藏溢出内容 */ background-color: #1e1e1e; /* 深色背景防止白色间隙 */ } .main-map { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .overview-map { position: absolute; bottom: 20px; right: 20px; width: 300px; height: 200px; border: 2px solid #fff; box-shadow: 0 0 15px rgba(0, 0, 0, 0.7); z-index: 100; background-color: #000; /* 添加背景色 */ border-radius: 4px; /* 圆角 */ } /* 响应式调整 */ @media (max-width: 768px) { .overview-map { width: 150px; height: 100px; bottom: 10px; right: 10px; } } </style> 同时如图所示，顶部菜单栏的样式存在问题，蓝色部分太长了，都到了下面了，基于此修改代码发我
最新发布
07-09
1. `Cesium.WorldTerrain is not a constructor`：说明在使用的Cesium版本中，`WorldTerrain`可能不是这样调用的。 2. `Cesium.RectanglePrimitive is not a constructor`：同样，可能是API变更导致。 另外，还有...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值