高德地图使用及常见问题解决

1.准备工作

引入高德地图JS API以及UI组件库（index.html）

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.3&key=ade4e9ff095772a5158a71bfab7a631a"></script>    //引入地图JS API    
<script src="//webapi.amap.com/ui/1.0/main.js"></script>    //引入地图UI组件库

添加地图容器，并为其指定id属性

 <div id="map"></div>

为地图容器设置宽高

#map {width:300px; height: 180px; }  

2.绘制地图

创建地图并设置常用参数

let map = new AMap.Map('map',{
    zoom: 16,//缩放级别
    center:[117.128255,36.662838],//地图中心点坐标
});

地图常用方法

//设置地图中心点
let position = new AMap.LngLat(117.128255,36.662838);
map.setCenter(position); 
//设置地图缩放级别
map.setZoom(15);
//设置地图状态
map.setStatus({
    dragEnable: false,//是否可拖动
    keyboardEnable: false,//是否可通过键盘控制
    doubleClickZoom: false,//是否可双击放大
    zoomEnable: false,//是否可缩放
    rotateEnable: false//是否可旋转
});

地图点标记

//添加一个点标记
let marker = new AMap.Marker({
    clickable: true, //是否可点击
    position: new AMap.LngLat(117.128255,36.662838), //标记位置
    icon: new AMap.Icon({//自定义图标
        size: new AMap.Size(30, 30), //图标显示大小
        image: "res/location_center.png",//图标路径
        imageSize: new AMap.Size(30,30)//图标缩放大小
    }),
    //绑定标记点击事件
    marker.on('click',()=>{
    })
});
map.add(marker);
//添加多个点标记
let markerList = [marker1, marker2, marker3];
map.add(markerList);
//移除点标记
map.remove(marker);

3.常用UI组件

地图UI控件

//设置DomLibrary，jQuery或者Zepto
AMapUI.setDomLibrary($);
//加载BasicControl，loadUI的路径参数为模块名中 'ui/' 之后的部分
AMapUI.loadUI(['control/BasicControl'], function(BasicControl) {
  //缩放控件
  map.addControl(new BasicControl.Zoom({
      position: 'lt', //left top，左上角
      showZoomNum: true //显示zoom值
  }));
  //图层切换控件
  map.addControl(new BasicControl.LayerSwitcher({
      position: 'rt' //right top，右上角
  }));
  //实时交通控件
  map.addControl(new BasicControl.Traffic({
      position: 'lb'//left bottom, 左下角
  }));
});

拖拽选址组件

AMapUI.loadUI(['misc/PositionPicker'], function(PositionPicker) {
    let positionPicker = new PositionPicker({
        mode:'dragMap',//拖动地图模式
        map: map,
        iconStyle:{//自定义图标
            url: './res/drag.png',
            size:[30,30],  //要显示的点大小，将缩放图片
            ancher:[15,15],//锚点的位置，即被size缩放之后，图片的什么位置作为选中的位置
        }
    });
    //成功回调函数
    positionPicker.on('success', function(positionResult) {
    });
    //失败回调函数
    positionPicker.on('fail', function(positionResult) {
    });
});
//开始选址
positionPicker.start();
//停止选址
positionPicker.stop();

4.坐标系转换（高德地图API提供的转换方法不可用）

//百度坐标转高德坐标（传入经度、纬度）
transform:function(bd_lng, bd_lat) {
    let X_PI = Math.PI * 3000.0 / 180.0;
    let x = bd_lng - 0.0065;
    let y = bd_lat - 0.006;
    let z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * X_PI);
    let theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * X_PI);
    let gd_lng = z * Math.cos(theta);
    let gd_lat = z * Math.sin(theta);
    return {lng: gd_lng, lat: gd_lat}
}

// 高德坐标转百度坐标（传入经度、纬度）
transform:function(gd_lng, gd_lat) {
    let X_PI = Math.PI * 3000.0 / 180.0;
    let x = gd_lng,
    let y = gd_lat;
    let z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * X_PI);
    let theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * X_PI);
    let bd_lng = z * Math.cos(theta) + 0.0065;
    let bd_lat = z * Math.sin(theta) + 0.006;
    return {lat: bd_lat,lng: bd_lng};
}

5.隐藏高德地图logo及copyright字样

.amap-logo{
    display: none;
}

.amap-copyright{
    opacity:0;
}