Vue 2.x 使用高德地图

高德地图 开放平台

1.高德开放平台 -- 注册账号

2.创建key和安全秘钥

2. 1 控制台  --  应用管理中 -- 创建新应用(应用名 与 应用类型)

2.2  添加  --  key名  -- 服务平台(web端JS API)--  同意  --  提交 创建key和安全秘钥

 

创建Vue项目

1.在项目的index.html 中引入

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script> 

2.创建XXX.vue文件

<template>

  <div id="container" style="height:500px; overflow:hidden;"></div>

</template>

3.渲染到页面上

<script >
  export default {
    mounted() {
      var map = new AMap.Map('container', {
      zoom:11,  //级别 缩放比例3--17
      center: [116.397428,39.90923],  //中心点坐标 北京天安门坐标 116.397428, 39.90923
      viewMode:'3D'//使用3D视图
      });

    }
  }
</script>

 

 
posted @ 2022-05-05 11:37  向大海  阅读(214)  评论(0编辑  收藏  举报