html前端使用高德地图入门教程

最新文章：vue项目使用高德地图

开始

准备工作

注册Key

如果开发者账号包括Key已经有了，请忽略此步骤

1. 首先，注册开发者账号，成为高德开放平台开发者

2. 登陆之后，在进入「应用管理」 页面「创建新应用」

3. 为应用添加 Key，「服务平台」一项请选择「 Web 端 ( JSAPI ) 」

4. 记住这个Key，等会要用，以后可能也会用，一定要记住。

前期页面上的准备

此时距离你的页面上出现地图，已经更近了一步

1. 新建一个DIV，作为地图的容器（这一步和使用其他插件一样，必须新建一个挂载点）。
2. 给这个新建的div设置好宽高（这里提醒一下，可以使用弹性布局，没有影响）。
3. 在body后面引入高德地图的js。
4. 最后，异步初始化高德地图插件，一定要异步，使用window.onLoad。

//新建一个容器
<div id="wrapper"></div>
//设置宽和高
<style>
	#wrapper{
		width: 500px;
		height: 500px;
	}
</style>

//引入js
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.8&key=您申请的key值"></script> 
* 这里需要刚才申请的Key

<script>
	//初始化地图插件
	window.onload = function(){
		var map = new AMap.Map('wrapper');
	}
</script>

• 好了，现在你的页面上已经出现了高德地图

插件使用

地图本身功能有限，很多地方需要使用插件满足自己的需求

插件使用步骤

1. 引入插件
2. 创建插件实例
3. 调用插件方法

引入插件

1.异步引入插件（推荐这种）

	//引入单个插件
	AMap.plugin('AMap.ToolBar',function(){//异步加载插件
        var toolbar = new AMap.ToolBar();
        map.addControl(toolbar);
    });
    //引入多个插件
    AMap.plugin(['AMap.ToolBar','AMap.Driving'],function(){//异步同时加载多个插件
      var toolbar = new AMap.ToolBar();
      map.addControl(toolbar);
      var driving = new AMap.Driving();//驾车路线规划
      driving.search(/*参数*/)
	});

2.同步引入插件（不推荐使用，就不讲了）

定位

如果在地图初始化时不配置中心点，和缩放级别，这个时候地图上面默认是你所处的位置，缩放级别也是默认的
PC端默认是IP定位，如果IP定位无法使用则会自动切换到浏览器定位
移动端默认是浏览器定位，如果浏览器定位无法使用则会自动切换到IP定位

自定义地图显示位置和缩放级别

	//对于地图的自定义，属性有很多，只列举三个
	var map = new AMap.Map('container', {
        zoom:11,//缩放级别
        center: [116.397428, 39.90923],//地图显示中心点坐标，如果没有center属性，则会定位到你当前所处的位置
        viewMode:'3D'//使用3D视图
    });

自定义坐标和缩放级别

	//设置地图显示的中心点
	map.setCenter([116.397428, 39.90923]);
	//设置地图显示中心点，并缩放到指定级别
	map.setZoomAndCenter(16, [116.397428, 39.90923]);

获取定位信息（需要使用插件）

浏览器定位

	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'
	  })
	
	  geolocation.getCurrentPosition()
	  AMap.event.addListener(geolocation, 'complete', onComplete)
	  AMap.event.addListener(geolocation, 'error', onError)
	
	  function onComplete (data) {
	    // data是具体的定位信息
	    // 获取当前位置信息
	    this._position = [data.position.getLng(),data.position.getLat()];
	  }
	
	  function onError (data) {
	    // 定位出错
	  }
	})

定位到当前位置

点击按钮，定位到当前位置

//根据浏览器定位，已经获取到当前位置信息
map.setCenter(this._position); 
//如果同时需要缩放到指定缩放级别
map.setZoomAndCenter(13, this._position);

IP定位获取当前城市信息

	AMap.plugin('AMap.CitySearch', function () {
	  var citySearch = new AMap.CitySearch()
	  citySearch.getLocalCity(function (status, result) {
	    if (status === 'complete' && result.info === 'OK') {
	      // 查询成功，result即为当前所在城市信息
	    }
	  })
	})

覆盖物

目前只用到点标记，所以暂时只讲点标记

添加覆盖物

点标记

• 使用点标记肯定都是自定义点标记，可以自定义图片，字体等

	var marker = new AMap.Marker({
        icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
        position: [116.406315,39.908775],
        offset: new AMap.Pixel(-13, -30)
    });
	
	// 将创建的点标记添加到已有的地图实例：
	map.add(marker);
	
	// 移除已创建的 marker
	map.remove(marker);

灵活点标记

• 标记大小会随着地图缩放跟着变化

导航

• 导航同样属于覆盖物范围

   //导航需要一个起点和终点 
   var driving = new AMap.Driving({
        map: map,
        panel: "panel"
    }); 
    // 根据起终点经纬度规划驾车导航路线
    driving.search(new AMap.LngLat(116.379028, 39.865042), new AMap.LngLat(116.427281, 39.903719));

海量点标记MassMarks

• 海量点标记不是普通的覆盖物，它实际上是由海量点组成的一个图层
• 对于1000个以上的点标记，强烈建议海量点，相当于减少dom操作，极大的提升了浏览器性能
  

	// 创建样式对象
	var styleObject = new AMap.StyleObject({
	    url: '//vdata.amap.com/icons/b18/1/2.png',  // 图标地址
	    size: new AMap.Size(11,11),      // 图标大小
	    anchor: new AMap.Pixel(5,5) // 图标显示位置偏移量，基准点为图标左上角
	});
	// 创建海量点
	var massMarks = new AMap.MassMarks({
	    zIndex: 5,  // 海量点图层叠加的顺序
	    zooms: [3, 19],  // 在指定地图缩放级别范围内展示海量点图层
	    style: styleObject  // 设置样式对象
	});
	// 海量点信息
	var data = [{
	    lnglat: [116.405285, 39.904989], //点标记位置
	    name: 'beijing',
	    id:1
	}, // {}, …,{}, …
	];
	massMarks.setData(data);
	// 将海量点添加至地图实例
	massMarks.setMap(map);

获取覆盖物

	//获取所有的覆盖物（点标记，导航等）
	that.map.getAllOverlays();
	//获取所有的点标记
	that.map.getAllOverlays('marker');

这里获取所有的点标记或覆盖物，意思是地图上面所有的添加的点标记或者覆盖物，而不是当前视野范围内的点标记或者覆盖物,如果有需求是获取当前视野范围内的点标记或覆盖物，就需要自己根据这个方法写了。具体什么方法，如果有想了解的，请在下方留言。

覆盖物的操作

	1.删除所有覆盖物
	// 使用clearMap方法删除所有覆盖物
	map.clearMap();
	
	2.删除点标记
	// 单独移除点标记
	map.remove(marker);
	
	3.取消导航
	
	//取消导航覆盖物
	driving.clear();
	
	//一般覆盖物都会有隐藏和显示的方法，这个可以极大的优化性能，因为增加和删除覆盖物操作非常浪费性能。
	4.覆盖物隐藏
	marker.hide();
	5.覆盖物显示
	marker.show();

图层

设置图层

	// 构造官方卫星、路网图层
	var layers =  [
	    new AMap.TileLayer.Satellite(),
	    new AMap.TileLayer.RoadNet()
	]
	// 地图上设置图层
	map.setLayers(layers);

获取图层

	//获取图层数据
	map.getLayers();

移除图层

	// 移除一个图层
	// layer1指的是建立图层的变量
	map.remove(layer1);

添加实时路况图层

	//实时路况图层
    var trafficLayer = new AMap.TileLayer.Traffic({
        zIndex: 10
    });
    map.add(trafficLayer);//添加图层到地图

添加卫星图层

	//卫星图层
    var satelliteLayer = new AMap.TileLayer.Satellite({
        zIndex: 9
    });
    map.add(satelliteLayer);//添加图层到地图

3D地图

	var map = new AMap.Map('container', {
	    pitch:75, // 地图俯仰角度，有效范围 0 度- 83 度
	    viewMode:'3D' // 地图模式
	});

信息窗体（自定义信息窗体）

工作中原生的信息窗体往往无法满足需求，此时使用自定义信息窗体。
应用场景：配合点标记使用，鼠标移入或者点击点标记，弹出窗体。

创建信息窗体实例

• 可以全局保存实例，在需要的地方随时调用打开窗体方法/关闭窗体方法

// 创建 infoWindow 实例 
var infoWindow = new AMap.InfoWindow({
   isCustom: true,  //使用自定义窗体
   content: '',  //传入 dom 对象，或者 html 字符串
   offset: new AMap.Pixel(16, -50) //相对基点的偏移量
});

设置窗体内容（可以使用css控制样式）

• 可以通过css控制传入的dom元素的样式

infoWindow.setContent(
	`<div class="demo-content">
		自定义信息窗体
	</div>`
);

打开信息窗体

• 该方法传入两个参数

1. map 当前的地图实例
2. position 需要代开信息窗体的经纬坐标，通常是点标记的坐标

infoWindow.open(map, position);

关闭信息窗体

infoWindow.close()

未完待续…