Vue集成高德地图简单介绍

简介: Vue集成高德地图简单介绍

高德地图官网:https://lbs.amap.com/

高德地图开始之前,我们要拿到一个key才可以。首先注册账号(https://console.amap.com/dev/index)然后进图应用管理 -> 我的应用 -> 创建新应用 -> 然后添加key 应该就可以了。

简单介绍

准备页面,添加div标签作为地图容器,同时为该div指定id属性;指定宽度和高度

<div id="container" style="height:100vh;width: 100%"></div>

在vue项目工程中index.html文件中添加脚本标签

<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=您申请的key值"></script>

创建一个地图只需要一行代码,构造参数中的container为准备阶段添加的地图容器的id,创建的同时可以给地图设置中心点、级别、显示模式、自定义样式等属性。

var map = new AMap.Map('container', {
    zoom:11,//级别
    center: [116.397428, 39.90923],//中心点坐标
    viewMode:'3D'//使用3D视图
});

点标记 Marker,点标记适用于用户需要在地图上创建一个标记的场景。

var marker = new AMap.Marker({
    position: new AMap.LngLat(116.39, 39.9),   // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]
    title: '北京'
});
// 将创建的点标记添加到已有的地图实例:
map.add(marker);

信息窗体 InfoWindow默认信息窗体封装了关闭按钮,使用 API 默认的信息窗体样式,这个时候只需要对 InfoWindow 设定 content 属性即可,content 可以是 dom 对象,也可以是 html 识别的字符串。

var infoWindow = new AMap.InfoWindow({
        anchor: 'top-left',
        content: '这是信息窗体!',
});
infoWindow.open(map,[116.401337,39.907886]);

其它的可以参考官方文档

相关文章
|
7月前
|
资源调度 JavaScript 定位技术
Vue使用高德地图实现点击获取经纬度以及搜索功能
Vue使用高德地图实现点击获取经纬度以及搜索功能
437 0
|
24天前
|
缓存 资源调度 JavaScript
Vue集成Excalidraw实现在线画板功能
Excalidraw是一款开源在线绘图工具,适用于白板、思维导图、原型设计等场景。支持手绘风格、多种图形元素、导出功能及多人协作,深受开发者喜爱。本文档介绍了如何在Vue项目中集成Excalidraw,包括安装依赖、配置文件修改、页面添加等步骤,帮助开发者快速上手。
115 0
Vue集成Excalidraw实现在线画板功能
|
3月前
|
前端开发 JavaScript 开发者
Express.js与前端框架的集成:React、Vue和Angular的示例与技巧
本文介绍了如何将简洁灵活的Node.js后端框架Express.js与三大流行前端框架——React、Vue及Angular进行集成,以提升开发效率与代码可维护性。文中提供了详细的示例代码和实用技巧,展示了如何利用Express.js处理路由和静态文件服务,同时在React、Vue和Angular中构建用户界面,帮助开发者快速掌握前后端分离的开发方法,实现高效、灵活的Web应用构建。
65 3
|
4月前
|
存储 JavaScript 前端开发
Vue中通过集成Quill富文本编辑器实现公告的发布。Vue项目中vue-quill-editor的安装与使用【实战开发应用】
文章展示了在Vue项目中通过集成Quill富文本编辑器实现公告功能的完整开发过程,包括前端的公告发布、修改、删除操作以及后端的数据存储和处理逻辑。
Vue中通过集成Quill富文本编辑器实现公告的发布。Vue项目中vue-quill-editor的安装与使用【实战开发应用】
|
5月前
|
资源调度 JavaScript
Electron 集成 Vue —— electron-vue
Electron 集成 Vue —— electron-vue
60 0
|
7月前
|
资源调度 JavaScript 测试技术
Vue的集成测试:使用VueTestUtils进行单元测试的技术博文
【4月更文挑战第24天】本文介绍了如何使用VueTestUtils进行Vue.js项目的集成测试。首先,需安装VueTestUtils和vue-template-compiler。接着,展示了如何编写测试用例,包括使用`mount`和`shallowMount`方法挂载组件,以及通过`wrapper`操作和断言组件行为。文章还讨论了单元测试与集成测试的区别,并提到了模拟依赖、交互、组件状态管理和断言的策略。最后,强调了测试的可读性和可维护性对代码质量的重要性。通过VueTestUtils,开发者能更高效地进行Vue组件的测试。
|
7月前
|
JavaScript 定位技术 API
在 vue3 中使用高德地图
在 vue3 中使用高德地图
755 0
|
7月前
|
XML NoSQL JavaScript
sprinboot+vue集成neo4j图数据库
sprinboot+vue集成neo4j图数据库
|
7月前
|
JavaScript 前端开发 搜索推荐
实时聊天应用:集成Python的WebSockets和Vue构建前端界面
【4月更文挑战第10天】本文介绍了如何使用Python的WebSockets和Vue.js构建实时聊天应用。通过WebSockets实现服务器与客户端的双向通信,借助Vue.js创建高效用户界面。步骤包括设计应用架构、实现WebSocket服务器、创建Vue.js项目、构建前端界面、集成WebSockets、接收和显示消息、性能优化及测试部署。这种技术组合为开发实时聊天应用提供了强大且灵活的解决方案,随着技术发展,未来的聊天应用将更加智能、个性化。
356 0
|
7月前
|
定位技术 容器
vue3高德地图+搜索+点击获取经纬度
vue3高德地图+搜索+点击获取经纬度
下一篇
DataWorks