[JavaScript知识库]vue高德地图学习 直接看最后推荐

前言：
高德地图文档很少，没有案例，又想学习一下高德地图基本使用 此致敬礼 记录一下
文档地址：https://elemefe.github.io/vue-amap

直接看最后推荐

引入
方式一：全局引入

npm install -S vue-amap

main.js写入

// 引入vue-amap
import VueAMap from 'vue-amap';
Vue.use(VueAMap);

// 初始化vue-amap
VueAMap.initAMapApiLoader({
  // 高德的key
  key: 'YOUR_KEY',
  // 插件集合
  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
  // 高德 sdk 版本，默认为 1.4.4
  v: '1.4.4'
});

页面写入

<template>
	<div class="amap-page-container">
		<div :style="{width:'100%',height:'800px'}">
			<el-amap vid="amap" :plugin="plugin" class="amap-demo" rotateEnable="true" :center="center">
			</el-amap>
		</div>
	</div>
</template>
<script type="text/javascript">
	export default {
		data() {
			const self = this;
			return {
				center: [121.59996, 31.197646],
				plugin: [{
					pName: "MapType",//卫星与地图切换
					defaultType: 1,
					events: {
						init(o) {
							console.log(o);
						},
					},
				}]
			}
		},
		methods: {}
	}
</script>

就可以得到一个简单的页面

方式二
按需引入

npm install -S vue-amap

页面写入

<template>
  <div id="container" style="width: 100%; height: 100%; resize: both"></div>
</template>


<script>
export default {
  data() {
    return {
      map: null,
    };
  },
  async created() {
    this.initMap();
  },

  methods: {
    //初始化地图
    initMap() {
      let AMap = window.AMap;
      let _this = this;
      // 地图的初始化
      _this.map = new AMap.Map("container", {
        zooms: [1, 19.9],
        center: [106.323597, 29.516401], //106.323238, lat: 29.515816
      });
    },
  },
};
</script>

<style>
#container {
  height: 100%;
}
</style>

你也可以得到一个地图

插件：
文档地址：https://elemefe.github.io/vue-amap/#/zh-cn/plugins/base
谷歌官方插件库：https://lbs.amap.com/api/javascript-api/guide/abc/plugins/

//在mainjs中plugin数组引入插件
"AMap.Autocomplete", //输入提示插件
"AMap.PlaceSearch", //POI搜索插件
"AMap.Scale", //右下角缩略图插件 比例尺
"AMap.OverView", //地图鹰眼插件
"AMap.ToolBar", //地图工具条
"AMap.MapType", //类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
"AMap.PolyEditor", //编辑 折线多，边形
"AMap.CircleEditor", //圆形编辑器插件
"AMap.Geolocation" //定位控件，用来获取和展示用户主机所在的经纬度位置

使用

<el-amap vid="amap" :plugin="plugin" class="amap-demo" rotateEnable="true" :center="center">

//在data里面配置地图
 zoom:16,
 center:[121.406051,31.179695],
 plugin：[{pName：'MapType'}]// //pName为必填字段 里面配置要进行查询文档

贼菜 理解错了
自我感觉比较有用的链接
地图控件（官方）：https://lbs.amap.com/api/javascript-api/reference/map-control
例： main.js

import VueAMap from 'vue-amap';
Vue.use(VueAMap);
// 初始化vue-amap
VueAMap.initAMapApiLoader({
  // 高德的key
  key: 'yourkey',
  // 插件集合
  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor','AMap.Buildings'],
  // 高德 sdk 版本，默认为 1.4.4
  v: '1.4.4'
});

页面

<template>
	<div class="amap-page-container">
		<div :style="{width:'100%',height:'800px'}">
			<el-amap vid="amap" :plugin="plugin" class="amap-demo" rotateEnable="true" :center="center">
			</el-amap>
		</div>
	</div>
</template>
<script type="text/javascript">
	export default {
		data() {
			const self = this;
			let AMap = window.AMap;
			return {
				center: [121.59996, 31.197646],
				plugin: [{
					pName: "MapType",
					defaultType: 1,
					showTraffic:true,//交通图层
					showRoad:true,//路网图层
					events: {
						init(o) {
							o.hide();//隐藏控件
							o.show();//显示控件
						},
					},
				}]
			}
		},
		methods: {}
	}
</script>

官网html写法

mapObj = new AMap.Map("imap",{
    center:new AMap.LngLat(116.368904,39.913423),
    zoom:16
});
mapObj.plugin(["AMap.MapType"],function(){
    //地图类型切换
    var type= new AMap.MapType({
    defaultType:1 //使用3D地图
    });
    mapObj.addControl(type);
});

另一种写法 推荐！！！

index.html

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

vue.config.js引入

module.exports = {
  configureWebpack: {
    externals: {
      'AMap': 'AMap' // 高德地图配置
    }
  }
}

页面

<template>
  <div class="home">
  	 <div id="map-container" style="width:100%; height:500px"></div>
  </div>
</template>

<script>
	import AMap from "AMap";
export default {
  name: 'Home',
  data(){
  	return {
  		map:null
  	}
  },
  components: {
  },
  created(){
  	 let that = this;
	 that.$nextTick(() => {
        //初始化地图
        that.initMap();
      });
  },
  methods:{
  	initMap(){
      let that = this;
      //自带的插件使用
//    that.map = new AMap.Map("map-container", {
//      resizeEnable: true,
//      zoom: 7,
//      center: [120.6641561, 31.3063851] //地图中心点
//    });
//    AMap.plugin(["AMap.ToolBar"], function() {
//      //加载工具条
//      var tool = new AMap.ToolBar();
//      that.map.addControl(tool);
//    });
      //还原html写法
      var buildings = new AMap.Buildings({
        'zooms':[16,18],
        'zIndex':10,
        'heightFactor':2//2倍于默认高度，3D下有效
    });//楼块图层    
    that.map = new AMap.Map('map-container', {
        center: [116.397428, 39.90923],
        viewMode:'3D',
        pitch:60,
        rotation:-35,
        features:['bg','road','point'],//隐藏默认楼块
        mapStyle:'amap://styles/light',
        layers: [new AMap.TileLayer.Satellite(),buildings],//高德默认标准图层
        zoom: 16
    });
      
    }
  }
}
</script>
<style type="text/css">
	#container {width:300px; height: 180px; }  
</style>