高德地图的简单使用

百度地图和高德地图的api我们在开发过程中会经常使用

今天呢,和大家聊一聊高德地图应该如何使用,地图类的应用场景有很多,比如大数据平台的地图展示,官网联系我们模块以及很多后台管理系统的坐标获取,打车类,电商类平台都会经常用到,对于,刚毕业或者刚工作的入门者来说,非常有必要学一学,练一练.

我还是从打开文档 - 注册账号获取密钥 - 使用api来为大家一一介绍

1.打开文档

搜索高德地图 左下角找到开放平台 2.注册账号,创建应用,拿到密钥 3.当我们创建好应用后,我们就可以看到key密钥了

此时,我们就可以打开文档,进行api的使用了

4.我们打开高德开放平台,找到文档 现在就可以制作我们想要的地图页面了

5.npm安装loader

npm i @amap/amap-jsapi-loader --save

此时,在我们的package.json文件中就可以看到我们安装的loader 6.现在准备一个vue文件

6.1.创建dom元素

<!-- 地图模块 -->
<div id="container"></div>

6.2.引入该loader

import AMapLoader from '@amap/amap-jsapi-loader';

6.3初始化地图页面,并展示

methods:{
    initMap(){
        AMapLoader.load({
            key:"您的密钥",      // 申请好的Web端开发者Key，首次调用 load 时必填
            version:"2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            plugins:[''],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        }).then((AMap)=>{
            this.map = new AMap.Map("container",{  //设置地图容器id
                viewMode:"3D",    //是否为3D地图模式
                zoom:18,           //初始化地图级别
                center:[108.718099,34.300293], //初始化地图中心点位置
            });
        }).catch(e=>{
            console.log(e);
        })
    },
  },
  mounted(){
    this.initMap()
  }

大功告成,这时,高德地图组件就会在页面显示出来了 学到了就点个赞图片和在看吧图片,建议收藏