记一次高德地图引入 AMap is not defined 血坑
步骤:
1 在pubic文件夹下的index.html中引入高德地图的js文件
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=自己申请的key&plugin=AMap.CitySearch"></script>
2 在methods中写一个获取位置的方法
getLngLatLocation() {AMap.plugin('AMap.CitySearch', function () {var citySearch = new AMap.CitySearch();citySearch.getLocalCity(function (status, result) {if (status === 'complete' && result.info === 'OK') {// 查询成功,result即为当前所在城市信息console.log('通过ip获取当前城市:', result)//逆向地理编码AMap.plugin('AMap.Geocoder', function () {var geocoder = new AMap.Geocoder({// city 指定进行编码查询的城市,支持传入城市名、adcode 和 citycodecity: result.adcode})var lnglat = result.rectangle.split(';')[0].split(',');geocoder.getAddress(lnglat, function (status, data) {if (status === 'complete' && data.info === 'OK') {// result为对应的地理位置详细信息console.log(data)}})})}})})}
3 mounted中调用。
结果报错:AMap is not defined
以下是网上的常用几种方法:
1 把<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=自己申请的key&plugin=AMap.CitySearch"></script>放到body中,结果依旧报这个错
2 把eslintrc.js文件中加入
"globals": {"AMap": "true","AMapUI":"true"},
测试结果:没什么暖用
摸索了很久,终于找打了解决这个问题的办法:
异步回调(以下是正确的解法)
--------------------------------------------------------------------------------------------------
1 导出一个函数,动态加载(导出函数的目的是为了方便其他地方也用到)
export const amap=function(key){return new Promise(resolve=>{let url=`https://webapi.amap.com/maps?v=2.0&key=${key}&plugin=AMap.CitySearch&callback=AMapLoad`let script=document.createElement("script");script.src=url;document.body.appendChild(script);window.AMapLoad=function(){resolve(window.AMap)}})}
2 在需要用到的页面的mounted里执行这个函数
amap("申请的key的值").then((amap) => {this.getCityLoaction(amap); //这个amap就是高德的地图对象Map});
3 在methods中写获取城市信息的具体逻辑
methods:{getCityLoaction(MAP) {var citysearch = new MAP.CitySearch();citysearch.getLocalCity((status, result) => {if (status === "complete" && result.info === "OK") {if (result && result.city && result.bounds) {var cityinfo = result.city;var citybounds = result.bounds;this.curCity = result.city;console.log("当前城市", result);}} else {this.curCity = "全部";}});},}
以上即可解决这个问题
记一次高德地图引入 AMap is not defined 血坑相关推荐
- 在高德地图使用: AMap is not defined
高德模板原版引入: <script language="javascript" src="//webapi.amap.com/maps?v=1.4.15&k ...
- vue人员轨迹_在vue中高德地图引入和轨迹的绘制的实现
高德地图引入和轨迹的绘制 1.第一步 vue中使用cdn引入高德地图,并在main.js中进行全局配置.(百度上有高德地图引入与配置方法,这里就不详细介绍): 1)npm install vue-am ...
- vue是否可以做行车轨迹_在vue中高德地图引入和轨迹的绘制的实现
高德地图引入和轨迹的绘制 1.第一步 vue中使用cdn引入高德地图,并在main.js中进行全局配置.(百度上有高德地图引入与配置方法,这里就不详细介绍): 1)npm install vue-am ...
- 高德地图引入Vue添加POI搜索功能、marker点标记、通过经纬度逆编码过程
安装高德地图 npm i @amap/amap-jsapi-loader --save 引入 import AMapLoader from '@amap/amap-jsapi-loader'; *在组 ...
- VUE 记一次高德地图和Echarts(中国地图)
效果图 准备工作 高德地图申请key 安装Echarts 中国地图 高德地图 官方API:点我进入 创建AMap.js export default function MapLoader () {re ...
- vue-amap高德地图刷新空白 高德刷新提示 AMap is not defined解决
症状 首次加载正常 刷新后地图不显示提示 AMap is not defined 依据其他帖子使用window.AMap,依旧不得行 诊断 npm安装配置在main(这个配置刷新不出地图),即需要做如 ...
- 高德地图api @amap/amap-jsapi-loader封装成方法(定位、点标记、路径规划、搜索等) 适用于vue等框架
高德地图api 封装成公共方法用于项目中 目前封装的方法有 定位 点标记 比例尺插件 信息窗体 经纬度附近搜索 关键字搜索 交通路径规划(经纬度或地点名) 步行路径规划(经纬度或地点名) 经纬度获取地 ...
- 高德地图 web 端 JS API 遇到的坑及性能优化
[JS API V2.0] 本指望全面提升一下性能,结果发现一些硬伤,迫不得已转到1.4.15版本,先说一下最新的v2.0的问题. 因为务业需要规划线路,但是这个版本中,规划线路,并且经过中间点时,部 ...
- 高德地图使用AMap.DrivingPolicy.LEAST_DISTANCE报错
报错: Cannot read properties of undefined (reading 'LEAST_DISTANCE') 原因:在引入js的时候加上&plugin=AMap.Dri ...
- vue3怎么引入高德地图
1.在高德开发平台申请你的key高德开发平台 2.在public/index.html引入高德的cdn <script type="text/javascript" src= ...
最新文章
- 使用正则替换文件头注释
- 前端学习(239):渐进增强和优雅降级
- iOS 测试三方 KIF 的那些事
- 【Java】文件操作
- Angular 学习笔记——拖拽
- sqlserver备份还原丢失dbo_sqlserver数据库的备份与恢复sql实现
- 如何理解数列极限和收敛性
- oracle11g rman实例,oracle11g rman备份与恢复详细实例
- python导入鸢尾花数据集_python可视化分析鸢尾花数据集
- AB触摸屏2711P-T12W22A9P、2711P-T10C4A9,2711P-T10C22D8S-B、2711P-T10C22D9P-B、2711P-T12C10D2
- Docker安装JanusGraph
- EXCEL绘制均值极差控制图
- n维空间被m个n-1维的“刀”最多切出多少块
- C语言 switch 条件语句
- 人工智能芯片产业生态和竞争格局
- STM32F4+FreeRTOS+FreeRTosTcpIp移植教程
- 华为鸿蒙亮利剑,华为P50pro亮利剑,鸿蒙OS+徕卡五摄+5400mAh,这才是华为
- 使用restTemplate启动报错:Field restTemplate in com.demo.service.OrderToMemberService required a bean of ty
- Android横竖屏屏幕方向设置
- 【转】基于OAI-PMH的元数据搜索引擎的设计与实现