AMapLoader.load({ key: "346e4aa4dc6444f5a7f69bf1ff66ca1a", // 申请好的Web端开发者Key,首次调用 load 时必填 version: "1.4.15", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15 plugins: [], // 需要使用的的插件列表,如比例尺'AMap.Scale'等 AMapUI: { // 是否加载 AMapUI,缺省不加载 version: "1.1", // AMapUI 缺省 1.1 plugins: [], // 需要加载的 AMapUI ui插件 }, Loca: { // 是否加载 Loca, 缺省不加载 version: "1.3.2", // Loca 版本,缺省 1.3.2 }, }).then((AMap) => { fnsss(); var map = new AMap.Map("container", { resizeEnable: true, // center: [res.data.data[i].lng, res.data.data[i].lat], center: [scenic.value[0].lng, scenic.value[0].lat], //中心点坐标 zoom: 12, }); let datado = []; for (let i = 0; i < scenic.value.length; i++) { var marker = new AMap.Marker({ position: new AMap.LngLat( Number(scenic.value[i].lng), Number(scenic.value[i].lat) ), // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9] // center: [lng_lst.value[i].lng, lng_lst.value[i].lat], //中心点坐标 // icon: identification.value[types.value], // anchor: "bottom-center", // offset: new AMap.Pixel(100, 100), // imageSize: new AMap.Size(100, 100), // 根据所设置的大小拉伸或压缩图片 icon: new AMap.Icon({ image: identification.value[types.value], size: new AMap.Size(52, 52), //图标大小 imageSize: new AMap.Size(56, 56), }), }); map.add(datado); // 设置label标签 // label默认蓝框白底左上角显示,样式className为:amap-marker-label marker.setLabel({ direction: "right", offset: new AMap.Pixel(-65, -45), //设置文本标注偏移量 content: `<div style="width:80px;height:30px;"> <p style="display: flex;align-items: center;height:15px;width:100%;justify-content: center;font-weight: bold;">` + scenic.value[i].name + `</p> <p style="display: flex;align-items: center;height:15px;width:100%;justify-content: center;"><span>在线人数</span><span>` + scenic.value[i].num + `</span></p> </div>`, //设置文本标注内容 // <p style="width:100%;display: flex;justify-content: center;"><b>`+ res.data.tab[i].create_time + `</b></p> }); // lngg.push(marker); datado.push(marker); // map.add(lngg); map.add(datado); } });