vue中引入原生高德地图以及常用功能的实现

参考文档： lbs.amap.com/api/javascr…

<template>
  <div id="app">
    <div class="mapContaienr">
      <h3>添加选点请输入坐标</h3>
      <label>
        经度：
        <input />
      </label>
      <label>
        纬度：
        <input />
      </label>
      <button class="btn">输入完成</button>
      <button class="btn">清空输入</button>

      <div id="container"></div>

    </div>

  </div>
</template>

<script setup lang="ts">
  import {
    onMounted,
    reactive,
    ref,
    getCurrentInstance,
    shallowRef
  } from 'vue'
  import AMapLoader from '@amap/amap-jsapi-loader'

  const initMap = () => {

    let map: any = null;

    AMapLoader.load({
      key: "31b11165c0e5bb2565b1604f82f885a3", // 申请好的Web端开发者Key，首次调用 load 时必填
      version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: [''], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    }).then((AMap) => {

      //建立必应路况图层--初始图层
      var googleLayer1 = new AMap.TileLayer({
        // 自定义切片取图地址
        getTileUrl: 'https://gac-geo.googlecnapps.cn/maps/vt/lyrs=m@142&hl=zh-cn&gl=cn&x=[x]&y=[y]&z=[z]&s=Galil'
      })

      map = new AMap.Map("container", {
        center: [116.397428, 39.90923], //设置地图中心点坐标
        layers: [ //设置图层,可设置成包含一个或多个图层的数组
          googleLayer1
          // new AMap.TileLayer.Satellite(),
          // new AMap.TileLayer.RoadNet()
        ],
        zooms: [4, 18], //设置地图级别范围
        zoom: 13, //设置地图显示的缩放级别
        mapStyle: 'amap://styles/whitesmoke', //设置地图的显示样式
        viewMode: '2D', //设置地图模式
        lang: 'zh_cn', //设置地图语言类型
      });

      // 加载基础控件--非UI组件
      AMap.plugin(['AMap.Scale', 'AMap.ToolBar'], function () { //异步加载插件

        //工具条，控制地图的缩放、平移等  
        var toolbar = new AMap.ToolBar();
        map.addControl(toolbar);

        //比例尺
        map.addControl(new AMap.Scale({
          position: 'RB'
        }));

      });

      //设置地图语言
      // map.setLang("zh-cn");

      //覆盖物有多种类型，包括点标记、矢量图形、信息窗体等，均可以使用add方法添加。

      // 创建一条折线覆盖物
      var path = [
        new AMap.LngLat("116.368904", "39.913423"),
        new AMap.LngLat("116.382122", "39.901176"),
        new AMap.LngLat("116.387271", "39.912501"),
        new AMap.LngLat("116.398258", "39.904600")
      ];
      var polyline = new AMap.Polyline({
        path: path,
        borderWeight: 2, // 线条宽度，默认为 1
        strokeColor: 'red', // 线条颜色
        lineJoin: 'round' // 折线拐点连接处样式
      });
      map.add(polyline);

      // 创建两个点标记
      var marker1 = new AMap.Marker({
        position: new AMap.LngLat(117.39,
        39.9), // 经纬度对象，如 new AMap.LngLat(116.39, 39.9); 也可以是经纬度构成的一维数组[116.39, 39.9]
        title: '北京'
      });
      var marker2 = new AMap.Marker({
        position: new AMap.LngLat(118.39,
        39.9), // 经纬度对象，如 new AMap.LngLat(116.39, 39.9); 也可以是经纬度构成的一维数组[116.39, 39.9]
        title: '北京'
      });

      // 构造矢量圆形
      var circle = new AMap.Circle({
          center: new AMap.LngLat("116.403322", "39.920255"), // 圆心位置
          radius: 1000,  //半径
          strokeColor: "#F33",  //线颜色
          strokeOpacity: 1,  //线透明度
          strokeWeight: 3,  //线粗细度
          fillColor: "#ee2200",  //填充颜色
          fillOpacity: 0.35 //填充透明度
      });

      // 将以上覆盖物添加到地图上
      // 单独将点标记添加到地图上
      // map.add(marker1);
      // map.add(marker2);
    
      // add方法可以传入一个覆盖物数组，将点标记和矢量圆同时添加到地图上
      map.add([marker1,marker2,circle]);

      

      // 自动适配到合适视野范围
      // 无参数，默认包括所有覆盖物的情况
      map.setFitView();
      // 传入覆盖物数组，仅包括polyline和marker1的情况
      // map.setFitView([polyline, marker1]);

      //设置地图显示样式
      // map.setMapStyle('amap://styles/whitesmoke');


    }).catch(e => {
      console.log(e);
    })
  }

  onMounted(() => {
    initMap()
  })
</script>

<style scoped>
  #container {
    width: 1400px;
    height: 800px;
  }
</style>