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

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 中配置高德地图的两种方式，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

赞 (0)

相关推荐

  • vue.js高德地图实现热点图代码实例

    1.在index.html引入高德地图JSAPI <script src="https://webapi.amap.com/maps?v=1.3&key=xxx"></script> 2.地图dom <div class="map-container"> <div id="container" style="width:100%;height:500px"></di

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

    vue 中使用高德地图有两种方式 一.vue-amap 组件 官网: https://elemefe.github.io/vue-amap/#/ 开始的时候是打算用这个组件做地图功能的,但是尝试之后存在些问题,所以就放弃了,可能是我的使用方式不对.我所遇到的问题: 1. 安装之后使用,始终提示跨域问题. 2. 页面刷新之后地图出不来,第一次进入页面时没问题.因为这两个问题所以放弃了这个组件的使用.我想可能是我哪个地方代码有问题. 二.直接引用高德地图 SDK 因为第一种方式尝试失败了,所以我选择

  • vue高德地图之玩转周边

    vue高德地图之玩转周边

    前言:在之前的博客中,有成功引入高德地图,这是以前的地址  vue 调用高德地图. 因为一些需求,需要使用到地图的周边功能. 完整的项目代码请查看  我的github 一 .先看要实现的结果,参考了链家的周边,如图所示.  二 .原理分析 1.引入高德api,这个在之前的博客提到过,vue 调用高德地图. 2.使用地图的周边插件,这是  高德网站的api. AMap.PlaceSearch //地点搜索服务插件,提供某一特定地区的位置查询服务 在插件中的各种方法中选取了searchNearBy的

  • Vue 引入AMap高德地图的实现代码

    本文代码仅针对 Vue CLI 3.x 生成的项目有效,但是在第二步配置的时候,可以直接配置 webpack.externals,所以本引入思路是通用的,并不局限于该项目 资源 AMap 准备-入门教程 引入 AMap 在 public/index.html 文件 </body> 前引入 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.14&key=您申请的

  • vue基于Vue2.0和高德地图的地图组件实例

    前言 在做基于LBS的应用中,时常会和地图打交道,最直接的解决方案,当然是去对应的地图官网找文档,然后一步步来玩.对于简单场景而言,体验应该还好,但对于一些状态多,变化频繁的复杂场景而言,不仅要时刻维护本地数据状态和地图状态同步,还要查找设置各种状态的地图API,实在是让人头疼的事情. 设计vue-amap的初衷,也就是为了让开发者,在编写地图应用时,能从查找众多地图API和繁琐的地图状态同步中解脱出来. 那么vue-amap是如何做到的,又能给开发者带来怎样的便利与开发体验呢?我们就从一个轻点

  • vue调用高德地图实例代码

    vue调用高德地图实例代码

    一. vue-amap,一个基于 Vue 2.x 和高德地图的地图组件 https://elemefe.github.io/vue-amap/#/ 这个就不细说了,按照其文档,就能够安装下来. 二. 按照官方提供的方法引入 1.修改webpac.base.conf.js文件 externals: { 'AMap': 'AMap' } 2.引入sdk 引入有两种方式,一种是页面直接引入 复制代码 代码如下: <script type="text/javascript" src=&q

  • vue-cli中使用高德地图的方法示例

    第一步 去高德地图开放平台申请密钥  高德地图开放平台 第二部 在vue-cli项目目录结构 里面多了config文件夹和 utils文件夹 config.js里面是这样的  主要是导出密钥 // 高德地图 key export const MapKey = '你的密钥key' // 地图限定城市 export const MapCityName = '武汉' utils文件夹里面 新建路一个remoteLoad.js 主要是动态创建script标签 封装了一个函数 传入URL地址() expo

  • Vue使用高德地图搭建实时公交应用功能（地图 + 附近站点+线路详情 + 输入提示+换乘详情）

    最近项目要使用高德地图写了一个实时公交的应用,这边分享一个小应用主要熟悉下高德地图在vue中的使用,常用api,vue的常用指令 先给大家看下页面效果: 如果有需要源码的童鞋请移步我的github地址 vue搭建实时公交 (欢迎star) 实现思路 在vue项目中导入高德地图 具体功能调用相应高德js APi 1.在vue项目中导入高德地图 1.修改webpac.base.conf.js文件 externals: { 'AMap': 'AMap' } 2.引入sdk 引入有两种方式,一种是在in

  • vue+高德地图写地图选址组件的方法

    vue+高德地图写地图选址组件的方法

    前言 现在做这个移动端的项目中有一个地图选址的功能,本来高德地图中有一个现成的选址组件,但是有两个问题,因为他是用iframe引用的,第一改不了样式,这点还勉强能接受:第二他的左上角有一个返回键,在搜索的时候可以返回到地图界面,但是在地图界面时点返回没有用,试了半天也没搞明白怎么监听到那个返回键的点击事件,所以趁这两天项目基本结束自己写一个把这个功能优化一下,也方便以后使用. 开整 vue的安装使用啥的我在这就不说了,直接开始地图选址组件. 首先上高德开放平台弄一个key,然后在index.ht

  • vue异步加载高德地图的实现

    本文介绍了vue异步加载高德地图的实现,分享给大家,具体如下: 几种加载js的方式 同步加载 异步加载 延迟加载 同步加载 用的最多的一种方式,又称阻塞模式,会阻止浏览器的后续处理,停止后续的解析,只有当当前加载完成,才能进行下一步操作.所以默认同步执行才是安全的.但这样如果js中有输出document内容.修改dom.重定向等行为,就会造成页面堵塞.所以一般建议把<script>标签放在<body>结尾处,这样尽可能减少页面阻塞. <script src="htt

  • 在vue项目中引入高德地图及其UI组件的方法

    引入高德地图: 打开index.html,引用高德地图的JavaScript API: <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=你的API key"></script> 在"key="这里添加你申请的key,key不需要加引号. 引入高德地图UI组件,只需要在上面代码后面再加一串代码: <script

随机推荐