Angular使用高德地图时遇到无法在地图方法类中使用this关键字的问题

最新推荐文章于 2023-03-01 14:52:54 发布
最新推荐文章于 2023-03-01 14:52:54 发布
阅读量381 收藏
点赞数
分类专栏： Angular+NgAlain 前端坑的小积累
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42196055/article/details/104778390
版权

在项目中使用了高德组件，当使用到一些地图方法比如图中这种搜索后需要获得经纬度，

我一开始获取经纬度时 直接在function(){} 里面用this.lng this.lat，发现无论怎样都失效，consloe.log可以读到方法里的数据，就是拿不下来，情急之下直接使用了localStorage，甚至边写边骂高德地图。

后来发现，和高德毛关系都没有，原来是我基础太差了。

遇到这种问题需要使用到箭头函数，如下使用一个地图定位的例子：

需要改成：

嘤嘤嘤

白白白白桃乌龙
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Angular中使用MathJax遇到的一些问题
08-28
Angular中使用MathJax遇到的一些问题 MathJax 是一个运行在浏览器中的开源数学符号渲染引擎，使用 MathJax 可以方便地在浏览器中显示数学公式，不需要使用图片。 MathJax 可以解析 Latex、MathML 和 ASCIIMathML ...
react简单入门-组件点击事件的函数无法访问this
m0_46694056的博客
12-03 1093
*场景：首先你能来看本篇文章，那说明你的代码有可能类似是这样： 当点击按钮，调用test函数，结果打印this的时候，或者说想在test函数里面访问this的一些属性的时候，控制台却是undefined 如果说你只是单纯地想解决问题的话，有如下解决方案，直接挑选如下你想要的方案代码即可run了，但是你要想多了解一下的话，还请继续往下看。 方案一： 方案二： 方案三： 方案四： 解决思路： 导致问题的原因：首先在class类里面的函数，它是无法自己绑定这个函数的this的，所以说你就只能自己手动
高德地图markevents_高德地图API
weixin_32974061的博客
01-12 508
1 2 3 4 56 7 8 9 10 11 12 13 14 15 16 ...
vue高德地图 各种配置不生效问题
qq_46491381的博客
03-01 917
vue高德地图 各种配置不生效问题
angular4与高德地图的结合
NemoWey的博客
09-04 6454
angular 4 与高德地图的结合 最近有用angular 4、项目中要用到高德地图,于是研究了一番,现在分享给大家。 PS:以大漠老师的NiceFish(地址：http://git.oschina.net/mumu-osc/NiceFish)为例给大家一步一步分享展示！ 1、在大漠老师的码云上将代码Down下来后，安装node_modules,建议走cnpm install,毕竟是
Angular4中引入高德地图
weixin_39478982的博客
09-11 674
*先去官网申请所需要的key https://lbs.amap.com/api/webservice/guide/create-project/get-key 第一步，引入高德地图api，注意使用自己的web端js api key 第二步，声明AMap 第三步，html中写地图容器，设置样式大小 第四步，ts中写地图内容 然后地图就出现了~ ...
在 Angular中 使用 Lodash 的方法
08-28
在 Angular 中使用 Lodash 的方法是非常有用的，因為 Lodash 是 JavaScript 中一個非常流行的庫，提供了許多實用的函數，例如處理陣列、物件、字符串等。下面我們就來詳細介紹在 Angular 中使用 Lodash 的方法。 ...
详解在Angular4中使用ng2-baidu-map的方法
10-16
本文将详细介绍如何在Angular4项目中使用ng2-baidu-map。 首先，为了使用ng2-baidu-map，你需要在项目中进行安装。通过npm命令行工具，执行以下命令来安装这个库： ```bash npm install angular2-baidu-map ``` ...
如何在Angular2中使用jQuery及其插件的方法
10-20
本篇文章主要介绍了如何在Angular2中使用jQuery及其插件的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
在 Angular 中实现搜索关键字高亮示例
12-01
但是，在有些情况下，比如我们有一个搜索框，希望将搜索的关键字在正文中高亮出来，这时候就会感觉比较吃力了，filter 可以帮助我们处理这种情况。 实际上，很多时候，我们的数据是不能直接输出到 DOM 中的，典型的...
angular2百度地图组件
08-10
基于angular2的百度地图组件，该组件主要实现百度地图的异步加载，有关配置部分，大家还是跟着百度地图官方api文档来操作。
angular使用高德地图
qwe1314225的博客
08-27 2164
开发环境 Angular CLI: 8.3.29 Node: 10.17.0 OS: win32 x64 Angular: 8.2.14 准备工作 去高德地图注册帐号，成为开发者，实名认证（支付宝扫码的方式） 创建应用 创建key（最关键的一步） github仓库地址 开始 创建项目 创建一个myworld的项目 ng new myworld 安装高德地图的开发依赖 开发文档链接 根据文档，里面有多种安装依赖的方式，我这边采用npm 安装 npm i @amap/amap-jsapi-loader
【angular】——高德地图结合angular4获取地图中某一点信息
给你一半糖
02-12 3541
高德demo地址：http://lbs.amap.com/api/javascript-api/example/amap-ui-poipicker/index高德地图结合angular4 实现下拉框获取某一个点的poi信息。实现步骤：第一步：在index.html中引入高德地图相关api。根据具体项目的需求建立不同的项目获取不同key值     <link rel="stylesheet" ...
Angular2 引用高德地图
qq_24582305的博客
07-30 1354
（1）在全局中引用高德地图api（楼主在index.html 里引用） <script src="http://webapi.amap.com/maps?v=1.4.6&key=你的高德key值"></script> （2）在各个组件中引用高德地图 component.ts 文件 public ngOnInit() { const mapOb...
angualr6高德地图UI的使用
CHL博客
07-10 1490
1.index.html： <!--引入高德地图JSAPI --> <script src="http://webapi.amap.com/maps?v=1.4.3&key=自己申请的key"></script> <!--引入UI组件库（1.0版本） --> <script src="//webapi.amap.com/ui...
angular 6引入高德地图
CHL博客
07-10 5746
一：申请高德地图key：     https://lbs.amap.com/dev/key/app二：inde.html 里：&lt;script src="http://webapi.amap.com/maps?v=1.4.3&amp;key=填入你申请的key"&gt;&lt;/script&gt;三：在想要做地图的组件：1.html:&lt;div id='container' style=...
angular引入高德地图
web
08-09 1300
推荐网址 高德地图api: https://lbs.amap.com/ 高德地图api使用手册：https://lbs.amap.com/api/javascript-api/guide/abc/quickstart 高德在线测试地址： https://lbs.amap.com/demo/javascript-api/example/map-lifecycle/map-show 注意：非angularjs 1、准备工作 首先，注册开发者账号，成为高德开放平台开发者 登陆之后，在进入「应用管理」 页面
Angular2地图的使用、地图画线、高德底图切换、图标变换等
对雪书空武
09-05 472
&#13; 一、map.service文件 import { Injectable } from '@angular/core';   import * as ol from 'openlayers'; import * as coordtransform from 'coordtransform';   import { DITU_SERVER_URL, CQ_DITU_S...
ionic使用angular在高德地图在获取定位的时候页面弹出提示正在定位请等待
最新发布
03-29
首先，在您的页面中导入LoadingController： ```typescript import { LoadingController } from '@ionic/angular'; ``` 然后，您可以在获取定位之前创建一个加载控制器： ```typescript async presentLoading() {...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值