关于引入高德地图

原创已于 2022-08-17 16:08:48 修改 · 795 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #java

于 2022-08-17 11:09:52 首次发布

本文介绍了如何通过官方推荐的JSAPILoader加载AMap JSAPI，包括npm安装、配置加载选项，以及配合Element-uidialog组件的注意事项。重点在于简化地图API集成并避免常见错误。

（一）官方提供两种引入方式

1. 使用官网提供的 JSAPI Loader 进行加载

2. 以常规 JavaScript 脚本的方式加载；

3. 下面简单介绍 JSAPI Loader的方式

（二）官方推荐使用 JSAPI Loader (推荐)

JSAPI Loader是我们提供的 API 加载器，可帮助开发者快速定位、有效避免加载引用地图 JSAPI 各种错误用法

1. npm i @amap/amap-jsapi-loader --save

AMapLoader 有以下两个函数加载和重置

我们可以在load内配置key和经纬度.......等

如果需要配合Element-ui dialog 组件使用需要使用到插槽因为 dialog_body 是异步加载的

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Shenzhiyong159

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

maptalks-echarts-gl:echarts-gl添加maptalks支持，echarts-gl支持maptalks更多信息https

05-14

maptalks-echarts-gl echarts-gl添加maptalks支持举例： ================================== ================================================== ======= ================================================== ======== ================================================== ========== ============================== ============================= ================================ http://gallery.echartsjs.com/edit

vue项目引入高德地图

06-19

### Vue项目引入高德地图知识点详解 #### 一、引言随着Web应用的发展，地图功能已成为许多项目不可或缺的一部分。高德地图API以其丰富的功能、稳定的性能和良好的开发者支持，在地图服务领域占据了一席之地。对于...

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

史上最全第三方地图服务汇总【天地图/高德/百度/腾讯/谷歌地图等】—— 附加载示例

优吉斯(YouGIS) - 传播GIS技术, 分享行业知识，欢迎关注！

05-16

9483

Webgis开发过程中，我们一般使用第三方地图服务作为底图。本篇博文给大家介绍市面上常用的第三方地图服务，应该算的上是史上最全。如果需要转账，请注明转载出处： 1. 天地图矢量图地图 http://t{s}.tianditu.gov.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}&tk= 标注 http://t{s}.tianditu.gov.cn/DataServer?T=cva_w&X={x}&Y={y}

maptalk 高德底图

weixin_34247299的博客

12-13

1961

<!DOCTYPE html> <html> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Map - Display a map</title> <st...

百度、高德、腾讯、天地图、谷歌、必应地图切片切图工具 MapCutter，支持超大图、高清切片、webgl、leaflet、maptalk、openlayers、cesium等

热门推荐

Kevin Cheng's Yard

06-24

3万+

MapCutter 是制作覆盖图/瓦片图/金字塔图/游戏地图/切图切片的工具，它支持百度、腾讯、高德、天地图、谷歌、必应地图、MapBox等地图服务，是市面上最易用的同类软件，并支持js、webgl、leaflet、maptalks、openlayers、cesium 等地图网页输出，无偏移。可用于景区地图切图、遥感地图切图、游戏地图切图、虚拟城市地图、省市范围地图拼接等地图应用开发。

使用maptalks实现地图轨迹动画

weixin_42045264的博客

07-15

2506

使用maptalks实现地图轨迹动画实现效果：轨迹动画实现效果实现原理参考maptalks官方实例中点沿线的动画效果实现，由于官方实例中只是两点间的动画，并且marker没有方向的设置，比较简单。但在实际应用中我们通常需要在让点沿着几百上千个点构成的线有方向的动。在高德地图中存在这样的API，但在maptalks中却没有看到（也许是我没找到，尴尬~）这里主要是通过循环所有点，每次取两点进行一次动画效果，并计算两点间的角度设置marker点。运用了闭包的概念。话不多少，上代码 maptalk

如何使用maptalks自定义工具类创建与使用地图

2301_76501724的博客

09-13

1300

地图工具类的创建与使用

html引入高德地图demo

07-24

本示例"html引入高德地图demo"就是这样一个实例，它演示了如何在HTML文件中集成高德地图API，为用户提供地理位置相关的交互体验。高德地图API是高德地图提供的一套JavaScript接口，开发者可以利用它在自己的网页上...

精选资源

vue3引入高德地图代码示例

04-27

内容概要：项目引入高德地图用vue3实现地图功能适合人群：地图展示能学到什么：高德地图的一些基础功能的实现。阅读建议：基于高德地图开发的功能建议搭配高德开放平台的api一起使用

在vue项目中引入高德地图及其UI组件的方法

10-18

首先，在引入高德地图之前，需要去高德开放平台申请一个API Key。在获取了API Key后，就可以开始在Vue项目中集成高德地图了。集成的第一步通常是在项目的入口文件index.html中添加高德地图的JavaScript API引用。...

使用vue引入maptalks地图及聚合效果的实现

10-14

主要介绍了使用vue引入maptalks地图及聚合效果的实现，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

vue使用maptalks-gl-layer.js加载三维地图

Sparkling_Y的博客

12-16

1554

【代码】vue使用maptalks-gl-layer.js加载三维地图。

maptalks 坐标偏移问题

qq_34194057的博客

08-24

1162

因为国内对地理坐标有特殊的政策，所有电子地图必须对位置做偏移处理，这导致了从底层接口得到的经纬度坐标展示在地图上会有偏移。通过maptalks拿到初始化地图后的，将新偏移过的baselayer图层重新加载至map中。

maptalks加载两个地图让两个地图同步变化

workhard0905的博客

04-28

648

// 监听地图变化 map1.on('moving moveend', function (e) { map2.setCenter(e.target.getCenter()); }); map1.on('zooming zoomend', function (e) { map2.setCenterAndZoom(e.target.getCenter(), e.target.getZoom()); }); map1.on('pitch', function (e) { map2..

GIS工具maptalks开发手册(一)——hello world初始化

weixin_44867717的博客

12-01

3221

gis

vue引入maptalks地图及聚合效果

liona_koukou的博客

11-21

1万+

1、安装maptalks.js npm install maptalks --save 2、安装聚合mapkercluster npm install maptalks.markercluster 3、vue页面引入 import * as maptalks from 'maptalks' import {ClusterLayer} from 'maptalks.marker...

2020-12-08 使用maptalks添加自定义marker 并且让marker有一个动态的效果

workhard0905的博客

12-08

2545

使用maptalks添加自定义marker 并且做一个动态的效果 1.添加marker的方法（warnIcon是通过require方式导入的自定义图片） var marker = new maptalks.Marker(coordinate, { cursor: 'pointer', symbol: { markerFile: warnIcon.default, markerWidth: 40,

地图绘制初探——基于maptalks的2.5D地图绘制

weixin_33881753的博客

12-23

4771

进行图形可视化，难免会遇到地理数据的可视化需求。通常情况下，直接使用echarts对配置项进行处理，就可以满足大部分需求。当然，更加复杂的定制化需求，可能就需要借助d3、Three.js等工具。如果对详细的地图背景有要求的话，又需要将图形库与leaflet、maptalks等地图引擎相结合。不过也许你的需求和我一样，没有那么复杂的交互需求...

uniapp 引入高德地图