高德地图加载、标记点、标记点覆盖范围、信息窗体

 1、引入js文件

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

 2、创建地图

html:
//创建地图容器
<div id="container"></div>


js:
//创建地图
let map = new AMap.Map("container", {
    resizeEnable: true,    //是否监控地图容器尺寸变化
    mapStyle: 'amap://styles/52d465acb0deaeae82b6ce108db829b5',    //自定义地图的样式
    center: [this.longitude,this.latitude],    //中心点
    zoom: 14,    //缩放级别
})

3、创建标记点

//添加标记点
let marker = new AMap.Marker({
    position: new AMap.LngLat(116.397428, 39.90923),// 圆心位置
    title: '北京'    // 鼠标放上去显示的信息
})
this.map.add(marker)    //将标记点添加到地图中

4、创建标记点的覆盖范围

//添加标记点覆盖范围
let circle = new AMap.Circle({
    center: new AMap.LngLat(116.397428, 39.90923), // 圆心位置
    radius: 1000,  //半径
    strokeOpacity:0,
    strokeWeight: 0,  //线粗细度
    fillColor: "#bcd0d4",  //填充颜色
    fillOpacity: 0.2 //填充透明度
})
this.map.add([marker,circle])    //将标记点的覆盖范围添加到地图中

5、创建信息窗体

//信息窗体内容编辑
let content = [
    `<div style="height:150px;background-color:#fff;border-radius: 5px;">
        <p style="height:35px;line-height:35px;font-size:14px;font-weight: bold;border-bottom:1px solid #eee;padding-left: 10px;padding-right:20px;">${this.title}</p>
        <p style="height:28px;line-height:28px;padding: 0 10px;">地点：北京</p>
        <p style="height:28px;line-height:28px;padding: 0 10px;">介绍：中国首都</p>
        <p style="height:28px;line-height:28px;padding: 0 10px;">时间：2021-7-29</p>
    </div>`
    ]
//创建信息窗体
let infoWindow = new AMap.InfoWindow({
    content: content.join("<br>"),  //传入编辑的信息窗体内容
    offset: new AMap.Pixel(0, -35)    //偏移的量
})
//当点击标记点时打开信息窗体
AMap.event.addListener(marker, 'click', () => {
    infoWindow.open(this.map, marker.getPosition());
})

因为关闭按钮用的是官方的，所以获取关闭按钮的class名，调整到合适的位置就好了。