vue使用原生高德地图

最新推荐文章于 2024-11-07 13:28:20 发布

原创

最新推荐文章于 2024-11-07 13:28:20 发布 · 665 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文介绍了如何在Vue项目中集成高德地图，包括创建vue.config.js配置文件，引入高德地图JS库，以及实现卫星图的动画切换效果。

1、先在vue项目根目录下新建vue.config.js，这个文件是没有的，vue不提供

module.exports = {
  configureWebpack: {
	  externals: {
		'AMap': 'AMap', // 高德地图配置
		'AMapUI': 'AMapUI'
	  }
  },
}

2、在vue文件index.html中引入高德地图js文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>default</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but default doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
	<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.3&key=你的高德地图key&plugin=AMap.ControlBar"></script>
  </body>
</html>

3、在vue文件中使用

<template>
  <div class="box">
    <div id="container" style="width:1500px; height:900px"></div>
  </div>
</template>
 
<script>
import

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

bsefef

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

高德地图开发（三、地图marker点标记）

weixin_44849078的博客

09-07

8241

高德地图添加marker标记以及自定义样式标记

谷歌地图 new AMap.Marker 创建标记点缩放后位置偏移解决方案

OOObject的博客

03-02

4362

谷歌地图 new AMap.Marker 创建标记点缩放后位置偏移解决方案按照高德地图的api，创建Marker(图标)并将其放置到地图上，代码如下： var marker = new AMap.Marker({ //设置经纬度 position : [121.499809,31.239666], //设置偏移量 offset: new AMap.Pixel(-10, -10), //设置图标属性 icon :

1 条评论您还未登录，请先登录后发表或查看评论

1 条评论

我也想那样啊 2022.09.22
你自己看看这是原生？看都不看就往上发

vue+高德地图 系列二 Vue项目引入原生高德地图

Marseill_world的博客

12-23

1367

文章目录前言一、AMap.js二、使用步骤1.引入库2.读入数据总结前言 vue + vue-cli3 + 高德地图 一、AMap.js 项目里的引用文件，css，js链接，都以下列方式引入，重点注意插件的引用代码如下（示例）： // 高德map https://webapi.amap.com/maps?v=1.4.11&key=你的高德地图的key export default function MapLoader() { return new Promise((resolve,

vue使用elementui结合高德地图的定位以及位置显示

11-25

在Vue.js应用中，ElementUI是一个非常流行的前端组件库，提供了丰富的UI元素和交互设计，而高德地图则是一款强大的地图服务提供商，提供地图展示、定位、路线规划等功能。将ElementUI与高德地图结合，可以创建出具有...

vue3引入高德地图

weixin_47194802的博客

11-07

516

【代码】vue3引入高德地图。

vue 项目中使用高德地图

且听风吟的博客

03-23

1892

vue 项目中使用高德地图

vue项目引入高德地图

06-19

在vue项目中，添加高德地图。对开发地图的开发人员有一定帮助

Vue引用原生高德地图标注

gansu12的博客

07-23

363

Vue引用原生高德地图标注。

vue使用高德地图（原生HTML的使用以及父子页面的传参和方法调用）

A_hapiness的博客

12-06

985

vue使用高德地图（原生HTML的使用以及父子页面的传参和方法调用）

解决在IE中高德地图加载不出来/只有Logo没有地图的解决方案

wwyxjjz的博客

08-25

1417

在created中调用下面函数 clearMapstore() { localStorage.removeItem("_AMap_vectorlayer"); localStorage.removeItem("_AMap_wgl"); localStorage.removeItem("_AMap_sync"); l...

vue项目中使用高德地图（多点定位，amap-vue引入原生SDK 页面刷新后图层丢失）

weixin_45739279的博客

09-16

530

vue项目中使用高德地图（多点定位，amap-vue引入原生SDK 页面刷新后图层丢失）一、引入高德地图 两种方式，一种是直接引入原生高德，太麻烦懒得用，第二种是引入amap-vue，我用的是第二种。安装 npm install vue-amap main.js中引入 // 高德地图 import Vue from 'vue' import VueAMap from 'vue-amap'; Vue.use(VueAMap); VueAMap.initAMapApiLoader({ key:

【Vue】vue项目中使用高德地图教程

m0_61049675的博客

05-14

2882

由于高德地图的API是异步加载的，你需要确保在API加载完成后才进行地图的初始化。由于API密钥可能会被滥用，因此请确保你的API密钥不会暴露在客户端代码中（例如，不要直接将其硬编码在前端代码中）。如果你需要在前端使用API密钥，请确保你的应用有适当的安全措施来防止未经授权的访问。你还可以为地图添加事件监听器，以处理地图的各种事件，比如点击事件、拖拽事件等。在你的Vue项目中，可以通过在main.js文件或者单个组件的。请将你的API密钥替换为你从高德开放平台获得的真实API密钥。你可以根据需要调整这个。

vue简单加载高德

weixin_45617978的博客

07-15

447

整理一下学习高德地图的一些值得记录的地方在一个未上线的项目里面所用到的前端的一些东西这里是在vue里面写的 1.首先在index.html里面引入一下高德以及需要用到的一些东西，在plugin后面接就行。 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=3cad56f0514dcbc15e1da6a310c4e19f&plugin=AMap.DistrictSearch,A

【Vue】vue项目中使用百度地图教程

m0_61049675的博客

05-14

4652

由于API密钥可能会被滥用，因此请确保你的API密钥不会暴露在客户端代码中（例如，不要直接将其硬编码在前端代码中）。如果你需要在前端使用API密钥，请确保你的应用有适当的安全措施来防止未经授权的访问。在你的Vue项目中运行并测试地图的显示和功能。在你的Vue项目的public/index.html或者相应的HTML模板文件中，通过。你还可以为地图添加事件监听器，以处理地图的各种事件，比如点击事件、拖拽事件等。元素作为地图的容器，并给它一个唯一的ID。是地图的中心点坐标，15是地图的缩放级别。

Vue 运行高德地图官方样例，设置class无效

jifashihan的博客

09-06

594

Vue 运行高德地图官方样例，设置class无效

Vue Echarts英文版地图——强大的高德地图

SummerGao

11-29

2062

一、安装插件 npm install echarts --save npm install...

vue高德地图（英文地图+点标记+信息窗体）

宁

01-13

1687

npm install vue-amap --save main.js import VueAMap from 'vue-amap'; Vue.use(VueAMap); VueAMap.initAMapApiLoader({ key: '', plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEdito

Vue怎么使用高德地图

最新发布

03-08

### 如何在 Vue.js 中集成和使用高德地图 API #### 安装 `vue-amap` 插件为了简化开发流程并更好地与 Vue 组件配合工作，在 Vue.js 项目中推荐通过安装 `vue-amap` 来集成高德地图。该插件提供了对原生 JavaScript SDK 的封装，使得开发者可以更便捷地操作地图对象。 ```bash npm install vue-amap --save ``` 此命令会将依赖项添加到项目的 package.json 文件中[^2]。 #### 初始化配置完成上述步骤之后，需按照如下方式初始化设置： 1. **引入必要的样式文件** 在 main.js 或者相应的入口文件里加入以下代码片段来加载默认的地图样式表： ```javascript import 'vue-amap/dist/vue-amap.css'; ``` 2. **注册全局组件和服务** 接着继续在同一文件内执行下面的操作以激活服务并声明要用到的各种组件： ```javascript import Vue from 'vue'; import VueAmap from 'vue-amap'; Vue.use(VueAmap); // 初始化服务 VueAmap.initAMapApiLoader({ key: '您的高德开放平台申请的应用 Key', v: '1.4.15', // 使用的 JSAPI 版本，默认为最新版 plugin: ['AMap.Scale', 'AMap.ToolBar'] // 可选参数, 加载额外的功能模块 }); ``` 3. **创建地图容器** 然后可以在页面模板中的适当位置定义一个 div 元素作为显示区域，并赋予唯一的 id 属性以便后续引用： ```html <div id="container" style="width:100%;height:400px;"></div> ``` 4. **实例化 Map 对象** 最终利用之前准备好的 DOM 节点 ID 创建一个新的地图实例： ```javascript export default { data() { return { map: null, }; }, mounted() { this.map = new AMap.Map('container', { zoom: 10, center: [116.397428, 39.90923], // 设置中心点坐标 }); } }; ``` 以上即是在 Vue.js 应用程序内部嵌入高德地图的基础方法[^3]。 #### 扩展功能说明对于希望进一步增强交互体验的需求方而言，除了基本的地图展示外还可以考虑增加诸如标注、信息窗体等功能特性。具体实现细节可参照官方文档获取更多指导和支持[^1]。