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 相关文章推荐
js获取URL的参数的方法(getQueryString)示例
Sep 29 Javascript
js操作输入框中选择内容兼容IE及其他主流浏览器
Apr 22 Javascript
jQuery实现带渐显效果的人物多级关系图代码
Oct 16 Javascript
AngularJS下对数组的对比分析
Aug 24 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
Oct 10 Javascript
老生常谈jquery id选择器和class选择器的区别
Feb 12 Javascript
Javascript快速实现浏览器系统通知
Aug 26 Javascript
vue-router 路由基础的详解
Oct 17 Javascript
Angular6 用户自定义标签开发的实现方法
Jan 08 Javascript
JavaScript使用Math.random()生成简单的验证码
Jan 21 Javascript
Vue数据绑定实例写法
Aug 06 Javascript
Vue.directive 实现元素scroll逻辑复用
Nov 29 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
php提高网站效率的技巧
2015/09/29 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
event.srcElement+表格应用
2006/08/29 Javascript
可以用来调试JavaScript错误的解决方案
2010/08/07 Javascript
jquery插件开发方法(初学者)
2012/02/03 Javascript
载入jQuery库的最佳方法详细说明及实现代码
2012/12/28 Javascript
JS实现定时页面弹出类似QQ新闻的提示框
2013/11/07 Javascript
javascript封装简单实现方法
2015/08/11 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
2015/09/27 Javascript
一不小心就做错的JS闭包面试题
2015/11/25 Javascript
JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法
2016/08/03 Javascript
JavaScript每天必学之事件
2016/09/18 Javascript
js倒计时小实例(多次定时)
2016/12/08 Javascript
js封装tab标签页实例分享
2016/12/19 Javascript
javascript 中Cookie读、写与删除操作
2017/03/29 Javascript
深入理解JavaScript 参数按值传递
2017/05/24 Javascript
webpack实现热更新(实施同步刷新)
2017/07/28 Javascript
浅谈React中组件间抽象
2018/01/27 Javascript
关于vue的语法规则检测报错问题的解决
2018/05/21 Javascript
微信小程序实现的五星评价功能示例
2019/04/25 Javascript
vue权限问题的完美解决方案
2019/05/08 Javascript
Vue v-text指令简单使用方法示例
2019/09/19 Javascript
javascript使用链接跨域下载图片
2019/11/01 Javascript
Servlet返回的数据js解析2种方法
2019/12/12 Javascript
Python3使用SMTP发送带附件邮件
2020/06/16 Python
简单了解python的内存管理机制
2019/07/08 Python
python celery分布式任务队列的使用详解
2019/07/08 Python
Python Flask上下文管理机制实例解析
2020/03/16 Python
如何解决pycharm调试报错的问题
2020/08/06 Python
专门经营化妆刷的美国彩妆品牌:Sigma Beauty
2017/09/11 全球购物
给全校老师的建议书
2014/03/13 职场文书
管理建议书范文
2014/05/13 职场文书
文明市民先进事迹
2014/05/15 职场文书
工伤私了协议书范本
2014/11/24 职场文书
2014年骨干教师工作总结
2014/12/19 职场文书
2016党员学习心得体会范文
2016/01/23 职场文书