高德地图使用

1、准备工作：获取高德密钥，引入高德js   http://id.amap.com/?ref=http%3A%2F%2Flbs.amap.com%2Fdev%2Fkey%2Fapp

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

2、地图使用

    1）创建地图

<div id="container"></div>  //地图容器
var map = new AMap.Map('container',{
    zoom: 10,  //设置地图显示的缩放级别
    center: [116.397428, 39.90923]，//设置地图中心点坐标
    layers: [new AMap.TileLayer.Satellite()],  //设置图层,可设置成包含一个或多个图层的数组
    mapStyle: 'amap://styles/whitesmoke',  //设置地图的显示样式
    viewMode: '2D',  //设置地图模式
    lang:'zh_cn',  //设置地图语言类型
});

     地图参数：https://lbs.amap.com/api/javascript-api/reference/map

2）一些地图控制

    ① 设置地图级别缩放  map.setZoom(13);  PC端设置范围【3,18】

    ②设置地图中心点      var position = new AMap.LngLat(116, 39);  map.setCenter(position); （括号可以直接放【116,39】）

    ③  ①② 合写  map.setZoomAndCenter(13, [116, 39]);

    ④调整视野   map.setFitView();  可以有参数，参数为覆盖物

    状态类:https://lbs.amap.com/api/javascript-api/guide/map/state

3)添加点覆盖物（包含点标记、矢量图形、信息窗体）

     ① 创建标注

 1）点标注
    var marker = new AMap.Marker({
        position: new AMap.LngLat(116.39, 39.9),
        title: '北京'
    });
 2）自定义图片
    var marker = new AMap.Marker({
        position: new AMap.LngLat(116.39,39.9),
        offset: new AMap.Pixel(-10, -10),
        icon: '//vdata.amap.com/icons/b18/1/2.png', // 添加 Icon 图标 URL
        title: '北京'
    });
3）将创建的图片放入marker中
    // 创建 AMap.Icon 实例：
    var icon = new AMap.Icon({
        size: new AMap.Size(40, 50),,    // 图标尺寸
        image: '//webapi.amap.com/theme/v1.3/images/newpc/way_btn2.png',  // Icon的图像
        imageOffset: new AMap.Pixel(0, -60),  // 图像相对展示区域的偏移量，适于雪碧图等
        imageSize: new AMap.Size(40, 50)   // 根据所设置的大小拉伸或压缩图片
    });

// 将 Icon 实例添加到 marker 上:
    var marker = new AMap.Marker({
        position: new AMap.LngLat(116.405467, 39.907761),
        offset: new AMap.Pixel(-10， -10),
        icon: icon, // 添加 Icon 实例
        title: '北京',
        zoom: 13
    });
  注意：可以使用marker.setIcon(icon);向已经存在的标注上添加icon
4）自定义标注
    var marker = new AMap.Marker({
	    content:'<div class="marker-route marker-marker-bus-from"></div>',  // 自定义点标记覆盖物内容 html写法
	    position:  [116.397428, 39.90923], // 基点位置
        offset: new AMap.Pixel(-17, -42) // 相对于基点的偏移位置，左上角为基点（0,0）
    });

    ②获取标注

// 获取已经添加的覆盖物
map.getAllOverlays();
// 获取已经添加的marker
map.getAllOverlays('marker');

    ③删除标注

// 使用remove方法移除覆盖物，参数可以为单个覆盖物对象，也可以是一个包括多个覆盖物的数组
// 单独移除点标记
map.remove(marker);
// 同时移除点标记和矢量圆形
map.remove([marker,circle]);

// 使用clearMap方法删除所有覆盖物
map.clearMap();

   4）信息窗口

       ①默认样式信息窗口

// 信息窗体的内容
var content = [
    "<div><img src="\"" http:="" webapi.amap.com="" images="" autonavi.png="" \"=""> ",
    "<div style="\"padding:0px" 0px="" 4px;\"=""><b>高德软件有限公司</b>",
    "电话 : 010-84107000   邮编 : 100102",
    "地址 : 北京市望京阜通东大街方恒国际中心A座16层</div></div>"
];

// 创建 infoWindow 实例	
var infoWindow = new AMap.InfoWindow({
   content: content.join("<br>")  //传入 dom 对象，或者 html 字符串
});
	
// 打开信息窗体
infoWindow.open(map);

    ②自定义信息窗口

// 折线的节点坐标数组，每个元素为 AMap.LngLat 对象
var content = [
    "<div><img src="\"" http:="" webapi.amap.com="" images="" autonavi.png="" \"=""> ",
    "<div style="\"padding:0px" 0px="" 4px;\"=""><b>高德软件有限公司</b>",
    "电话 : 010-84107000   邮编 : 100102",
    "地址 : 北京市望京阜通东大街方恒国际中心A座16层</div></div>"
];

// 实现自定义窗体内容，返回拼接后的字符串
function createInfoWindow (title, content){
    // 内容拼接 ...
    return content;
}

// 创建 infoWindow 实例 
var infoWindow = new AMap.InfoWindow({
   isCustom: true,  //使用自定义窗体
   content: createInfoWindow(title,content.join("<br>")),  //传入 dom 对象，或者 html 字符串
   offset: new AMap.Pixel(16, -50)
});

③ 信息窗口的打开与关闭

// 在指定位置打开已创建的信息窗体
var position = new AMap.LngLat(116.39, 39.9);
infoWindow.open(map, position);

// 关闭信息窗体
infoWindow.close();