记一次高德地图引入 AMap is not defined 血坑

news/2024/11/25 8:27:45/

步骤:

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 = "全部";}});},}

以上即可解决这个问题


http://www.ppmy.cn/news/427034.html

相关文章

vue-amap(vue 地图)

亲测可用&#xff0c;若有疑问请私信 官网&#xff1a;组件 | vue-amap 昨天把vue的地图&#xff08;高德&#xff09;搞了下&#xff1a; 步骤&#xff1a; 1.去高德开发者平台申请key&#xff1b; 2.安装vue-amap&#xff1b; 3.使用组件调用地图 1.npm安装vue-amapnpm ins…

MapboxMap 加载Amap地图图源

MapboxMap 展示Amap地图 MapBox添加切片图源RasterSourceRasterLayer展示Amap地图上图 MapBox添加切片图源 本文中 Amap切片图源 来源于网络。目的为学习研究&#xff01;如果商用请注意版权问题。 功能实现主要借助RasterSource与RasterLayer。 RasterSource 栅格源&#x…

VUE——vue-amap简单使用

一、 down一个vue webpack的模板 vue init webpack vueamap根据提示完成模板下载&#xff0c;此处我的项目中选择router为yes 其他测试插件全为no vueamap为文件夹名称 模板下载后 安装依赖 cnpm install 依赖安装完成后 执行开发环境 npm run dev 若提示在"localhost…

在VUE中导入高德地图组件模块(vue-amap)

在VUE中导入高德地图组件模块 写在开头高德地图组件官方链接1、创建VUE项目2、在vue项目中导入高德地图组件3、修改地图尺寸4、最后效果5、写在结尾 写在开头 创建vue工程并将vue-amap导入到vue工程中 本文章参考 高德地图组件官方链接 vue-amap的guthub链接 高德开放平台官…

windowsapps文件夹可以删除吗_手机文件夹英文名称代表什么意思?哪些可以真正删除,涨见识了...

经常在网上看到有小伙伴问手机文件中的英文名称代表了什么意思&#xff1f;可以删除吗&#xff1f;当手机内存不够的时候&#xff0c;大家都会选择清理一些不需要保存的文件夹&#xff0c;但是往往在删除的时候都会误删一些数据&#xff0c;今天就来告诉大家手机文件夹究竟哪些…

安卓系统目录说明大全,各文件夹是什么,可以删除吗?(以MIUI为例)

由于安卓生态较为混乱&#xff0c;开发人员素质参差不齐&#xff0c;安卓手机的目录总是很混乱。有些像我一样有强迫症的人就喜欢清理一些没用的文件或文件夹&#xff0c;还自己手机一个清净之所。 而且在卸载一些app之后&#xff0c;可能还会在手机里残存一下文件夹或者垃圾文…

Android高德地图基本开发/在线高德离线地图开发/断网使用离线地图(Assets文件夹的使用)

文章目录 高德SDK基本使用前置操作需求一&#xff1a;显示地图&#xff0c;并以当前所在位置为中心权限申请布局功能代码活动功能代码效果展示 需求二&#xff1a;离线地图(直接添加到应用端项目内)需求三 &#xff1a;点击数据后以数据的经纬度为中心显示需求四 &#xff1a;把…

戴尔Vostro电脑开机总是蓝屏怎么重装系统教学

戴尔Vostro电脑开机总是蓝屏怎么重装系统教学。最近有一些用户使用戴尔Vostro电脑时&#xff0c;遇到了系统不兼容问题导致蓝屏的问题。系统不兼容的情况&#xff0c;我们可以重新安装其他的系统来使用&#xff0c;这样就可以避免不兼容问题导致的蓝屏情况出现了。那么怎么去进…