vue中使用高德地图开发

概述

  最近两年比较热门的一个名词叫“数据可视化”,在前端方向大致体现为 地图数据展示以及 图表类数据展示。那么,如何在vue中使用基于高德地图来做地图数据可视化以及加上e Charts的图表类型数据可视化呢?接下来会分三篇文章来进行概述,最终实现下图内容:

共分为以下几篇

  • 《vue中高德地图的使用》 (本篇)
  • 《vue中基于高德的多行政区域覆盖》
  • 《vue中高德搭配echarts做数据迁徙流线图》

接下来,开始第一篇,实现效果如下:

vue中高德地图的使用

1. 准备工作

  1. vue搭建
  2. 高德开发key值申请(链接:高德开放平台),key值请放入以下需要对号入座的地方
  3. 地图样式挑选,需要申请到key值后,在高德开放平台自动移地图模板处挑选配置。此处用 极夜蓝模板来示例,也可选择其他模板。然后发布=>复制与分享=>辅助出来样式ID。如: bb7f5165253f57515d7ba226b2******,然后放入以下需要对号入座的地方
  4. 注:第二步和第三步申请的两个值需要对应使用

2. 地图引入项目

入口文件index.html引入标签:

<script src="https://webapi.amap.com/maps?v=1.4.15&key=这里放入key值"></script>
<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>

vue.config.js中配置:

module.exports = {
    // ...

    configureWebpack(config) {
        // ...

        config.externals = {
            'AMap': 'AMap' // 高德地图配置
        }
    }
}

使用该功能的组件中引入:

import AMap from "AMap"

3. 使用

地图初始化即可:

<div class="map" id="map">
// 引入地图组件
import AMap from "AMap"
// 初始化
MapInit () {
    let _this = this;
        let map = new AMap.Map("map", {
        center: [105.397428, 35.90923],
        mapStyle: "amap://styles/这里放入样式ID", //设置地图的显示样式
        resizeEnable: true,
        zoom: 5
    });
}

得到初始化的地图:

4. 展示点

其实展示点在地图中叫做 地理编码,意思是将某个点的经纬度在地图中展现出来。与之类似的,高德也提供逆地理编码服务,此处不在我们示例范围内,有兴趣的可以自行在官方API中查看。接下来展示数据点:

// data中,location是地理编码,color 1绿2黄3红
dataList: [
    { location: "113.772,22.785", color: 1 },
    { location: "114.772,22.785", color: 3 },
    { location: "116.410778,39.897614", color: 2 },
    { location: "123.499706,41.857793", color: 2 },
    { location: "111.722363,40.868346", color: 1 },
    { location: "103.987988,30.662124", color: 3 }
]
// 初始化
let _this = this;
let map = new AMap.Map("adMap", {
    center: [105.397428, 35.90923],
    mapStyle: "amap://styles/bb7f5165253f57515d7ba226b25ad7ec", //设置地图的显示样式
    resizeEnable: true,
    zoom: 5
});
// 根据color状态展示不同的图片
const style = [
    {
        // 1
        url: "此处放一张图的url",
        anchor: new AMap.Pixel(5, 5),   // 位移
        size: new AMap.Size(10, 10) // 图片大小
    },
    {
        // 2
        url: "此处放另外一张图的url",
        anchor: new AMap.Pixel(5, 5),
        size: new AMap.Size(10, 10)
    },
    {
        // 3
        url: "此处再放一张图的url",
        anchor: new AMap.Pixel(5, 5),
        size: new AMap.Size(10, 10)
    }
];

let locationData = []; //存放经纬度的数组
let status = null;
for (let i = 0; i < _this.dataList.length; i++) {
let locationArr = _this.dataList[i].location.split(",");
// 判断需要展示的颜色类型
if (_this.dataList[i].dataList === 1) {
    status = 0; //根据下标来相对应样式 例如:绿色对应style数组中的第0个样式
} else if (_this.dataList[i].color === 2) {
    status = 1;
} else if (_this.dataList[i].color === 3) {
    status = 2;
}

locationData.push({
    lnglat: locationArr,
    style: status // 对应的status相对应的样式 style
});
}

// 点放置
let mass = new AMap.MassMarks(locationData, {
    opacity: 0.8,
    zIndex: 111,
    cursor: "pointer",
    style: style
});

let marker = new AMap.Marker({ content: " ", map: map });
    mass.on("mouseover", function(e) {
    marker.setPosition(e.data.lnglat); //用户相对应的经纬度
    marker.setLabel({ content: e.data.name }); //用户相对应的名字
});

mass.setMap(map);

5. 完成,启动

npm run serve启动,查看该示例,得到应有效果:

本文分享自微信公众号 - 流眸(zxm0146)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-11-02

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏coding

vue 路由组件

单页应用(single page web application,SPA),是在一个页面完成所有的业务功能,浏览器一开始会加载必需的HTML、CSS和JavaS...

7220
来自专栏雪胖纸的玩蛇日常

14.非父子组件之间传值

7120
来自专栏我的前端路

2018年度 35 个最好用 Vue 开源库

 在本文中,我们将推荐一些非常好用的 Vue 相关的开源项目。无论是开发新手还是经验丰富的老手,我们都喜欢开源软件包。对于开发者来说,如果没有这些开源软件包,很...

9800
来自专栏小蔚记录

vue-cli 3 ----- 项目频繁发送‘sockjs-node/info’请求

在vue-cli3跑项目时发现了这个问题,浏览器一直在频繁发送这个请求,导致联调时很不方便,而且本地开发时项目也不能实时更新。

10110
来自专栏一番码客

js获取所选文件路径

本来今天想用vue做一个button,点击后选择本地文件,并获取文件路径,但只在html下实现了,vue下还要研究下。

33020
来自专栏我的前端路

【Vue课堂】Vue.js 父子组件之间通信的十种方式

这篇文章介绍了Vue.js 父子组件之间通信的十种方式,不管是初学者还是已经在用 Vue 的开发者都会有所收获。无可否认,现在无论大厂还是小厂都已经用上了 Vu...

7300
来自专栏DevOps持续集成

vue学习篇-以优雅的姿势创建vue项目

小白一枚,今年(2019)准备学习一下前端的技术,因为发现自己对后端(python)相对比较熟悉但是还是写不出一个优雅的系统,可见前端的重要性,于是静下心学习。...

9010
来自专栏雪胖纸的玩蛇日常

15.vue中的路由vue-router

npm install vue-router --save / cnpm install vue-router --save

9120
来自专栏全栈前端精选

Vue3 中的数据侦测

目前的版本是 Pre-Alpha , 仓库地址: Vue-next, 可以通过 Composition API了解更多新版本的信息, 目前版本单元测试相关情况 ...

8320
来自专栏GitHubDaily

前端知名开源框架 Vue 发布重大更新!

本次发布的是 Alpha 预览版,根据 Vue 官方时间表,至少要等到 2020 年第一季度才有可能发布 3.0 正式版。

7720

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励