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

电玩女神 2022-05-13 06:36 428阅读 0赞

### 文章目录 ###

*   *  开始
     *   *  准备工作
         *   *  注册Key
             *  前期页面上的准备
     *  插件使用
     *   *  插件使用步骤
         *   *  引入插件
     *  定位
     *   *  自定义地图显示位置和缩放级别
         *  自定义坐标和缩放级别
         *  获取定位信息（需要使用插件）
         *   *  浏览器定位
             *  定位到当前位置
             *  IP定位获取当前城市信息
     *  覆盖物
     *   *  添加覆盖物
         *  获取覆盖物
         *  覆盖物的操作
     *  图层
     *   *  设置图层
         *  获取图层
         *  移除图层
         *  添加实时路况图层
         *  添加卫星图层
     *  3D地图
     *  信息窗体（自定义信息窗体）
     *   *  创建信息窗体实例
         *  设置窗体内容（可以使用css控制样式）
         *  打开信息窗体
         *  关闭信息窗体
     *  未完待续...

## 开始 ##

### 准备工作 ###

#### 注册Key ####

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

1.  首先，[注册开发者账号][Link 1]，成为高德开放平台开发者
2.  登陆之后，在进入「应用管理」 页面「创建新应用」
3.  为应用添加 Key，「服务平台」一项请选择「 Web 端 ( JSAPI ) 」 ![这里写图片描述][70]
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>

![这里写图片描述][70 1]  
![这里写图片描述][70 2]

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

## 插件使用 ##

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

### 插件使用步骤 ###

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即为当前所在城市信息
    	    }
    	  })
    	})

## 覆盖物 ##

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

### 添加覆盖物 ###

1.  点标记

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nX2Z1bGFp_size_16_color_FFFFFF_t_70_pic_center]

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);

1.  灵活点标记

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

1.  导航，导航同样属于覆盖物范围

//导航需要一个起点和终点 
       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));

1.  海量点标记MassMarks

*  海量点标记不是普通的覆盖物，它实际上是由海量点组成的一个图层
 *  对于1000个以上的点标记，强烈建议海量点，相当于减少dom操作，极大的提升了浏览器性能  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nX2Z1bGFp_size_16_color_FFFFFF_t_70_pic_center 1]

// 创建样式对象
    	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);

### 添加实时路况图层 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nX2Z1bGFp_size_16_color_FFFFFF_t_70_pic_center 2]

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

### 添加卫星图层 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nX2Z1bGFp_size_16_color_FFFFFF_t_70_pic_center 3]

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

## 3D地图 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nX2Z1bGFp_size_16_color_FFFFFF_t_70_pic_center 4]

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

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nX2Z1bGFp_size_16_color_FFFFFF_t_70_pic_center 5]

### 创建信息窗体实例 ###

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

// 创建 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()

## 未完待续… ##

[Link 1]: https://lbs.amap.com/dev/id/newuser
[70]: /images/20220513/c2e4b77c51814664a496f9156798857c.png
[70 1]: /images/20220513/da591591bc1b4d46bf1211e11dfbc35c.png
[70 2]: /images/20220513/1c0c9d5c82ac4061bb7158fefc659d8e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nX2Z1bGFp_size_16_color_FFFFFF_t_70_pic_center]: /images/20220513/3aad2468228448b08e2068ccc5dee22d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nX2Z1bGFp_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20220513/1459e860b1fa4ec2940498f08c6ddba7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nX2Z1bGFp_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20220513/41f0cabc232846cea59c48adbd3b15ec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nX2Z1bGFp_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20220513/a48d469291594aebb509ce5be097e1f0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nX2Z1bGFp_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20220513/aaf20e3fe72a40fbb2b77d9a5515e811.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nX2Z1bGFp_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20220513/6c805be98d6b4844b2f9aeaf7a68590f.png