【更新中...】1.4.15版本,高德地图从0到1开发

置顶 已于 2023-12-05 19:28:30 修改
阅读量539 收藏 9
点赞数 11
分类专栏： 地图 文章标签： javascript vue.js 前端 npm 前端框架
于 2023-12-05 19:27:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hzz490277727/article/details/134815215
版权

高德地图 JS API 是一套 JavaScript 语言开发的的地图应用编程接口

本篇文章是把个人发布的其它关于地图(1.4.15)的文章做了一个整合,方便读者快速找到自己想要的知识点,同时也是个人做的一个积累,如果有异议,欢迎讨论.

1.高德地图初始化
2.高德地图创建Marker点
Vue.js 集成高德地图：从零开始的实战指南
liyananweb的博客
07-18 542
通过以上步骤，我们成功地在 Vue.js 项目中集成了高德地图。我们从项目初始化开始，逐步配置并创建了一个简单的地图组件。希望这篇指南能帮助你更好地理解如何在 Vue.js 项目中使用高德地图。如果你有任何问题或建议，欢迎在评论区留言。多模型AI聚合平台，AI模型换着用，立即体验 👉:AI多模型聚合平台。
Vue.js 加入高德地图的实现方法
圣人男的博客
11-29 1860
1.根据输入内容进行模糊查询，选择地址后在地图上插上标记，并更新经纬度坐标显示。2.初始化成功后、添加事件监听：地图点击、模糊查询。1.在mounted（）中调用 initMap ()初始化地图。2.在地图点击后，根据回传的左边更新地址信息和坐标显示。2.在应用管理中 获得key 和安全密钥。四、防止在使用中AMap无法识别问。1.申请高德地图账号，创建应用。三、在webstorm中安装。在文件中导入 map.js方法。5.封装好的js文件方法。
高德地图创建Marker点,1.4.15版本
hzz490277727的博客
12-05 1519
本篇文章分享一下如何自定义创建一个或多个marker点1.首先引入高德地图的JavaScript API文件：
高德API-1.4.15操作设置
weixin_70778799的博客
01-02 1054
基本设置就是需要key和密钥，引入两个东西，拿网站举例如果出现没有。5、重点：出现了key和密钥，早年只用key就可以，但是现在如果你想使用POI搜索必须要两个都用放入你的代码中。如果只是简单的修复或调用可以使用→方式二直接引入，修改版本号。7、找到自己的要引入高德的版本如1.4.15（详细设置请看完《准备》这里的手册）8、测试引入第二个方式：填写你账号上新建应用的key和密钥两个不同的东西。1、首先进入高德API申请账号，认证个人或企业认证。）详细的引入方式在高德API的教程→准备。
高德地图JS API升级到2.0版本
weixin_47359038的博客
07-28 1801
项目上反馈高德地图底图信息更新不及时，不利于进行点位规划。经研究发现高德地图JS API 1.4.15版本相对于2.0版本，确实地图切片上的标注信息较少。通过工单的形式询问高德的技术工程师认识到1.4.15版本数据更新有延迟，1.4.15版本地图的数据以季度为周期更新，2.0版本的按月更新。于是将产品中的高德地图从1.4.15版本升级到2.0版本，但是在地图版本升级时碰到了一系列的问题，将碰到的问题以及问题的解决措施记录下来，方面后期的维护工作。
高德地图1.4.15楼层处理
星是河的眼的博客
08-17 847
接入了高德1.4.15JS API的项目中使用了mapStyle: ‘amap://styles/grey’,在这个模式下楼层几近透明，方案一是升级到2.0然后加wallColor（表示建筑物墙面的颜色）和roofColor（表示建筑物屋顶的颜色），但是升级到2.0之后问题很多。方案二是通过AMap.Buildings来设置楼层颜色。
高德获取servlet传递参数并显示.zip_chartlgy_servlet_高德_高德地图
09-15
总结一下，这个例子展示了如何在Servlet中处理请求参数，将其传递到JSP页面，并结合高德地图API在页面上展示地图信息。这是一个典型的Java Web开发流程，涵盖了Servlet、JSP和第三方API的集成使用。通过这种方式，...
基于 React 封装的高德地图组件，助你轻松的接入高德地图到 React 项目中。.zip
01-05
version: '1.4.15', // 高德地图版本号 plugins: ['AMap.Marker'], // 需要加载的插件，这里我们仅示例了Marker }).then((AMap) => { // 初始化地图 const map = new AMap.Map(mapRef.current, { zoom: zoom |...
JS基于高德地图定位城市闪烁特效.zip
10-09
这里的`YOUR_AMAP_KEY`需要替换为你的高德地图API密钥，你可以从高德地图开放平台申请。 接下来，我们创建一个地图容器，并初始化地图： ```html ; height: 500px;"> var map = new AMap.Map('map', { zoom: 12...
高德地图初始化,1.4.15版本
hzz490277727的博客
12-04 784
高德地图 JS API 是一套 JavaScript 语言开发的的地图应用编程接口，移动端、PC端一体化设计，一套API 兼容众多系统平台。若您以非商业目的使用 JS API，则可以免费使用。若您以商业目的使用，则您需事先从高德获取商用授权。JS API 提供了2D、3D地图模式，满足绝大多数开发者对地图展示、地图自定义、图层加载、点标记添加、矢量图形绘制的需求，同时也提供了 POI 搜索、路线规划、地理编码、行政区查询、定位等众多开放服务接口。
js使用高德地图进行地点标注
m0_73481765的博客
06-30 1695
【代码】js使用高德地图进行地点标注。
高德地图的前端JS调用方法（课堂笔记）
weixin_73218936的博客
06-06 1617
个人程序开发以后要用。
【js&高德地图】使用js对高德地图的常用操作添加地图控件、标记点、标记多边形、搜索、天气预报
阿晨的博客
08-16 1781
【js&高德地图】使用js对高德地图的常用操作添加地图控件、标记点、标记多边形、搜索、天气预报
用js引入高德地图
chen97a97的博客
09-26 2299
2.引用高德3D版地图。
【高德地图】vue使用高德地图（js api）
m0_70950838的博客
07-16 3981
vue中使用高德JSapi，添加点标记以及其他覆盖物，高德JSapi的常用操作
JS 手撸高德地图导航
最新发布
m0_74223728的博客
10-23 1159
由于实时导航功能需要复杂的逻辑和很高的性能要求，再加上PC端没有导航的需求，或者根本就没有GPS模块。高德并没有像移动端SDK那样直接提供 web 端的实时导航 API。但是前端开发中不可避免的需要用到导航相关的功能，然而我们目前只有一个可怜的路线规划功能。其实想要实现web端实时导航也不是一件不可能的事儿，接下来我将使用高德 路线规划+浏览器高精度定位 实现一个基本可用的导航逻辑。bash代码解读复制代码。
高德地图 web 端 JS API 遇到的坑及性能优化
热门推荐
sflf36995800的博客
05-28 1万+
【JS API V2.0】 本指望全面提升一下性能，结果发现一些硬伤，迫不得已转到1.4.15版本，先说一下最新的v2.0的问题。 因为务业需要规划线路，但是这个版本中，规划线路，并且经过中间点时，部分window 7 旗舰 chrome 报错，报错信息:Uncaught Error: createProgram fail chrome 版本 81.0.4044.113（正式版本） （64 位） win7 64位即便是官方demo 也会报错，后来和提交工单，回复未复现，后来工期急就没跟踪，上线后有极少.
js中引用高德地图
m0_64590669的博客
02-12 693
js中引用高德地图
新版高德地图 window._AMapSecurityConfig AMapUI如何使用
05-24
`window._AMapSecurityConfig` 是高德地图 API 的安全配置参数，包括了安全码 `scode` 和密钥 `key`。这些参数用于保障高德地图 API 的安全性，通常不需要在代码中进行手动设置。 `AMapUI` 是高德地图开发平台提供的一套 UI 组件库，可以帮助开发者快速构建地图相关的 UI 界面和交互。使用 AMapUI 前需要先引入高德地图 JavaScript API 并初始化地图对象，然后再引入 AMapUI 库。 以下是一个使用 AMapUI 的示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>AMapUI示例</title> <script src="https://webapi.amap.com/maps?v=1.4.15&key=YOUR_KEY"></script> <script src="https://webapi.amap.com/ui/1.0/main.js"></script> </head> <body> <div id="mapContainer" style="width: 100%; height: 500px;"></div> <script> // 初始化地图对象 var map = new AMap.Map('mapContainer', { center: [116.397428, 39.90923], zoom: 13, layers: [ new AMap.TileLayer.Satellite(), new AMap.TileLayer.RoadNet() ] }); // 使用 AMapUI 组件 AMapUI.loadUI(['control/BasicControl'], function(BasicControl) { var zoomCtrl = new BasicControl.Zoom({ position: 'rb' }); map.addControl(zoomCtrl); }); </script> </body> </html> ``` 在上面的示例代码中，首先引入了高德地图的 JavaScript API 和 AMapUI 库。然后通过 `new AMap.Map` 方法初始化地图对象，并设置了地图的中心点、缩放级别和图层。最后通过 `AMapUI.loadUI` 方法引入了 `BasicControl` 组件，并在地图上添加了一个缩放控件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值