Vue-Cli 3.0 中配置高德地图的两种方式


Posted in Javascript onJune 19, 2019

 vue 中使用高德地图有两种方式

一、vue-amap 组件

官网: https://elemefe.github.io/vue-amap/#/

开始的时候是打算用这个组件做地图功能的,但是尝试之后存在些问题,所以就放弃了,可能是我的使用方式不对。我所遇到的问题:

1. 安装之后使用,始终提示跨域问题。

2. 页面刷新之后地图出不来,第一次进入页面时没问题。因为这两个问题所以放弃了这个组件的使用。我想可能是我哪个地方代码有问题。

二、直接引用高德地图 SDK

因为第一种方式尝试失败了,所以我选择了直接引用SDK的方式。使用这种方式没有出现方式一中存在的问题。直接引用SDK的方式步骤:

1. 在 public 文件夹下的 index.html 中加入

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.4&key=你申请的key"></script>

2. 在 vue.config.js 文件中配置 externals

module.exports = {
 devServer: {
  port: 57103 // 端口号配置
 },
 configureWebpack: {
  externals: {
   'AMap': 'AMap' // 高德地图配置
  }
 }
}

注: vue.config.js 文件要自己创建,vue-cli 3.0 不会自动生成此文件。 此外,修改 vue.config.js 不会触发热加载,也就是修改之后你需要重新 run 一下你的项目,它才能生效。

 3. 实际使用

<template>
 <div class="box">
  <div id="container" style="width:500px; height:300px"></div>
 </div>
</template>

<script>
import AMap from 'AMap' // 引入高德地图
export default {
 mounted () {
  this.init()
 },
 methods: {
  init () {
   let map = new AMap.Map('container', {
    center: [116.397428, 39.90923],
    resizeEnable: true,
    zoom: 10
   })
  }
 }
}
</script>

注:init() 方法请在 mounted 生命周期中调用,因为如果在 created 阶段调用,会找不到 html 元素 div#container

4. 效果图

Vue-Cli 3.0 中配置高德地图的两种方式

总结

以上所述是小编给大家介绍的Vue-Cli 3.0 中配置高德地图的两种方式,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
网页设计常用的一些技巧
Dec 22 Javascript
Jquery 高亮显示文本中重要的关键字
Dec 24 Javascript
深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP
Jan 15 Javascript
extjs两个tbar问题探讨
Aug 08 Javascript
js之事件冒泡和事件捕获详细介绍
Oct 28 Javascript
jQuery操作Select的Option上下移动及移除添加等等
Nov 18 Javascript
基于jquery实现页面滚动到底自动加载数据的功能
Dec 19 Javascript
前端分页功能的实现以及原理(jQuery)
Jan 22 Javascript
jQuery Easyui Treegrid实现显示checkbox功能
Aug 08 jQuery
vue实现微信分享链接添加动态参数的方法
Apr 29 Javascript
vue实现固定位置显示功能
May 30 Javascript
vue 实现路由跳转时更改页面title
Nov 05 Javascript
vue axios重复点击取消上一次请求封装的方法
Jun 19 #Javascript
javascript创建元素和删除元素实例小结
Jun 19 #Javascript
Vue 2.0 侦听器 watch属性代码详解
Jun 19 #Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
Jun 19 #Javascript
js简单遍历获取对象中的属性值的方法示例
Jun 19 #Javascript
ionic4+angular7+cordova上传图片功能的实例代码
Jun 19 #Javascript
vue实现后台管理权限系统及顶栏三级菜单显示功能
Jun 19 #Javascript
You might like
DC最新动画电影:《战争之子》为何内容偏激,毁了一个不错的漫画
2020/04/09 欧美动漫
使用 MySQL Date/Time 类型
2008/03/26 PHP
PHP中使用CURL伪造来路抓取页面或文件
2011/05/04 PHP
基于MySQL分区性能的详细介绍
2013/05/02 PHP
php实现Mongodb自定义方式生成自增ID的方法
2015/03/23 PHP
smarty简单应用实例
2015/11/03 PHP
JavaScript中的View-Model使用介绍
2011/08/11 Javascript
通过下拉框的值来确定输入框是否可以为空的代码
2011/10/18 Javascript
6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
2013/02/04 Javascript
两个listbox实现选项的添加删除和搜索
2013/03/01 Javascript
js实现点击注册按钮开始读秒倒计时的小例子
2013/05/11 Javascript
JS实现Fisheye效果动感放大菜单代码
2015/10/21 Javascript
jQuery validate插件实现ajax验证重复的2种方法
2016/01/22 Javascript
JS简单实现浮动窗口效果示例
2016/09/07 Javascript
javascript实现文字无缝滚动效果
2017/08/26 Javascript
vue keep-alive请求数据的方法示例
2018/05/16 Javascript
vue element table 表格请求后台排序的方法
2018/09/28 Javascript
koa-router路由参数和前端路由的结合详解
2019/05/19 Javascript
vue.js click点击事件获取当前元素对象的操作
2020/08/07 Javascript
python中关于日期时间处理的问答集锦
2013/03/08 Python
python转换摩斯密码示例
2014/02/16 Python
Python中的高级函数map/reduce使用实例
2015/04/13 Python
Python、 Pycharm、Django安装详细教程(图文)
2019/04/12 Python
Python迭代器模块itertools使用原理解析
2019/12/11 Python
PYQT5 vscode联合操作qtdesigner的方法
2020/03/24 Python
详解PyQt5信号与槽的几种高级玩法
2020/03/24 Python
Python通过len函数返回对象长度
2020/10/22 Python
关于解决iframe标签嵌套问题的解决方法
2020/03/04 HTML / CSS
奢华的意大利皮革手袋:Bene Handbags
2019/10/29 全球购物
银行实习生自我鉴定范文
2013/09/19 职场文书
大学在校生求职信范文
2013/11/21 职场文书
产品促销活动策划书
2014/01/15 职场文书
吸烟检讨书2000字
2014/02/13 职场文书
少先队中队工作总结
2015/08/14 职场文书
Linux安装Nginx步骤详解
2021/03/31 Servers
Win11运行育碧游戏总是崩溃怎么办 win11玩育碧游戏出现性能崩溃的解决办法
2022/04/06 数码科技