开门见山地说,现如今地图相关的开发业务在工作中越来越常见,目前市面上主流的地图开发还是以百度和高德为主,今天就来讲一下高德地图的配置和在vue上的初始化创建,帮助大家更好更快的了解高德地图开发相关的内容。

一. 注册地图
 无论是高德地图开发还是百度地图开发,第一步都要先在其管理平台上注册申请使用,我们以高德地图开发为例。先登录高德开放平台,网址链接:高德开放平台
在这里插入图片描述

 在右上角点击注册或者登录账号,因为高德地图是阿里系的,目前暂不支持微信登录,但能使用支付宝登录。登录成功后点击右上角的“控制台”进入高德控制台。下一步在左侧菜单“应用管理”中点击“我的应用”。
在这里插入图片描述

 点击右侧“创建新应用”,填写表单后会生成一个新应用,在新应用右边点击“添加”,填写其中表单信息,服务平台此次为演示用选择“Web端(JS API)”,最后提交就能生成可用的地图应用配置了。
在这里插入图片描述
在这里插入图片描述

 配置好后要注意上面的key和安全密钥,这是后续在程序中初始化地图主要用到的两个身份认证信息。


二. 在vue中创建一个新高德地图
 在高德控制台配置好地图后,就可以在vue中去创建一个地图了,先用NPM 方式安装使用 Loader,运行下面的命令:

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

 然后在全局中设置地图的安全密钥,安全密钥的值就是之前在高德控制台里注册好的安全密钥,加入以下代码:

// 设置安全密钥
window._AMapSecurityConfig = {
  securityJsCode: ''
}

 在需要展示地图的界面中创建 div 标签作为地图容器 ,并设置地图容器的 id:

<template>
     <div id="gao-de-map" style="height: 700px;width: 100%"></div>
</template>

 在需要展示地图的界面中引入 amap-jsapi-loader

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

 声明map对象

data(){
      return{
        map:null,
     } 
 },

 创建地图初始化函数 initMap,并在mounted中调用地图初始化函数,其中initMap里的key是高德工作台中配置的key

mounted() {
    this.initMap()
  },
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("gao-de-map",{  //设置地图容器id
                viewMode:"2D",    //是否为3D地图模式
                zoom:13,           //初始化地图级别
                center:[116.397428, 39.90923], //初始化地图中心点位置(北京)
            });
        }).catch(e=>{
            console.log(e);
        })
    },
},

 最后就能在网页上看到生成的地图了。
在这里插入图片描述


三. 在地图左下角加比例尺,右下角加放大缩小和方向盘
 在初始化函数 initMap中初始化地图的时候加入三个插件:

initMap(){
        AMapLoader.load({
            key:"",             // 申请好的Web端开发者Key,首次调用 load 时必填
            version:"2.0",      // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
            plugins:['AMap.Scale',
          'AMap.ToolBar',
          'AMap.ControlBar'],       // 需要使用的的插件列表,如比例尺'AMap.Scale'等
        }).then((AMap)=>{
            this.map = new AMap.Map("gao-de-map",{  //设置地图容器id
                viewMode:"2D",    //是否为3D地图模式
                zoom:13,           //初始化地图级别
                center:[116.397428, 39.90923], //初始化地图中心点位置(北京)
            });

        this.map.addControl(new AMap.Scale()) // 添加左下角的比例尺
          let toolBar = new AMap.ToolBar({
            position: {
              bottom: '20px',
              right: '35px'
            }
          })
          let controlBar = new AMap.ControlBar({
            position: {
              bottom: '100px',
              right: '10px'
            }
          })
          this.map.addControl(toolBar) // 添加右下角的放大缩小
          this.map.addControl(controlBar) // 方向盘
        }).catch(e=>{
            console.log(e);
        })
    }

 然后在地图的左下角和右下角就有对应的插件了。
在这里插入图片描述

 总结:以上就是高德地图开发中关于地图的配置及在vue上初始化创建地图的步骤,希望能够帮到大家,谢谢!

Logo

前往低代码交流专区

更多推荐