google地图js，添加标记，以及infowindow信息弹窗

第7个前端

已于 2024-05-07 09:29:53 修改

阅读量277

点赞数 2

分类专栏：前端文章标签： javascript 地图谷歌地图 googlemap

于 2024-05-07 09:26:26 首次发布

本文链接：https://blog.csdn.net/qq_42761482/article/details/138519688

版权

前端专栏收录该内容

133 篇文章 4 订阅

订阅专栏

（谷歌地图版本V3）

  var contentString = "<div class='devinfo'><P>设备ID: BJ-20240507</p> <P>设备状态: 正常</p> <P>通讯信号: 89% </p> <P>设备位置: 中国</p> <P>剂量率: 988</p></div>"
   // 信息弹窗显示的内容
  var infowindows = new google.maps.InfoWindow({
    content: contentString
  });
  let images =
    "./res/airplane---.png"; // 图标的 img 地址
  const marker = new google.maps.Marker({
    position: { lat: 39.617967, lng: 116.324860 },
    // 116.324860,39.617967
    map, // 实例化地图
    icon: images,
    draggable:true, // 标记可拖拽
    title: '无人机'
  });

  marker.addListener("click", () => {
    // 标记点击事件
    infowindows.open(map, marker);
  });