第一步：

首先在index.html入口文件中添加引入高德地图的js，并填写自己在官网申请的key。如果没有申请不填写也是可以的。

plugin：项目中如果有需要引入插件则使用没有直接去掉就行。

第二步： 在需要的页面map.vue页面加入div并设置div的id

宽高一定要有，地图在页面呈现是canvas做图所以需要设定宽高。

第三步：在vue.js中根据div的id=container关联js即可。

map = new AMap.Map('container', { //创建地图

zoom: 11, //地图显示的缩放级别

center: [116.3977432251, 39.9078927749] //地图中心点坐标值

});

以下为地图海量点标记的方法，如果只是想展示地图把一二步骤完成之后复制以上代码即可。

var data =[[116.3977432251, 39.9078927749]，[116.3977433351, 39.9078927749]，[116.3977433851, 39.9078927749]]; //海量点根据经纬度组成的数组

var style = [{

url: '../mass0.png', // 地图标记图标地址

anchor: new AMap.Pixel(6, 6), // 图标显示位置偏移量，基准点为图标左上角

size: new AMap.Size(11, 11) // 图标大小

}];

var mass = new AMap.MassMarks(data, { // 此类表示海量点类，利用该类可同时在地图上展示万级别的点

opacity: 0.8, // 图层的透明度，取值范围[0,1]，1代表完全不透明，0代表完全透明

zIndex: 111, // 图层叠加的顺序值，0表示最底层。默认zIndex：5

cursor: 'pointer', // 指定鼠标悬停时的鼠标样式，自定义cursor，

style: style /* 用于设置点的样式，当点样式一致时传入StyleObject即可；当需要展示多种点样式时，

传入StyleObject的数组，此时需要为Data中每个元素指定 style字段为该元素要显示

的样式在StyleObject数组中的索引*/

});

marker = new AMap.Marker({content: ' ', map: map}); //Marker点标记

// 将 massMarks 添加到地图实例

mass.setMap(map);

// 可以添加图标的点击事件

mass.on('click', function (e) {

// console.log(e);

});

VUE 2.0 引入高德地图,自行封装组件

1. 高德地图官网 申请帐号, 申请相应(JavaScript API)的 Key 2. 在项目中引入, 这里和其他的引入不同的是 直接在 index.html, 不是在 main.js 引入, 博主 ...

vue-cli2.X中引入高德地图，将其设为全局对象

平时一般未用脚手架构建或用webpack构建的项目只要用script标签引入即可,在vue-cli 2.X构建的项目中,需要用如下方式引入高德地图: 首先在高德地图开放平台中注册开发者账号并获取key ...

vue 里面引入高德地图

效果图: 实现: 一:引入 高德,web-sdk (两种方式) 1:在html 中引入(我用的这一种)

曾几何时,前端还仅仅是PC端的.随着移动时代的兴起,h5及css3的推陈出新.前端的领域慢慢的由传统的pc端转入了移动端,这也导致了前端这一职业在风口的一段时间出尽了风头. 从开始的惶恐和无从下手,慢 ...

基于vue 2.X和高德地图的vue-amap组件获取经纬度

今天我就讲了一下怎么通过vue和高德地图开发的vue-amap组件来获取经纬度. 这是vue-amap的官网文档:https://elemefe.github.io/vue-amap/#/ 这是我的码 ...

利用高德地图javascriptAPI做一个自己的地图

最近由于项目中需要制作一个地图,用来选择活动地点,我就花了两天利用高德地图的javascriptAPI自制了一个地图的demo.在这了记录一下我学习的过程. 一.进入高德地图官网,再找到高德地图的开放 ...

Vue异步加载高德地图API

项目中用到了高德地图的API以及UI组件库,因为是直接把引入script写在index.html中,项目打包后运行在服务器,用浏览器访问加载第一次时会非常慢,主要原因是加载高德地图相关的js(近一分钟 ...

最全vue的vue-amap使用高德地图插件画多边形范围

一.在vue-cli的框架下的main.js(或者main.ts)中引入高德插件,代码如下: import Vue from 'vue' import VueAMap from 'vue-amap' ...

Html | Vue | Element UI——引入使用

前言 做个项目,需要一个效果刚好Element UI有,就想配合Vue和Element UI,放在tp5.1下使用,但是引入在线的地址各种报错,本地引入就完美的解决了问题! 代码 __STATIC_J ...

随机推荐

Linux用户组管理

用户组信息存放:/etc/group 当组内只有一个用户,并且用户名和用户组名一致时默认不显示:组号1-499是系统预留的用户组,>=500的用户组是管理员手动创建的,组密码占位符用x表示   ...

Ubuntu14.04 64位运行32位程序

最近公司新增的机器安装Ubuntu14.04 64bit导致之前在32bit下编译的Qt工具软件无法运行. 于是google的了一下找到一些解决办法,但不能保证全部32bit的Qt程序都能正常,测试了 ...

使用@media实现IE hack的方法

文章简介:众所周知,有些时候为了实现IE下的某些效果与现代浏览器一致,我们不得不使用一些hack手段来实现目的.比如说使用“\0”,“\”和“\9”来仅让IE某些版本识别,而对于现代浏览器来说,他会直 ...

python写的百度贴吧相册下载

突然想搞个这样的工具,写来写去都不知道在干嘛了,本来两个文件,现在整合在一起了. 乱得不行,懒得整理了,能用就行. 下载部分用了多线程,但是下载一个文件还是用的单线程,也就是没管http头的range ...

Android中自定义Preference

一.需求 开发横屏设备的app时,发现preference显示的都是上下结构,因此需要自定义preference实现横屏显示. 二.layout实现 <?xml version="1. ...

echarts2 饼图处理标签文字过长使之达到指定字数换行的目的

在使用echarts2的过程中,有时会遇到标签文字过长导致显示不完整的问题.例如: 这时候就需要用到 标签里的formatter 回调函数来处理这种情况了. 方式一:  formatter : ' { ...

SAP请求号的传输

SAP传输目的: SAP传输目的是把开发机中的程序或对象传输到对应的测试机或生成机中,保持各系统的同步性,方便测试和最后的部署! SAP求情号传输的步骤: 1.创建一个请求号 2.用SE10进入如下界 ...

ASCII、Unicode和UTF-8编码的区别；中英文混合截取

ASCII编码是128个字符 中国把汉字编入GB2312,Shift_JIS/Euc-kr各国标准..... Unicode是为了解决各国乱码的,但浪费存储空间 UTF-8编码把一个Unicode字符 ...

QtWebkit包含的类简介

前言 WebKit从Qt 4.4开始被作为一个Module被集成到Qt中.简单的说,Qt webkit就是Qt对Apple公司webkit的支持而开发的库,主要包括以下几个类: QWebDatabas ...