如何在前端vue项目中使用高德地图

一、如何在前端vue项目中使用高德地图

为了在前端Vue项目中使用高德地图，我们需要结合后端和前端的工作。首先，后端需要整合第三方提供的GPS数据，并优化后返回给前端。具体步骤如下：

第一步，后端整合第三方SDK，新建sdk目录并复制SDK.jar，更新pom.xml添加依赖，并使用spring-boot-maven-plugin插件整合SDK。通过SDK中的postHttps方法调用第三方接口获取GPS数据。

第二步，将获取的GPS数据转换成前端需要的格式。数据返回示例如returnJson。

接着，前端工作开始。首先，去高德开放平台申请地图API的key。高德的地图JS API 2.0文档清晰，能快速完成所需功能。

然后，在Vue项目中创建地图组件MapContainer.vue，并在父组件VehicleLocationAndTrackingModal中引入此组件。组件将接收后端返回的GPS数据，并在地图上展示。

最后，实现展示效果。Vue与高德地图的整合相对简单，本例中展示了如何在前端接收数据并用地图展示。接下来，我们还将介绍如何展示车辆的运行轨迹，以实现更完整的功能。

二、现在比较好用的前端开发工具有哪些啊

作为一个前端开发工程师，使用一款自己上手且功能强大的开发工具是非常重要的，但是面对这么多开发工具，到底哪个比较好呢？下面我个人推荐几款自己感觉还不错的前端开发工具，希望作为大家的参考。

作为一个编程的菜鸟，对于英语真的是有心无力，尤其是一些国外的开发工具都是英文界面，我就非常的不喜欢。hbuilder是国产的一款前端开发工具而且是免费的，对于英语不好的前端工程师是一个不错的消息。hbuilder的官方大致是这么解释为什么要开发hbuilder的：HTML最开始其实不是一个编程语言，确实用不着什么ide。但是发展到现在，7w多个语法，js越来越庞大，真开发一个达到原生水准的App，不是用以前的文本编辑器能搞定的。

目前竟然没有一个开发工具能把7w多HTML5语法提示齐全，这不科学，在原生开发里这是不可想象的，xcode之于iOS，eclipse之于Android，vs之于winphone，在语法提示、转到定义、重构、调试等方面都非常高效。作为同时熟悉原生和HTML5开发的我们，我们在开发HTML5时明显感受到效率低下。于是有了hubuilder。确实是hubuilder支持左右的前端语法代码提示，这个是我最喜欢的它的一个原因，而且还有强大的其他语言支持和开发webapp等功能，强大到没朋友。缺点也是有一些的，就是其有些稳定，有时可能会有些卡顿的现象，希望官方修复。

sublime text是一个轻量级的编辑器，也是支持各种编程语言，sublime text所有的强大功能都是支持插件的，而且快捷键十分的好用，可以极大的减少开发的劳动程度，使用sublime就是要使用其快捷键和插件。该软件的优点的轻量级但是功能强大，缺点是对于项目的管理等不是很方便，代码提示不如hubuilder强大。

这是一款很经典的前端开发工具了，以前人们使用的是它的可视化开发工具，但是现在它只能是作为一个代码编辑器来使用的，当然一些可视化的功能现在也是用的上，如要插入Flash视频等还是使用可视化简单一些，毕竟不是所有人都能纯手写哪些意义不大的代码，优点是人们熟悉稳定，支持一些可视化的插入操作，缺点是代码提示不好，不能进行快速的开发只能是作为学习使用。

总结：以上只是前端开发工具中个人比较熟悉的，除此之外还有很多优秀的前端开发工具如webstorm等，大家可根据自己的喜好选择自己习惯的工具进行开发。

三、Web前端开发所需要的知识技能及学习路径

Web开发基础中的基础，HTML是负责网页结构，CSS负责网页样式，JS则负责逻辑交互。前两者更像是标记语言，没有什么逻辑，JS才是前端的重中之重。HTML5新增的技术大部分需要结合JS学习。

每个人学习进度可能不同，这个阶段主要是多仿站，熟悉基础，试试用CSS写响应式页面，了解JS深入性的知识，比如原型链、闭包、设计模式等需要更多的积累，逐渐理解并实践掌握。

jQuery是JS的一个应用库，能够提升原生JS开发效率。Bootstrap则是响应式框架，更简单的实现手机/平板/PC多个设备的页面支持。Ajax技术用于异步交互，不刷新页面就能更新数据，比如地图应用等。Json是一种数据格式，被广泛应用在各大编程语言中。

jQuery和bootstrap会简化很多编写的代码量，用着不亦乐乎，但对于基础还不是很扎实的人建议还是少用。Ajax和json通常用于和后端交互，在实际业务中也经常用到。

版本管理工具，主要用于团队开发时避免文件冲突，也可回档。前端推荐学习Git。

运行在服务器端的JavaScript。Express是其拓展MVC框架。其中nodejs最常用到的就是npm包管理器，不用到各个网站去下载资源包。数据库的学习可以选择MongoDB或者MySQL，前者与Nodejs的契合度更好，不过现在大多数网站都是PHPMysql的组合，如果有学PHP的打算的话，可以先学习Mysql。

JavaScript的语言标准。ES6中加入了很多新的概念，也弥补了之前版本中JS的很多缺陷，越来越多的项目开始运用ES6进行开发。学之前最好把ES5先搞懂了，目前实际项目中考虑到兼容性，ES6是需要通过Babel将其编译为ES5来部署的。

前端三大框架，各自也有着各自的生态系统，根据需求自行选择学习。目前企业需求量最大的仍然是Angular，但近期趋势来看react和vue则更受欢迎。因为现在前端技术发展太过于突飞猛进，工具和框架的更新比翻书还快，建议学习还是看文档比较好。学习过程中也会遇到很多用到各种构建工具的时候。

这个一样是根据需求自行选择学习。比较常用的现在有Webpack，可以将多个不同编程风格的文件打包，比如ES6/AMD/CMD之类的模块化都能识别并编译成浏览器能运行的文件。Sass/Less，CSS预编译框架，可以用带有逻辑性的方式编写CSS代码。Gulp/Grunt构建工具，可以自动化对代码进行压缩合并等工作。

目前市场对前端基本都要求会一门后端语言，PHP/JAVA/Nodejs/Python等。

学习编程重要的还是实践，多敲代码，多去尝试。独立解决问题的能力、探究钻研的精神是必不可少的。有兴趣的话也可以自己搭建一个技术博客，往github上传几个开源项目，这些都是不错的加分点。

1、不要让对未来的忧虑干扰你现在的学习，有些JavaScript初学者会问刚开始要学习哪种框架，但是如果你还没能熟练使用原生JavaScript，你就不应该问这种问题。因为你会花很多时间研究各种框架而得不到进步。走出这个陷阱的一个方法是制定一个学习路径图。

2、不要让自信骗你进入持续遗忘的陷阱，快速理解一个概念会是JavaScript进步的最大阻碍，下面我将解释。当你遇到一个知识点，而你好像理解了，你很可能抑制不住内心跳到下一个知识点的冲动。但是，很快你会到达一个节点，在这个节点你发现自己已经忘了前面所学，于是你需要回过头复习，你快速瞟了一下之前所学然后又继续学习新的知识。但是现在，你忘记了其他东西。你一直重复这种继续-回顾-继续-回顾模式直到你发现自己完全迷失。你开始沮丧，想要休息，然后当你开始重振旗鼓，却发现自己已经忘掉所有。

幸运的是，我们有两个应对上述问题的方法：

当你学习一个新的概念，你要将它实践出来，练习它，与它和善相处，甚至能够将它与其他概念联系到一起。当你学习一个示例，最重要的是你要自己将代码敲出来，这样能帮助你吸收它。另外，一次只学一个东西能够帮助你巩固所学，因为记忆更少的东西更容易。

这个过程看起来貌似比阅读然后快速跳到下一个知识点要花费更长的时间，但是实际上它所花的时间更少，因为这样你就不需要频繁复习之前所学。我在好几个场合后才艰难的领悟到这个道理。

3、思考的更慢你将学得更快.。这一条听起来违反直觉，所以下面我将用一个故事来解释。我的一个朋友又一次对JavaScript的一个特性感到困惑。我让他将他知道的解释给我听，然后告诉我哪儿让他困惑。当它向我解释代码，我发现他在跳步。“等会儿！”我说道。“慢慢来，然后将这些一步步解释给我听。”我的朋友直接将整个代码的功能总结给我听。我再次让他暂停。“你还是在跳步。再解释一次，这次我需要你一步步将每一行代码发生了什么解释给我听。”这一次，我的朋友能够更好的解释代码是如何运行的。关键在于他花时间去理解每一行代码而不是试图一下理解所有。

在这样这种案例中，思考的更慢实际上让你学得更快。大家都知道学习不能急于求成，学会坚持就已经超过85%的人了。