初识高德地图-Web

高德地图
引入：

1、初步引入地图

<div id="Container"></div>
<input id="input_id">

//地图初始化
initMap(){
	//初步引入地图
	let map = new AMap.Map("Container", {
		zooms: [4,18],//设置地图级别范围
		zoom: 11, //级别
	    animateEnable: true,
	    resizeEnable: true, 
	    center: [116.397428, 39.90923],//中心点坐标
	    viewMode:'3D' //使用3D视图
	});
	
	// 定位
    map.plugin('AMap.Geolocation', () => {
         geolocation = new AMap.Geolocation({
	        enableHighAccuracy: true,//是否使用高精度定位，默认:true
	        timeout: 10000,          //超过10秒后停止定位，默认：无穷大
	        maximumAge: 0,           //定位结果缓存0毫秒，默认：0
	        convert: true,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
	        showButton: true,        //显示定位按钮，默认：true
	        buttonPosition: 'LB',    //定位按钮停靠位置，默认：'LB'，左下角
	        buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
	        showMarker: true,        //定位成功后在定位到的位置显示点标记，默认：true
	        showCircle: true,        //定位成功后用圆圈表示定位精度范围，默认：true
	        panToLocation: true,     //定位成功后将定位到的位置作为地图中心点，默认：true
	        zoomToAccuracy:true      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
	    });
	    map.addControl(geolocation);
    	map.addControl(geolocation);
        geolocation.getCurrentPosition();
        AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
        AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息
                    
    });
    //定位成功
    function onComplete (data){
		console.log(data)
	}
	//定位失败
	function onError(error){
		console.log(error)
	}
     
	//地图工具
	map.plugin(["AMap.ToolBar"], function () {
	   this.tool = new AMap.ToolBar({
	       liteStyle: true,
	       position: 'RT',
	       offset: new AMap.Pixel(10, 30)
	   })
	   map.addControl(this.tool);
	   //清除工具栏    this.tool.hide()
	   //显示工具栏    this.tool.show()
	});

	// 搜索时提示地点
    map.plugin(['AMap.Autocomplete'], () => {
         let markerOption = {}
         autocomplete = new AMap.Autocomplete({
             city: "太原", //默认全国
             input: "input_id" //注意：绑定的input框不能使用v-if，否则再次出现时，不会提示文字
         });
         AMap.event.addListener(autocomplete, "select", (e) => {//e含返回POI信息
             console.log(e)
             this.map.remove(this.marker1)
             //将搜索的地点移动到屏幕中央并标记点
             var markerPosition = [locationM, locationO]; 
             map.panTo(markerPosition);
             this.marker1 = new AMap.Marker(markerOption = {
                 map: map,
                 icon: "./img/icon.png"
             });
             this.marker1.setPosition(e.poi.location);
         });
     })             
	this.map = map
}

2、添加marker
添加：
如果是多个marker，将它们放在数组中，最后用 this.map.add(this.markerData) 添加到地图上
如果是单个marker，直接添加即可
删除：
清除地图上所有的marker： this.map.clearMap()
清除某个marker： map.remove(marker的名字);

//添加marker（多个），放入一个数组中
 updateMarker(){
      // 添加新的点标记
      if(this.allStores.length){
          this.allStores.forEach(v => {
              let marker = new AMap.Marker(
                  {
                      position: new AMap.LngLat(v.addrLongitude, v.addrLatitude),
                      offset: new AMap.Pixel(-10, -10),
                      // icon: icon, // 添加 Icon 实例
                      title: v.name,
                      zoom: 13,
                  }
              );
              this.markerData.push(marker) 
              this.map.add(this.markerData)
              // 点击marker后自动打开高德app
              marker.on('click',(e)=>{
                  marker.markOnAMAP({
                      position:marker.getPosition()
                  })
              })
          });
      }
  },


//修改一个marker
MarkerItem.setLabel({
    offset: new AMap.Pixel(0, 14), //设置文本标注偏移量
    content: '<div class="go-gaode">点击下方标记点去高德地图 ></div><div class="map-icon">' + title + '</div>', //设置文本标注内容
    direction: 'right' //设置文本标注方位
}); // 添加label标题
MarkerItem.setIcon(new AMap.Icon({
    image: 'img/map_label_bg.png',
    size: new AMap.Size(55, 65),
    imageSize: new AMap.Size(55, 65)
}); // 点击详情后切换图标
  

3、计算距离

distance(){
   this.allStores.map(function (val, key) {
       val.dis = ''
       // 固定位置与各个门店的距离
       var lnglat = new AMap.LngLat(locationM,locationO); //固定位置
       val.dis = lnglat.distance([val.addrLongitude,val.addrLatitude]) //每个门店的位置。最后得到各段距离，单位为m
       val.dis = Number(val.dis.toFixed(1)); 
   })
},