vue使用高德地图过程

高德地图API官方文档

http://lbs.amap.com/api/javascript-api/guide/abc/prepare

配置项

1、引入高德JS API 脚本

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

2、移动端开发，在head中添加viewport设置。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

Vue界面

1、添加div标签作为地图容器，同时为该div指定id属性；

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

2、Vue 生命周期 mounted 中编写代码

通用：简单创建一个地图

var map = new AMap.Map('container', {
        zoom:11,//级别（最低级别3，最高级别20）
        center: [116.397428, 39.90923],//中心点坐标
        viewMode:'3D'//使用3D视图
});

Eg:实现定位功能

	// 自适应设置地图大小
	var size = document.getElementById("container")
	size.style.width = document.documentElement.clientWidth + "px"
	size.style.height = (document.documentElement.clientHeight-44) +"px"
	// 创建地图 
	var map = new AMap.Map('container', {
	    resizeEnable: true,
	});
	// 使用插件
	map.plugin('AMap.Geolocation', function() {
	      var geolocation = new AMap.Geolocation({
	       // 是否使用高精度定位，默认：true
	      enableHighAccuracy: true,
	       // 设置定位超时时间，默认：无穷大
	      timeout: 10000,
	      // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
	      buttonOffset: new AMap.Pixel(10, 20),
	      //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
	      zoomToAccuracy: true,     
	      //  定位按钮的排放位置,  RB表示右下
	      // buttonPosition: 'RB'
	});
	map.addControl(geolocation)
	geolocation.getCurrentPosition()
	AMap.event.addListener(geolocation, 'complete', onComplete)
	AMap.event.addListener(geolocation, 'error', onError)
	 function onComplete (data) {
		// 定位成功 data定位点的信息
	 }
	 function onError (data) {
		// 定位失败 
	}
});