怎么在vue中引入高德地图

　　介绍

这篇文章将为大家详细讲解有关怎么在vue中引入高德地图、文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。

vue的优点

vue具体轻量级框架,简单易学,双向数据绑定,组件化,数据和结构的分离,虚拟DOM,运行速度快等优势,vue中页面使用的是局部刷新,不用每次跳转页面都要请求所有数据和DOM,可以大大提升访问速度和用户体验。

<强>引入高德地图:

<>强打开指数。html,引用高德地图的JavaScript API:

& lt; script 类型=拔谋?javascript", https://www.yisu.com/zixun/src=" http://webapi.amap.com/maps?v=1.3&key=你的API键">

在“关键="这里添加你申请的钥匙,钥匙不需要加引号。

<强>引入高德地图界面组件,只需要在上面代码后面再加一串代码:

& lt; script  https://www.yisu.com/zixun/src="//webapi.amap.com/ui/1.0/main.js ">

<强>配置webpack

打开webpack.base.conf.js文件,找到module.exports,在外部对象中加入一行:& # 39;同理,:“同理# 39;

:外部,{ 　　,& # 39;同理,:,& # 39;同理# 39; 　　},

<强>至此引入的步骤已完成,创建一个vue文件

& lt; template> 　　,& lt; div  id=癱ontainer",类=癿ymap"祝辞& lt;/div> 　　& lt;/template> 　　& lt; script> 　　 　　import  AMap 得到& # 39;同理,,,//在页面中引入高德地图 　　 　　export  default  { 　　,安装(){ 　　this.loadmap才能();,,//加载地图和相关组件 　　}, 　　,方法:{ 　　loadmap才能(){ 　　const 才能;map =, new  AMap.Map(& # 39;容器# 39;,,{ 　　,才能放大:9 　　,,}); 　　,,} 　　,} 　　} 　　& lt;/script> 　　& lt; style  scoped> 　　,.mymap { 　　,,宽度:300 px; 　　,,身高:300 px; 　　,} 　　& lt;/style>

<强>运行,不出意外就可以看到地图了:

怎么在vue中引入高德地图

<>强如果使用高德地图界面组件,在加载地图的同时加载UI组件就可以了:

loadmap () { 　　,const  map =, new  AMap.Map(& # 39;容器# 39;,,{ 　　放大才能:9 　　,}); 　　,AMapUI.loadUI(…),,//加载UI组件 　　}

关于怎么在vue中引入高德地图就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。

怎么在vue中引入高德地图