vue3+高德地图

前言：

        vue3中引入高德地图

高德地图：

官网地址

api地址

实现效果：

具体步骤：

1、官网申请高德的key

2、在public/index.html里面添加

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

3、新建组件 map.vue

<template>
  <div class="map" id="gd_map_d"></div>
</template>

<script>
  import { defineComponent,nextTick,onMounted } from 'vue'
  export default defineComponent({
    setup(){
      onMounted(() => {
        nextTick(()=>{
          initMap()
        })
      })
      const initMap = () => {
        //定义地图中心点坐标
        var center = new TMap.LatLng(39.984120, 116.307484)
        //定义map变量，调用 TMap.Map() 构造函数创建地图
        var map = new AMap.Map('gd_map_d', {
          pitch:15, // 地图俯仰角度，有效范围 0 度- 83 度
          viewMode:'3D' // 地图模式
        })



      }
      return {

      }
    }
  })

</script>

<style lang='scss' scoped>
  .map{
    width: 100%;
    height: 100%;
  }
</style>

4、我的高德key，（推荐用你自己的）

f06729af7d5970405b0cc9c156c475bb