高德地图的基础使用

官方文档地址： https://lbs.amap.com/api/javascript-api/summary

1.异步引入高德地图库

//mounted钩子函数在初始化页面完成后，再对dom节点进行相关操作
mounted() {
    //地图加载完毕的回调函数
	window.onLoad  = function(){
        var map = new AMap.Map('container');
  	}												   //此处输入高德地图的key
   	var url = 'https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&callback=onLoad';
 	var jsapi = document.createElement('script');
 	jsapi.charset = 'utf-8';
  	jsapi.src = url;
  	document.head.appendChild(jsapi);
 } 

2.在结构中添加id为container的div并设置宽高即可显示

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

高德地图的一些配置

中心点/缩放等级/3D视图

var map=new AMap.Map('container',{
    //缩放等级 数字越小地图范围越大
	zoom:21,
    //中心点
	center:[113.32459,23.10668],
    //3D视图
	viewMode:'3D'
})

点标记的一些用法

添加一个标记点

      // 创建一个默认图标的点标记: 
      // 创建一个 Marker 实例：
      var marker = new AMap.Marker({
        position: new AMap.LngLat(116.39, 39.9),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        title: '北京'
      });

      // 将创建的点标记添加到已有的地图实例：
      map.add(marker);

添加多个点标记
1.创建一个名为hotels的数组

 const hotels = [
        {
          x: 113.45678,
          y: 23.98765,
          name: '空间的'

        },
        {
          x: 44,
          y: 70.9,
          name: '空间的'
        },
        {
          x: 70.9,
          y: 44,
          name: '空间的'
        }
      ]

2.遍历数组并添加

 let hotelMarkers = []
      hotels.forEach(hotel => {
        var marker = new AMap.Marker({
          position: [hotel.x, hotel.y],
          title: hotel.name
        })
        hotelMarkers.push(marker)
      })
	// 将创建的点标记添加到已有的地图实例：
      map.add(hotelMarkers);

添加工具条

AMap.plugin('AMap.ToolBar',function(){
        var toolbar=new AMap.ToolBar()
        map.addControl(toolbar)
      })