开发中的高德地图简单应用

1、在高德地图的官网申请key并在开发中引入key

2、在代码中放入一个id标签的盒子，用以放入高德地图

3、实例化高德地图对象

var map = new AMap.Map('id',{
    zoom:12,   //地图的放大缩小比例，切记在接口中拿到坐标后再实例化高德地图，否则此数据不生效
    center:[], //地图中心坐标
})

4、放入一个坐标并自定义图标，高德地图默认是蓝色的图标以表示位置区域

            var marker = new AMap.Marker({
                position: new AMap.LngLat(lng,lat),   //图标的经纬度
                offset: new AMap.Pixel(-10, -10),     //图标的位置调整
                icon: '', // 添加 Icon 图标 URL        //图标的路径
            });
            map.add(marker);                          //图标添加到地图

5、给每个图标加一个标注，此标注一直展示

    marker.setLabel({
        direction: "top",   //标注位置
        offset: new AMap.Pixel(10, 0),  //设置文本标注偏移量
        content: `<div style='background-color: #ffffff;padding: 2px;border-radius:             
            2px;'>${}</div>` //设置文本标注内容
    });
    map.add(marker)

    //写在上图代码里

6、插入海量经纬度坐标，并鼠标移动到坐标显示标注

// 地图点样式
let stylesub = [
    {
        url: "images/e.png",
        anchor: new AMap.Pixel(6, 6),
        size: new AMap.Size(55, 70),
    },
];

//  图标
var subMass = new AMap.MassMarks(sunlist, {
    opacity: 1,
    zIndex: 111,
    cursor: "pointer",
    style: stylesub,
});


sunlist.map((item, index) => {
    var mar = new AMap.Marker({
        opacity: 1,
        zIndex: 99999,
        cursor: "pointer",
        // style: style,
        position: [item.lnglat[0], item.lnglat[1]],
    })
})
subMass.on("mouseover", function (e) {
    marker.setPosition(e.data.lnglat);
    marker.setLabel({ content: `<div style='background-color: #ffffff;padding: 2px;border-radius: 2px;'>${e.data.name}</div><div style='background-color: #ffffff;padding: 2px;border-radius: 2px;'>${e.data.openTime}</div>` });
    marker.setExtData(e.data.id)
});
subMass.setMap(map);

7、点击地图外的按钮显示地图的标注（信息窗体）

var contentInner = ``    //html字符串

// 创建 infoWindow 实例	
infoWindow = new AMap.InfoWindow({
      isCustom: true,  //清除默认样式
      autoMove: true,   //自动移动地图
      offset: new AMap.Pixel(140, 100),
      content: contentInner  //传入 dom 对象，或者 html 字符串
});

// 打开信息窗体
infoWindow.open(map, [120.166187, 30.184477]);





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

8、点击经纬度，高德地图自动移动到目标位置，并显示标注（常用于给出地址列表，点击后地图移动到目标位置）

    var info = [];
    var lnglat = []
    lnglat.push(obj.lnglat.lng)
    lnglat.push(obj.lnglat.lat)
    info.push("<div style='background-color: #FFFFFF;padding:8px 8px;border- 
       radius:4px;border:1px solid #000'><h4>" + obj.name + " </h4>");
    info.push("<h3> " + obj.username + "</h3>");
    info.push("<p>" + obj.openTime + "</p></div>");
    infoWindow = new AMap.InfoWindow({
        autoMove: true,   //自动移动
        isCustom: true,
        content: info.join()  //标注
    })
    infoWindow.open(map, lnglat)