Vue - 加载一个高德地图

红太狼 2021-07-25 21:53 552阅读 0赞

**一. 在最外层的html.js中引入高德key**  
![在这里插入图片描述][20200519103055746.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70]

## 二.组件中加载高德地图 ##

<template>
      <div class="wrap">
        <div id="map"></div>
      </div>
    </template>
    
    <script>
    let map = null;
    export default {
      data() {
        return {};
      },
      mounted() {
        this.getMap();
      },
      methods: {
        getMap() {
          map = new AMap.Map("map", {
            mapStyle: "amap://styles/fresh", //设置地图的显示样式
            zoom: 13, //设置地图显示的缩放级别
            center: [118.735995, 32.0219131], //设置地图中心点坐标
            viewMode: "2D", //设置地图模式
            lang: "zh_cn", //设置地图语言类型
            // layers: [//设置图层,可设置成包含一个或多个图层的数组
            //     new AMap.TileLayer.Satellite(),
            //     new AMap.TileLayer.RoadNet()
            // ],
          });
          /**
           * 实时路况图层
           */
          var trafficLayer = new AMap.TileLayer.Traffic({
            zIndex: 10,
          });
          //添加图层到地图
          map.add(trafficLayer);
        },
      },
    };
    </script>
    
    <style scoped>
    #map {
      width: 1080px;
      height: 750px;
    }
    </style>

[20200519103055746.png]: /images/20210725/02a15f6a113844018cf0728da73e4fe3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70]: /images/20210725/4fe8f00f317540abaa664a57f821e4d9.png

发表评论取消回复

表情：

评论列表（有 0 条评论，552人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue使用高德地图加载kml文件

在使用 Vue 的项目中使用高德地图加载 kml 文件，你可以这么做： 1. 在高德地图官网上注册开发者账号并申请应用密钥。 2. 在项目中安装高德地图的 JavaScr

浅浅的花香味﹌/ 2024年03月25日 12:31/ 0 赞/ 88 阅读

相关 Openlayers实战：加载高德地图

在国内地图市场上，高德地图占据了重要的地位。Openlayers可以加载高德地图，这其中根据不同的参数，可以显示遥感地图，矢量地图等，可以显示中文，英文。效果图 ![

我不是女神ヾ/ 2024年03月17日 19:29/ 0 赞/ 100 阅读

相关 vue3高德地图

\在src下创建Amap.d.ts文件 declare namespace AMap { /此对象用于表示地图、覆盖物、叠加层上的各种鼠标事件返回，包含

系统管理员/ 2022年12月09日 11:51/ 0 赞/ 311 阅读

相关 vue引入原生高德地图

由于工作上的需要，今天捣鼓了半天高德地图。如果定制化开发需求不太高的话，可以用vue-amap，这个我就不多说了，详细就看官网 [https://elemefe.githu

野性酷女/ 2022年11月05日 11:50/ 0 赞/ 265 阅读

相关【vue】vue集成高德地图

> `前言` vue2.x集成高德地图参考这篇文章：[https://blog.csdn.net/athwang/article/details/108236551][htt

朱雀/ 2022年10月07日 05:56/ 0 赞/ 305 阅读

相关 vue 调用高德地图

一. vue-amap，一个基于 Vue 2.x 和高德地图的地图组件 https ://ele mefe.gi thub.io/vue-a map/\/ 这个就不细说了，按

Myth丶恋晨/ 2022年06月16日 03:25/ 0 赞/ 283 阅读

相关高德地图地图的加载（一）

首先要申请高德地图开发的key值,这里就不做叙述。 HTML部分： ![\\\\][20190117111316684.png] \-css部分 html, b

谁践踏了优雅/ 2022年03月26日 12:42/ 0 赞/ 726 阅读

相关 ArcGIS API for JavaScript 加载高德地图

前言加载高德作为底图切片线划图层 gaodeLayer.js define(["dojo/_base/declare", "

谁践踏了优雅/ 2021年09月15日 03:28/ 0 赞/ 564 阅读

相关 vue中使用高德地图

html引入高德API： <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4

た入场券/ 2021年07月26日 12:31/ 0 赞/ 609 阅读

相关 Vue - 加载一个高德地图

一. 在最外层的html.js中引入高德key ![在这里插入图片描述][20200519103055746.png] ![在这里插入图片描述][watermark_t

红太狼/ 2021年07月25日 21:53/ 0 赞/ 553 阅读