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 相关文章推荐
document 和 document.all 分别什么时候用
Jun 22 Javascript
求解开jscript.encode代码的asp函数
Feb 28 Javascript
JavaScript触发器详解
Mar 10 Javascript
JavaScript字符串String和Array操作的有趣方法
Dec 18 Javascript
JS实现带提示的星级评分效果完整实例
Oct 30 Javascript
跟我学习javascript的Date对象
Nov 19 Javascript
iscroll实现下拉刷新功能
Jul 18 Javascript
VUE搭建手机商城心得和遇到的坑
Feb 21 Javascript
javascript实现自由编辑图片代码详解
Jun 21 Javascript
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
Sep 26 Javascript
vue + elementUI实现省市县三级联动的方法示例
Oct 29 Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
Feb 06 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
什么是调频(FM)、调幅(AM)、短波(SW)、长波(LW)
2021/03/01 无线电
解析PHP无限级分类方法及代码
2013/06/21 PHP
PHP函数nl2br()与自定义函数nl2p()换行用法分析
2016/04/02 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
php框架CodeIgniter主从数据库配置方法分析
2018/05/25 PHP
stripos函数知识点实例分享
2019/02/11 PHP
在JavaScript里嵌入大量字符串常量的实现方法
2013/07/07 Javascript
使用jquery提交form表单并自定义action的实现代码
2016/05/25 Javascript
详解Javascript函数声明与递归调用
2016/10/22 Javascript
jQuery弹出层插件popShow(改进版)用法示例
2017/01/23 Javascript
基于JavaScript实现幸运抽奖页面
2020/07/05 Javascript
详解搭建es6+devServer简单开发环境
2018/09/25 Javascript
VUE脚手架的下载和配置步骤详解
2019/04/01 Javascript
微信小程序如何调用新闻接口实现列表循环
2019/07/02 Javascript
解决微信小程序scroll-view组件无横向滚动的问题
2020/02/04 Javascript
[37:50]VP vs TNC Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
[45:16]完美世界DOTA2联赛PWL S3 Magma vs Phoenix 第一场 12.12
2020/12/16 DOTA
Python实现动态添加类的属性或成员函数的解决方法
2014/07/16 Python
pyqt5实现登录界面的模板
2020/05/30 Python
基于python监控程序是否关闭
2020/01/14 Python
解决Python命令行下退格,删除,方向键乱码(亲测有效)
2020/01/16 Python
在pycharm中实现删除bookmark
2020/02/14 Python
德国宠物用品、宠物食品及水族馆网上商店:ZooRoyal
2017/07/09 全球购物
聪明的粉丝购买门票的地方:TickPick
2018/03/09 全球购物
DNA基因检测和分析:23andMe
2019/05/01 全球购物
string = null 和string = ''的区别
2013/04/28 面试题
初中数学教学反思
2014/01/16 职场文书
就业自我评价
2014/02/04 职场文书
初三学生个人自我评定
2014/04/06 职场文书
公司承诺书怎么写
2014/05/24 职场文书
婚庆公司计划书
2014/09/15 职场文书
2015年社区中秋节活动总结
2015/03/23 职场文书
2015年质量管理工作总结范文
2015/05/18 职场文书
工作经历证明范本
2015/06/15 职场文书
八一建军节主持词
2015/07/01 职场文书
Spark SQL 2.4.8 操作 Dataframe的两种方式
2021/10/16 SQL Server