高德地图案例

1,684 阅读2分钟

案例1.地图上鼠标移到点标记显示信息,移除隐藏信息

效果图

实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    html, body, #container {
      height: 100%;
      width: 100%;
    }
    .amap-info{
      width: 216px;
      height: 189px;
      background: url(./img/tip_box.png) no-repeat;
    }
    .amap-info>div{
      top: 0;
      width: 100%;
      height: 100%;
    }
    .title{
      font-size: 18px;
      color: #FFFB14;
      text-align: center;
    }
    .info-text .raduis{
      display: inline-block;
      width: 20px;
      height: 20px;
      text-align: center;
      vertical-align: middle;
      border-radius: 50%;
      background: red;
    }
    .info-text{
      color: #fff;
      font-size: 14px;
    }
  </style>
</head>
<body>
  <div id="container" class="map" tabindex="0"></div>
</body>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
<script>
  var map = new AMap.Map('container', {
    zoom: 4,
    center: [102.342785, 35.312316],
    resizeEnable: true,
  })
  var satelliteLayer = new AMap.TileLayer.Satellite() // 卫星图层
  map.add(satelliteLayer) // 添加卫星图层,不添加就是标准图层(如果要两个一起(卫星图层和标准图层)可以点击事件触发map.add(satelliteLayer)删除用map.remove(satelliteLayer))

  var citys = [
    {lnglat: [116.218446, 34.676622], name: '1生命公园', num: 10, count: 15, cou: 45},
    {lnglat: [113.223446, 36.686622], name: '2生命公园', num: 12, count: 15, cou: 45},
    {lnglat: [116.232446, 38.666622], name: '3生命公园', num: 13, count: 15, cou: 45}
  ]
  var mass = new AMap.MassMarks(citys, {
    opacity: 0.8,
    zIndex: 111,
    cursor: 'pointer',
    style: { // mass.setStyle(style)
      url: './img/locatino_small.png', // 定位图标
      anchor: new AMap.Pixel(6, 6),
      size: new AMap.Size(25, 34)
    }
  })
  mass.setMap(map)
  mass.on('mouseover', e => { // AMap.event.addListener(mass, 'mouseover', e => {})
    infoWindow = new AMap.InfoWindow({
      isCustom: true, // 使用自定义窗体
      content: `
        <div class="title">${e.data.name}</div>
        <div class="info-text">
          <div class="raduis"></div>数量: ${e.data.num}
        </div>
        <div class="info-text">
          <div class="raduis"></div>人数: ${e.data.count}
        </div>
        <div class="info-text">
          <div class="raduis"></div>姓名: ${e.data.cou}
        </div>
      `,
      offset: new AMap.Pixel(8, -200) // 弹窗偏移位置(弹窗位置会根据content内容变动,先把内容写完再调试弹窗位置细节)
    })
    infoWindow.open(map, [e.data.lnglat.lng, e.data.lnglat.lat])
  })
  mass.on('mouseout', e => {
    if (infoWindow) infoWindow.close() // 关闭弹窗
  })
</script>
</html>

去除高德地图logo下标和版本号

.amap-logo{
  display: none !important;
}
.amap-copyright{
  opacity:0;
}