vue使用高德地图服务

首先使用npm方式引入高德

// npm引入高德
npm i @amap/amap-jsapi-loader

页面中引入高德地图插件

// 页面引入高德插件
import AMapLoader from '@amap/amap-jsapi-loader';
window._AMapSecurityConfig = {
	securityJsCode: '',//高德地图密钥
}

页面中使用高德地图

 AMapLoader.load({
 	key: "高德地图申请的key",
  //此处填入我们注册账号后获取的Key
 	version: "2.0",
  //指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
 	plugins: ['AMap.MarkerCluster'],
  //需要使用的的插件服务列表，如比例尺'AMap.Scale'等
}).then((AMap) => {
  // 创建卫星图层
  	var satellite = new AMap.TileLayer.Satellite();

  	this.satelliteMap = new AMap.Map("需要绑定的节点ID", {
	    center: [114.223939, 22.699103],
	    zoom: 13,
	    layers: [
	      satellite
	    ]
  	});
})

全局main.js文件中引入高德地图插件

// main.js全局引入高德插件
import AMapLoader from '@amap/amap-jsapi-loader';

Vue.prototype.AMapLoader = AMapLoader



//页面调用
this.AMapLoader.load({
 	key: "高德地图申请的key",
  //此处填入我们注册账号后获取的Key
 	version: "2.0",
  //指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
 	plugins: ['AMap.MarkerCluster'],
  //需要使用的的插件服务列表，如比例尺'AMap.Scale'等
}).then((AMap) => {
  // 创建卫星图层
  	var satellite = new AMap.TileLayer.Satellite();

  	this.satelliteMap = new AMap.Map("需要绑定的节点ID", {
	    center: [114.223939, 22.699103],
	    zoom: 13,
	    layers: [
	      satellite
	    ]
  	});
})