怎么在vue中引入高德地图-创新互联
这篇文章将为大家详细讲解有关怎么在vue中引入高德地图,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
创新互联成立与2013年,先为东海等服务建站,东海等地企业,进行企业商务咨询服务。为东海企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。Vue的优点Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势,Vue中页面使用的是局部刷新,不用每次跳转页面都要请求所有数据和dom,可以大大提升访问速度和用户体验。
引入高德地图:
打开index.html,引用高德地图的JavaScript API:
在“key=”这里添加你申请的key,key不需要加引号。
引入高德地图UI组件,只需要在上面代码后面再加一串代码:
配置webpack
打开webpack.base.conf.js文件,找到module.exports,在externals对象中加入一行:'AMap': ‘AMap'
externals: { 'AMap': 'AMap', },
至此引入的步骤已完成,创建一个vue文件
运行,不出意外就可以看到地图了:
如果使用高德地图UI组件,在加载地图的同时加载UI组件就可以了:
loadmap(){ const map = new AMap.Map('container', { zoom: 9 }); AMapUI.loadUI(...) //加载UI组件 }
关于怎么在vue中引入高德地图就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
当前题目:怎么在vue中引入高德地图-创新互联
标题链接:http://myzitong.com/article/hggsh.html