功能介绍与体验

地图呈现

<!DOCTYPE html>
<html lang="en">

<head>
  <title>基础地图</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <script src="https://www.wxb3d.com/saas/sdk/v1/VgoMap.umd.js"></script>
  <link rel="stylesheet" href="https://www.wxb3d.com/saas/sdk/v1/VgoMap.umd.css">
</head>
<style>
  html,
  body {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
  }
</style>

<body>
  <div id="mapContainer" style="width: 100%; height: 100%;"></div>
</body>
<script>
  let mapId = '1633665850273828864' // 您创建的地图ID

  // 初始化地图
  let map = new VgoMap.Map({
    el: 'mapContainer',
    id: mapId,
  })

  // 监听地图加载完成
  map.on('loaded', () => {
    console.log('地图加载成功')
  })
</script>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <title>POI点击</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <script src="https://www.wxb3d.com/saas/sdk/v1/VgoMap.umd.js"></script>
  <link rel="stylesheet" href="https://www.wxb3d.com/saas/sdk/v1/VgoMap.umd.css">
</head>
<style>
  html,
  body {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
  }

  .card {
    display: none;
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.07);
    z-index: 1;
    padding: 10px;
    border-radius: 10px;
    font-size: 12px;
    background-color: #fff;
  }
</style>

<body>
  <div id="mapContainer" style="width: 100%; height: 100%;"></div>
  <div class="card">
  </div>
</body>
<script>
  let mapId = '1633665850273828864' // 您创建的地图ID
  let marker = null
  let card = document.querySelector('.card')

  // 初始化地图
  let map = new VgoMap.Map({
    el: 'mapContainer',
    id: mapId,
  })

  // 监听地图加载完成
  map.on('loaded', () => {
    console.log('地图加载成功')

    // 监听地图点击事件
    map.on('click', (e) => {
      marker && map.removeAllCustomMarker()
      // 获取poi点数据
      const polygon = e.object?.userData?.polygonData

      console.log(polygon, 'polygon')
      if (polygon) {
        card.style.display = 'block'
        card.innerHTML = `名称: ${polygon.name || '未命名'}，id: ${polygon.id}`
        // 通过poi点数据创建覆盖物
        marker = map.addMarker(polygon.parent.id, {
          isCollision: false,
          position: polygon.center,
          scale: 0.15,
          src: 'https://vgo-1258766855.cos.ap-nanjing.myqcloud.com/saas/general/8011b647-303c-4858-b12d-91b8c9268635.png',
        })
      } else {
        card.style.display = 'none'
      }
    })
  })
</script>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <title>坐标转换</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <script src="https://www.wxb3d.com/saas/sdk/v1/VgoMap.umd.js"></script>
  <link rel="stylesheet" href="https://www.wxb3d.com/saas/sdk/v1/VgoMap.umd.css">
</head>
<style>
  html,
  body {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
    position: relative;
  }

  p {
    margin: 0px;
    padding: 0px;
    white-space: nowrap;
  }

  .card {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.07);
    z-index: 1;
    padding: 10px;
    border-radius: 10px;
    font-size: 12px;
    background-color: #fff;
  }

  .item {
    margin: 5px 0px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }

  .item div {
    padding: 0px 10px;
    white-space: nowrap;
  }

  .tip {
    margin-bottom: 10px;
  }
</style>

<body>
  <div id="mapContainer" style="width: 100%; height: 100%;"></div>
  <div class="card">
    <div class="tip">
      点击poi点查看效果
    </div>
    <p>经纬度:</p>
    <div class="item lngLat">
      <div class="lng">
        lng:
      </div>
      <div class="lat">
        lat:
      </div>
    </div>
    <p>地图容器像素坐标:</p>
    <div class="item container">
      <div class="x">
        x:
      </div>
      <div class="y">
        y:
      </div>
    </div>
  </div>
</body>
<script>
  let mapId = '1633665850273828864' // 您创建的地图ID

  let lng = document.querySelector('.lng')
  let lat = document.querySelector('.lat')
  let containerX = document.querySelector('.x')
  let containerY = document.querySelector('.y')

  // 初始化地图
  let map = new VgoMap.Map({
    el: 'mapContainer',
    id: mapId,
  })

  // 监听地图加载完成
  map.on('loaded', () => {
    console.log('地图加载成功')

    map.on('click', (e) => {
      // 获取poi点数据
      const polygon = e.object?.userData?.polygonData

      if (polygon?.center) {
        // 将地图容器像素坐标转换成经纬度
        let lngLat = map.coordsToLngLat(polygon.center)

        // 将经纬度转换成容器坐标
        let coords = map.lngLatToCoord(lngLat)

        containerX.innerHTML = 'x: ' + coords.x
        containerY.innerHTML = 'y: ' + coords.y


        lng.innerHTML = 'lng: ' + lngLat.lng
        lat.innerHTML = 'lat: ' + lngLat.lat
      }
    })
  })
</script>

</html>

室内外一体化

<!DOCTYPE html>
<html lang="en">

<head>
  <title>模式切换</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <script src="https://www.wxb3d.com/saas/sdk/v1/VgoMap.umd.js"></script>
  <link rel="stylesheet" href="https://www.wxb3d.com/saas/sdk/v1/VgoMap.umd.css">
</head>
<style>
  html,
  body {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
    position: relative;
  }

  .card {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.07);
    z-index: 1;
    padding: 10px;
    border-radius: 10px;
    font-size: 12px;
    background-color: #fff;
  }
</style>

<body>
  <div id="mapContainer" style="width: 100%; height: 100%;"></div>
  <div class="card">
    移动地图并缩放，将自动切换室内外模式
  </div>
</body>
<script>
  let mapId = '1661676290278822678' // 您创建的地图ID

  // 初始化地图
  let map = new VgoMap.Map({
    el: 'mapContainer',
    id: mapId,
  })

  map.on('loaded', () => {
    console.log('地图加载成功')
  })
</script>

</html>

界面控件

<!DOCTYPE html>
<html lang="en">

<head>
  <title>楼层控件</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <script src="https://www.wxb3d.com/saas/sdk/v1/VgoMap.umd.js"></script>
  <link rel="stylesheet" href="https://www.wxb3d.com/saas/sdk/v1/VgoMap.umd.css">
</head>
<style>
  html,
  body {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
  }

  .card {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.07);
    z-index: 1;
    padding: 10px;
    border-radius: 10px;
    font-size: 12px;
    background-color: #fff;
  }
</style>

<body>
  <div id="mapContainer" style="width: 100%; height: 100%;"></div>
</body>
<script>
  let mapId = '1650704053455425536' // 您创建的地图ID 

  // 初始化地图
  let map = new VgoMap.Map({
    el: 'mapContainer',
    id: mapId,
  })

  // 监听地图加载完成
  map.on('loaded', () => {
    let floorControl = new VgoMap.FloorControl({
      map,
      style: 'inset: 80px 20px auto auto;',
      floorButtonCount: 5, // 楼层显示按钮数量
      showAllFloorButton: true, // 是否显示多层展示按钮
    })

  })
</script>

</html>

地图控制

<!DOCTYPE html>
<html lang="en">

<head>
  <title>地图移动</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <script src="https://www.wxb3d.com/saas/sdk/v1/VgoMap.umd.js"></script>
  <link rel="stylesheet" href="https://www.wxb3d.com/saas/sdk/v1/VgoMap.umd.css">
</head>
<style>
  html,
  body {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
  }

  .card {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.07);
    z-index: 1;
    padding: 10px;
    border-radius: 10px;
    font-size: 12px;
    background-color: #fff;
  }
</style>

<body>
  <div id="mapContainer" style="width: 100%; height: 100%;"></div>
  <div class="card">
    双击地图，移动到相关位置
  </div>
</body>
<script>
  let mapId = '1633665850273828864' // 您创建的地图ID

  // 初始化地图
  let map = new VgoMap.Map({
    el: 'mapContainer',
    id: mapId,
  })

  // 监听地图加载完成
  map.on('loaded', () => {
    console.log('地图加载成功')

    // 绑定地图双击事件
    map.amap.on('dblclick', (e) => {
      const { lnglat } = e

      // 设置地图移动
      map.amap.panTo(lnglat)
    })
  })
</script>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <title>地图缩放</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <script src="https://www.wxb3d.com/saas/sdk/v1/VgoMap.umd.js"></script>
  <link rel="stylesheet" href="https://www.wxb3d.com/saas/sdk/v1/VgoMap.umd.css">
</head>
<style>
  html,
  body {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
  }

  .card {
    display: none;
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.07);
    z-index: 1;
    padding: 10px;
    border-radius: 10px;
    font-size: 12px;
    background-color: #fff;
  }

  .flex {
    display: flex;
    flex-wrap: nowrap;
  }

  .typeBtn {
    padding: 0px 10px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e9ecef;
    color: #74b9ff;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
  }

  .btn1 {
    margin-right: 10px;
  }
</style>

<body>
  <div id="mapContainer" style="width: 100%; height: 100%;"></div>
  <div class="card">
    <div class="flex">
      <div class="typeBtn btn1" onclick="setZoom('add')">放大</div>
      <div class="typeBtn" onclick="setZoom('reduce')">缩小</div>
    </div>
  </div>
</body>
<script>
  let mapId = '1633665850273828864' // 您创建的地图ID
  let card = document.querySelector('.card')

  function setZoom (type) {
    // 获取当前地图zoom
    let zoom = map.amap.getZoom()

    if (type === 'add') {
      // 地图放大
      map.amap.setZoom(zoom + 0.1)
    } else {
      // 地图缩小
      map.amap.setZoom(zoom - 0.1)
    }
  }

  // 初始化地图
  let map = new VgoMap.Map({
    el: 'mapContainer',
    id: mapId,
  })

  // 监听地图加载完成
  map.on('loaded', () => {
    card.style.display = 'block'
  })
</script>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <title>状态设置</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <script src="https://www.wxb3d.com/saas/sdk/v1/VgoMap.umd.js"></script>
  <link rel="stylesheet" href="https://www.wxb3d.com/saas/sdk/v1/VgoMap.umd.css">
</head>
<style>
  html,
  body {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
  }

  .card {
    display: none;
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.07);
    z-index: 1;
    padding: 10px;
    border-radius: 10px;
    font-size: 12px;
    background-color: #fff;
  }

  .flex {
    display: flex;
    flex-wrap: nowrap;
  }

  .typeBtn {
    padding: 0px 10px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e9ecef;
    color: #74b9ff;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    margin-right: 10px;
  }

  .typeBtn:last-child {
    margin-right: 0px !important;
  }
</style>

<body>
  <div id="mapContainer" style="width: 100%; height: 100%;"></div>
  <div class="card">
    <div class="flex">
      <div class="typeBtn" onclick="setStatus()">设置状态</div>
      <div class="typeBtn" onclick="offStatus()">解除状态</div>
      <div class="typeBtn" onclick="setPitch()">设置坡度</div>
      <div class="typeBtn" onclick="setRotation()">设置旋转</div>
    </div>
  </div>
</body>
<script>
  let mapId = '1633665850273828864' // 您创建的地图ID
  let card = document.querySelector('.card')
  let defaultPitch, defaultRotat


  var mapOpts = {
    dragEnable: false, // 地图是否可通过鼠标拖拽平移，默认为true
    keyboardEnable: false, //地图是否可通过键盘控制，默认为true
    doubleClickZoom: false, // 地图是否可通过双击鼠标放大地图，默认为true
    zoomEnable: false, //地图是否可缩放，默认值为true
    rotateEnable: false, // 地图是否可旋转，3D视图默认为true，2D视图默认false
  }

  // 初始化地图
  let map = new VgoMap.Map({
    el: 'mapContainer',
    id: mapId,
  })

  // 监听地图加载完成
  map.on('loaded', () => {
    defaultPitch = map.amap.getPitch()
    defaultRotat = map.amap.getRotation()

    card.style.display = 'block'
  })


  function setStatus () {
    // 设置状态
    map.amap.setStatus(mapOpts)
  }

  function offStatus () {
    // 解除状态
    map.amap.setStatus({
      dragEnable: true,
      keyboardEnable: true,
      doubleClickZoom: true,
      zoomEnable: true,
      rotateEnable: true,
    })
  }

  function setPitch () {
    let pitch = map.amap.getPitch()

    // 设置坡度
    map.amap.setPitch(pitch === defaultPitch ? 0 : defaultPitch)
  }

  function setRotation () {
    let rotation = map.amap.getRotation()

    // 设置旋转
    map.amap.setRotation(rotation === defaultRotat ? 50 : defaultRotat)
  }
</script>

</html>

事件响应

<!DOCTYPE html>
<html lang="en">

<head>
  <title>地图加载成功事件</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <script src="https://www.wxb3d.com/saas/sdk/v1/VgoMap.umd.js"></script>
  <link rel="stylesheet" href="https://www.wxb3d.com/saas/sdk/v1/VgoMap.umd.css">
</head>
<style>
  html,
  body {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
  }
</style>

<body>
  <div id="mapContainer" style="width: 100%; height: 100%;"></div>
</body>
<script>
  let mapId = '1633665850273828864' // 您创建的地图ID

  // 初始化地图
  let map = new VgoMap.Map({
    el: 'mapContainer',
    id: mapId,
  })

  // 监听地图加载完成
  map.on('loaded', () => {
    // 我们推荐您所有基于地图的操作都在地图加载完成后处理
    console.log('地图加载成功')
  })
</script>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <title>点击事件</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <script src="https://www.wxb3d.com/saas/sdk/v1/VgoMap.umd.js"></script>
  <link rel="stylesheet" href="https://www.wxb3d.com/saas/sdk/v1/VgoMap.umd.css">
</head>
<style>
  html,
  body {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
    position: relative;
  }

  .card {
    display: none;
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.07);
    z-index: 1;
    padding: 10px;
    border-radius: 10px;
    font-size: 12px;
    background-color: #fff;
  }

  #tip {
    display: none;
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.07);
    z-index: 1;
    padding: 10px;
    border-radius: 10px;
    font-size: 12px;
    background-color: #fff;
  }

  .flex {
    display: flex;
    flex-wrap: nowrap;
  }

  .typeBtn {
    padding: 0px 10px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e9ecef;
    color: #74b9ff;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    margin-right: 10px;
  }

  .typeBtn:last-child {
    margin-right: 0px !important;
  }
</style>

<body>
  <div id="mapContainer" style="width: 100%; height: 100%;"></div>
  <div id="tip">
  </div>
  <div class="card">
    <div class="flex">
      <div class="typeBtn" onclick="bindClick()">绑定单击事件</div>
      <div class="typeBtn" onclick="offClick()">解绑单击事件</div>
      <div class="typeBtn" onclick="bindDbClick()">绑定双击事件</div>
      <div class="typeBtn" onclick="offDbClick()">解绑双击事件</div>
    </div>
  </div>
</body>
<script>
  let mapId = '1633665850273828864' // 您创建的地图ID
  let tip = document.querySelector('#tip')
  let card = document.querySelector('.card')

  let clickFun = (e) => {
    tip.innerHTML = '您在 [ ' + e.lnglat.getLng() + ',' + e.lnglat.getLat() + ' ] 的位置单击了地图！'
  }

  let dbClickFun = (e) => {
    tip.innerHTML = '您在 [ ' + e.lnglat.getLng() + ',' + e.lnglat.getLat() + ' ] 的位置双击了地图！'
  }

  // 初始化地图
  let map = new VgoMap.Map({
    el: 'mapContainer',
    id: mapId,
  })

  map.on('loaded', () => {
    console.log('地图加载成功')
    card.style.display = 'block'
  })

  function bindClick () {
    tip.style.display = 'block'
    tip.innerHTML = '已绑定单击事件'
    map.amap.on('click', clickFun)
  }

  function offClick () {
    tip.style.display = 'block'
    tip.innerHTML = '已解绑单击事件'
    map.amap.off('click', clickFun)
  }


  function bindDbClick () {
    tip.style.display = 'block'
    tip.innerHTML = '已绑定双击事件'
    map.amap.on('dblclick', dbClickFun)
  }

  function offDbClick () {
    tip.style.display = 'block'
    tip.innerHTML = '已解绑双击事件'
    map.amap.off('dblclick', dbClickFun)
  }
</script>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <title>点击事件</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <script src="https://www.wxb3d.com/saas/sdk/v1/VgoMap.umd.js"></script>
  <link rel="stylesheet" href="https://www.wxb3d.com/saas/sdk/v1/VgoMap.umd.css">
</head>
<style>
  html,
  body {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
    position: relative;
  }

  .card {
    display: none;
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.07);
    z-index: 1;
    padding: 10px;
    border-radius: 10px;
    font-size: 12px;
    background-color: #fff;
  }

  #tip {
    display: none;
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.07);
    z-index: 1;
    padding: 10px;
    border-radius: 10px;
    font-size: 12px;
    background-color: #fff;
  }

  .flex {
    display: flex;
    flex-wrap: nowrap;
  }

  .typeBtn {
    padding: 0px 10px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e9ecef;
    color: #74b9ff;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    margin-right: 10px;
  }

  .typeBtn:last-child {
    margin-right: 0px !important;
  }
</style>

<body>
  <div id="mapContainer" style="width: 100%; height: 100%;"></div>
  <div id="tip">
  </div>
  <div class="card">
    <div class="flex">
      <div class="typeBtn" onclick="bindMove()">绑定鼠标移动事件</div>
      <div class="typeBtn" onclick="offMove()">解绑鼠标移动事件</div>
    </div>
  </div>
</body>
<script>
  let mapId = '1633665850273828864' // 您创建的地图ID
  let tip = document.querySelector('#tip')
  let card = document.querySelector('.card')

  let moveFun = (e) => {
    tip.innerHTML = `您正在移动鼠标，地图位置 [  ${e.lnglat.getLng()} , ${e.lnglat.getLat()} ] ！`
  }


  // 初始化地图
  let map = new VgoMap.Map({
    el: 'mapContainer',
    id: mapId,
  })

  map.on('loaded', () => {
    console.log('地图加载成功')
    card.style.display = 'block'
  })

  function bindMove () {
    tip.style.display = 'block'
    tip.innerHTML = '已绑移动事件'
    map.amap.on('mousemove', moveFun)
  }

  function offMove () {
    tip.style.display = 'block'
    tip.innerHTML = '已解绑移动事件'
    map.amap.off('mousemove', moveFun)
  }
</script>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <title>地图移动事件</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <script src="https://www.wxb3d.com/saas/sdk/v1/VgoMap.umd.js"></script>
  <link rel="stylesheet" href="https://www.wxb3d.com/saas/sdk/v1/VgoMap.umd.css">
</head>
<style>
  html,
  body {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
    position: relative;
  }

  .card {
    display: none;
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.07);
    z-index: 1;
    padding: 10px;
    border-radius: 10px;
    font-size: 12px;
    background-color: #fff;
  }

  #tip {
    display: none;
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.07);
    z-index: 1;
    padding: 10px;
    border-radius: 10px;
    font-size: 12px;
    background-color: #fff;
  }

  .flex {
    display: flex;
    flex-wrap: nowrap;
  }

  .typeBtn {
    padding: 0px 10px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e9ecef;
    color: #74b9ff;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    margin-right: 10px;
  }

  .typeBtn:last-child {
    margin-right: 0px !important;
  }
</style>

<body>
  <div id="mapContainer" style="width: 100%; height: 100%;"></div>
  <div id="tip">
  </div>
  <div class="card">
    <div class="flex">
      <div class="typeBtn" onclick="bindMove()">绑定事件</div>
      <div class="typeBtn" onclick="offMove()">解绑事件</div>
    </div>
  </div>
</body>
<script>
  let mapId = '1633665850273828864' // 您创建的地图ID
  let tip = document.querySelector('#tip')
  let card = document.querySelector('.card')

  let mapMovestart = (e) => {
    tip.innerHTML = `地图开始移动`
  }
  let mapMove = (e) => {
    tip.innerHTML = `地图正在移动`
  }
  let mapMoveend = (e) => {
    tip.innerHTML = `地图移动完毕，地图位置 [  ${map.amap.getCenter().lng} , ${map.amap.getCenter().lat} ] ！`
  }


  // 初始化地图
  let map = new VgoMap.Map({
    el: 'mapContainer',
    id: mapId,
  })

  map.on('loaded', () => {
    console.log('地图加载成功')
    card.style.display = 'block'
  })

  function bindMove () {
    tip.style.display = 'block'
    tip.innerHTML = '已绑事件'
    map.amap.on('movestart', mapMovestart);
    map.amap.on('mapmove', mapMove);
    map.amap.on('moveend', mapMoveend);
  }

  function offMove () {
    tip.style.display = 'block'
    tip.innerHTML = '已解绑事件'
    map.amap.off('movestart', mapMovestart);
    map.amap.off('mapmove', mapMove);
    map.amap.off('moveend', mapMoveend);
  }
</script>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <title>地图缩放事件</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <script src="https://www.wxb3d.com/saas/sdk/v1/VgoMap.umd.js"></script>
  <link rel="stylesheet" href="https://www.wxb3d.com/saas/sdk/v1/VgoMap.umd.css">
</head>
<style>
  html,
  body {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
    position: relative;
  }

  .card {
    display: none;
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.07);
    z-index: 1;
    padding: 10px;
    border-radius: 10px;
    font-size: 12px;
    background-color: #fff;
  }

  #tip {
    display: none;
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.07);
    z-index: 1;
    padding: 10px;
    border-radius: 10px;
    font-size: 12px;
    background-color: #fff;
  }

  .flex {
    display: flex;
    flex-wrap: nowrap;
  }

  .typeBtn {
    padding: 0px 10px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e9ecef;
    color: #74b9ff;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    margin-right: 10px;
  }

  .typeBtn:last-child {
    margin-right: 0px !important;
  }
</style>

<body>
  <div id="mapContainer" style="width: 100%; height: 100%;"></div>
  <div id="tip">
  </div>
  <div class="card">
    <div class="flex">
      <div class="typeBtn" onclick="bindZoom()">绑定事件</div>
      <div class="typeBtn" onclick="offZoom()">解绑事件</div>
    </div>
  </div>
</body>
<script>
  let mapId = '1633665850273828864' // 您创建的地图ID
  let tip = document.querySelector('#tip')
  let card = document.querySelector('.card')

  let mapZoomstart = (e) => {
    tip.innerHTML = `地图开始缩放`
  }
  let mapZoom = (e) => {
    tip.innerHTML = `地图正在缩放`
  }
  let mapZoomend = (e) => {
    tip.innerHTML = `地图缩放完毕，当前层级：${map.amap.getZoom()} ！`
  }


  // 初始化地图
  let map = new VgoMap.Map({
    el: 'mapContainer',
    id: mapId,
  })

  map.on('loaded', () => {
    console.log('地图加载成功')
    card.style.display = 'block'
  })

  function bindZoom () {
    tip.style.display = 'block'
    tip.innerHTML = '已绑事件'
    map.amap.on('zoomstart', mapZoomstart);
    map.amap.on('zoomchange', mapZoom);
    map.amap.on('zoomend', mapZoomend);
  }

  function offZoom () {
    tip.style.display = 'block'
    tip.innerHTML = '已解绑事件'
    map.amap.off('zoomstart', mapZoomstart);
    map.amap.off('zoomchange', mapZoom);
    map.amap.off('zoomend', mapZoomend);
  }
</script>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <title>楼层切换事件</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <script src="https://www.wxb3d.com/saas/sdk/v1/VgoMap.umd.js"></script>
  <link rel="stylesheet" href="https://www.wxb3d.com/saas/sdk/v1/VgoMap.umd.css">
</head>
<style>
  html,
  body {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
    position: relative;
    font-size: 15px;
  }

  .card {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.07);
    z-index: 1;
    padding: 10px;
    border-radius: 10px;
    font-size: 12px;
    background-color: #fff;
  }

  #tip {
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.07);
    z-index: 1;
    padding: 10px;
    border-radius: 10px;
    font-size: 12px;
    background-color: #fff;
  }

  p {
    margin: 0px;
    padding: 0px;
  }
</style>

<body>
  <div id="mapContainer" style="width: 100%; height: 100%;"></div>
  <div id="tip">
    <!-- <p class="build">当前未激活任何建筑</p> -->
    <p class="floor">当前无楼层</p>
  </div>
  <div class="card">
    <p>移动地图并缩放，将显示当前楼层信息</p>
    <p>点击楼层控件切换楼层，将实时显示当前楼层</p>
  </div>
</body>
<script>
  let mapId = '1633665850273828864' // 您创建的地图ID
  let build = document.querySelector('.build')
  let floor = document.querySelector('.floor')

  let activeBuild
  let activeFloor

  // 初始化地图
  let map = new VgoMap.Map({
    el: 'mapContainer',
    id: mapId,
  })

  map.on('loaded', () => {
    console.log('地图加载成功')

    // 创建楼层控件
    let floorControl = new VgoMap.FloorControl({
      map,
      style: 'inset: 80px 20px auto auto;',
      floorButtonCount: 5,
      showAllFloorButton: true,
    })

    map.on('buildChange', () => {
      // 获取当前建筑信息
      activeBuild = map.status?.build?.data || null
      // 获取当前楼层信息
      activeFloor = map.status?.build?.curentFloor.data || null


      build.innerHTML = !activeBuild ? '当前未激活任何建筑' : `当前建筑：${activeBuild.parent.name}`
      floor.innerHTML = !activeFloor ? '当前无楼层' : `当前楼层：${activeFloor.name}`
    })

    // 监听楼层变化
    map.on('floorChange', () => {
      // 获取当前楼层信息
      activeFloor = map.status?.build?.curentFloor.data || null

      floor.innerHTML = !activeFloor ? '当前无楼层' : `当前楼层：${activeFloor.name}`
    })
  })
</script>

</html>

地图覆盖物

<!DOCTYPE html>
<html lang="en">

<head>
  <title>图片覆盖物</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <script src="https://www.wxb3d.com/saas/sdk/v1/VgoMap.umd.js"></script>
  <link rel="stylesheet" href="https://www.wxb3d.com/saas/sdk/v1/VgoMap.umd.css">
</head>
<style>
  html,
  body {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
    font-size: 15px;
  }

  p {
    margin: 0px;
    padding: 0px;
  }

  .card {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.07);
    z-index: 1;
    padding: 10px;
    border-radius: 10px;
    font-size: 12px;
    background-color: #fff;
  }

  .typeBtn {
    padding: 0px 10px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e9ecef;
    color: #74b9ff;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    margin-right: 10px;
    margin-top: 10px;
  }
</style>

<body>
  <div id="mapContainer" style="width: 100%; height: 100%;"></div>
  <div class="card">
    <p>点击地图创建图片覆盖物</p>
    <div class="typeBtn" onclick="destroy()">销毁所有Marker</div>
  </div>
</body>
<script>
  let mapId = '1650704053455425536' // 您创建的地图ID
  let marker = null

  // 初始化地图
  let map = new VgoMap.Map({
    el: 'mapContainer',
    id: mapId,
  })

  // 监听地图加载完成
  map.on('loaded', () => {
    // 监听地图点击事件
    map.on('click', (e) => {
      console.log(e, 'e')
      // 将经纬度转换成坐标
      let coords = map.lngLatToCoord(e.lnglat)
      // 获取poi点数据
      const polygon = e.object?.userData?.polygonData
      console.log(coords, 'coords')

      /**
       * addCustomMarker(floorId, ops)
       *  floorId 楼层ID 用于设置当前 Marker 在那层显示
       * **/
      if (polygon?.parent?.id) {
        marker = map.addCustomMarker(polygon.parent.id, {
          isCollision: false, // 是否有碰撞体积
          position: coords,
          scale: 0.15, // 缩放
          src: 'https://vgo-1258766855.cos.ap-nanjing.myqcloud.com/saas/general/8011b647-303c-4858-b12d-91b8c9268635.png',
        })
      }
    })
  })

  function destroy () {
    // 销毁所有 marker
    marker && map.removeAllCustomMarker()
    marker = null
  }
</script>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <title>文本覆盖物</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <script src="https://www.wxb3d.com/saas/sdk/v1/VgoMap.umd.js"></script>
  <link rel="stylesheet" href="https://www.wxb3d.com/saas/sdk/v1/VgoMap.umd.css">
</head>
<style>
  html,
  body {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
    font-size: 15px;
  }

  p {
    margin: 0px;
    padding: 0px;
  }

  .card {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.07);
    z-index: 1;
    padding: 10px;
    border-radius: 10px;
    font-size: 12px;
    background-color: #fff;
  }

  .typeBtn {
    padding: 0px 10px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e9ecef;
    color: #74b9ff;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    margin-right: 10px;
    margin-top: 10px;
  }
</style>

<body>
  <div id="mapContainer" style="width: 100%; height: 100%;"></div>
  <div class="card">
    <p>点击地图创建文本覆盖物</p>
    <div class="typeBtn" onclick="destroy()">销毁所有文本Marker</div>
  </div>
</body>
<script>
  let mapId = '1650704053455425536' // 您创建的地图ID
  let marker = null

  // 初始化地图
  let map = new VgoMap.Map({
    el: 'mapContainer',
    id: mapId,
  })

  // 监听地图加载完成
  map.on('loaded', () => {
    // 监听地图点击事件
    map.on('click', (e) => {
      // 将经纬度转换成坐标
      let coords = map.lngLatToCoord(e.lnglat)
      // 获取poi点数据
      const polygon = e.object?.userData?.polygonData

      /**
       * addCustomMarker(floorId, ops)
       *  floorId 楼层ID 用于设置当前 Marker 在那层显示
       *    map.mapData.id 则是最外层 floorId 表示无论切换建筑还是楼层都一直显示
       * **/
      if (polygon?.parent?.id) {
        marker = map.addCustomMarker(polygon.parent.id, {
          isCollision: false, // 是否有碰撞体积
          position: coords,
          text: '这是一个标记', // 文本
          bgColor: null,
          strokeStyle: '#FFFFFF',
          zIndex: 0,
          fontFamily: 'Microsoft Yahei ,微软雅黑,Tahoma,Arial',
          fontSize: 16,
          fontWeight: 500,
          lineGap: 0.25,
          strokeWidth: 0.1,
          fillStyle: '#555',
        })
      }

    })
  })

  function destroy () {
    // 销毁所有 marker
    marker && map.removeAllCustomMarker()
    marker = null
  }
</script>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <title>自定义DOM覆盖物</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <script src="https://www.wxb3d.com/saas/sdk/v1/VgoMap.umd.js"></script>
  <link rel="stylesheet" href="https://www.wxb3d.com/saas/sdk/v1/VgoMap.umd.css">
</head>
<style>
  html,
  body {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
    font-size: 15px;
  }

  p {
    margin: 0px;
    padding: 0px;
  }

  .card {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.07);
    z-index: 1;
    padding: 10px;
    border-radius: 10px;
    font-size: 12px;
    background-color: #fff;
  }

  .typeBtn {
    padding: 0px 10px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e9ecef;
    color: #74b9ff;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    margin-right: 10px;
    margin-top: 10px;
  }

  .input-card {
    background-color: #fff;
    padding: 5px 10px;
  }
</style>

<body>
  <div id="mapContainer" style="width: 100%; height: 100%;"></div>
  <div class="card">
    <p>点击地图创建DOM覆盖物</p>
    <div class="typeBtn" onclick="destroy()">销毁所有Marker</div>
  </div>
</body>
<script>
  let mapId = '1650704053455425536' // 您创建的地图ID
  let marker = null

  // 初始化地图
  let map = new VgoMap.Map({
    el: 'mapContainer',
    id: mapId,
  })

  //在指定位置打开信息窗体
  function openInfo (lnglat) {
    //构建信息窗体中显示的内容
    var info = [];
    info.push("<div class='input-card content-window-card'>这是一个DOM标记</div> ");
    infoWindow = new AMap.InfoWindow({
      content: info.join(""),  //使用默认信息窗体框样式，显示信息内容
      isCustom: true, // 如果为true，则DOM所有样式需自己定义
    });

    infoWindow.open(map.amap, lnglat);
  }

  // 监听地图加载完成
  map.on('loaded', () => {
    // 监听地图点击事件
    map.amap.on('click', (e) => {
      openInfo(e.lnglat)
    })
  })

  function destroy () {
    // 销毁所有 marker
    map.amap.clearInfoWindow();
  }
</script>

</html>

搜索查询

<!DOCTYPE html>
<html lang="en">

<head>
  <title>搜索查询</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <script src="https://www.wxb3d.com/saas/sdk/v1/VgoMap.umd.js"></script>
  <link rel="stylesheet" href="https://www.wxb3d.com/saas/sdk/v1/VgoMap.umd.css">
</head>
<style>
  html,
  body {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
    position: relative;
  }

  .card {
    display: none;
    max-width: 500px;
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.07);
    z-index: 1;
    padding: 10px;
    border-radius: 10px;
    font-size: 12px;
    background-color: #fff;
  }

  .label {
    margin-top: 5px;
  }

  .input-item {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 5px;
    flex-wrap: nowrap;
  }

  .input-item-prepend {
    margin-right: -1px;
  }

  .input-item-text {
    width: 40px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
  }

  input {
    height: 26px;
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    overflow: visible;
    text-transform: none;
    border: 1px solid #ced4da;
    background-color: #fff;
  }

  input:focus {
    outline: 0px;
    border: 1px solid #74b9ff;
  }

  .typeBtn {
    padding: 0px 10px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e9ecef;
    color: #74b9ff;
    white-space: nowrap;
    cursor: pointer;
  }

  .content {
    margin-top: 10px;
  }

  .list {
    max-height: 160px;
    overflow: auto;
  }

  .list span {
    margin: 3px 5px;
    white-space: nowrap;
  }
</style>

<body>
  <div id="mapContainer" style="width: 100%; height: 100%;"></div>
  <div class="card">
    <div class="label" style='color:grey'>按ID查询</div>
    <div class="input-item">
      <div class="input-item-prepend">
        <span class="input-item-text">ID</span>
      </div>
      <input id='byID' type="text" value="">
      <div class="typeBtn" onclick="query('#byID')">查询</div>
    </div>

    <div class="label" style='color:grey'>按名称查询</div>
    <div class="input-item">
      <div class="input-item-prepend">
        <span class="input-item-text">名称</span>
      </div>
      <input id='byName' type="text" value="">
      <div class="typeBtn" onclick="query('#byName')">查询</div>
    </div>


    <div class="content">
      <div class="tip">搜索结果:</div>
      <div class="list">

      </div>
    </div>
  </div>
</body>
<script>
  let mapId = '1633665850273828864' // 您创建的地图ID
  let card = document.querySelector('.card')

  function query (el) {
    let val = document.querySelector(el).value
    let listDom = document.querySelector('.list')

    if (!val) { return false }

    listDom.innerHTML = null
    if (el === '#byID') {
      // 按ID查询
      let poi = map.getPolygonDataById(val)


      let span = document.createElement('span')
      span.innerText = poi.name

      listDom.appendChild(span)
    } else {
      // 按名称查询
      let list = map.getAreaByName(val)


      list.map(item => {
        let span = document.createElement('span')
        span.innerText = item.name

        listDom.appendChild(span)
      })
    }
  }

  // 初始化地图
  let map = new VgoMap.Map({
    el: 'mapContainer',
    id: mapId,
  })

  map.on('loaded', () => {
    console.log('地图加载成功')
    card.style.display = 'block'
  })
</script>

</html>

路径规划

<!DOCTYPE html>
<html lang="en">

<head>
  <title>路线规划</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <script src="https://www.wxb3d.com/saas/sdk/v1/VgoMap.umd.js"></script>
  <link rel="stylesheet" href="https://www.wxb3d.com/saas/sdk/v1/VgoMap.umd.css">
</head>
<style>
  html,
  body {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
    font-size: 15px;
  }

  p {
    margin: 0px;
    padding: 0px;
  }

  .card {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.07);
    z-index: 1;
    padding: 10px;
    border-radius: 10px;
    font-size: 12px;
    background-color: #fff;
  }

  .typeBtn {
    padding: 0px 10px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e9ecef;
    color: #74b9ff;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    margin-right: 10px;
    margin-top: 10px;
  }

  .input-card {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 3px 3px 5px 3px rgba(0, 0, 0, 0.07);
    transform: translateY(-25px);
  }

  .input-card .name {
    font-size: 15px;
    background-color: #50b4b9;
    color: #fff;
    padding: 5px 10px;
  }

  .input-card::after {
    content: '';
    width: 15px;
    height: 15px;
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%) translateY(50%) rotateZ(45deg);
    background-color: #fff;
  }

  .bar {
    display: flex;
    flex-wrap: nowrap;
    background-color: #fff;
  }

  .btn {
    margin: 12px 7px;
    padding: 5px 10px;
    background-color: #f3f3f3;
    font-size: 14px;
    color: #4C4E4E;
    white-space: nowrap;
  }

  #tip {
    display: none;
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.07);
    z-index: 1;
    padding: 10px;
    border-radius: 10px;
    font-size: 12px;
    background-color: #fff;
  }
</style>

<body>
  <div id="mapContainer" style="width: 100%; height: 100%;"></div>
  <div id="tip">
  </div>
  <div class="card">
    <p>点击POI点设置起点或终点</p>
    <div class="typeBtn" onclick="destroy('line')">销毁路线</div>
    <div class="typeBtn" onclick="destroy('start')">销毁起点</div>
    <div class="typeBtn" onclick="destroy('end')">销毁终点</div>
  </div>
</body>
<script>
  let mapId = '1633665850273828864' // 您创建的地图ID
  let tip = document.querySelector('#tip')
  let polygon, start, end

  // 初始化地图
  let map = new VgoMap.Map({
    el: 'mapContainer',
    id: mapId,
  })

  //在指定位置打开信息窗体
  function openInfo (lnglat, name) {
    //构建信息窗体中显示的内容
    var info = `
    <div class='input-card content-window-card'>
      <div class="name">${name}</div>
      <div class="bar">
        <div class="btn start" onclick="setStart()">设为起点</div>
        <div class="btn end" onclick="setEnd()">设为终点</div>
      </div>
    </div>
    `
    infoWindow = new AMap.InfoWindow({
      content: info,  //使用默认信息窗体框样式，显示信息内容
      isCustom: true, // 如果为true，则DOM所有样式需自己定义
    });

    infoWindow.open(map.amap, lnglat);
  }

  // 监听地图加载完成
  map.on('loaded', () => {
    // 监听地图点击事件
    map.on('click', (e) => {
      // 获取poi点数据
      polygon = e.object?.userData?.polygonData || null

      if (!polygon?.buildData && polygon?.name) {
        let lngLat = map.coordsToLngLat(polygon.center)
        openInfo(lngLat, polygon.name)
      }
    })
  })

  function findPath () {
    map.amap.clearInfoWindow();

    if (!start || !end) {
      tip.style.display = 'none'
      return false
    }

    // 设置了起点和终点后可进行路线规划
    map.navi.find().then(() => {
      // 路线规划成功，获取路线距离
      let distance = map.navi.status.routeDistance.toFixed(2) || 0
      tip.style.display = 'block'
      tip.innerHTML = `距离:${distance}米`
    }).catch(err => {
      // 路线规划失败
      console.log(err, 'err')
      alert('未找到路线, 请联系地图制作方!')
    })
  }

  function setStart () {
    start = polygon
    map.navi.setStart(polygon.id)

    findPath()
  }

  function setEnd () {
    end = polygon
    map.navi.setEnd(end.id)

    findPath()
  }

  function destroy (type) {
    // 销毁自定义dommarker
    map.amap.clearInfoWindow();


    if (type === 'line') {
      // 销毁路线
      map.navi.removeNaviArrow()
      // 销毁箭头
      map.navi.removeNaviLine()
    } else if (type === 'start') {
      // 销毁起点
      map.navi.removeStart()
      start = null
    } else {
      //销毁终点
      map.navi.removeEnd()
      end = null
    }
  }
</script>

</html>

导航

<!DOCTYPE html>
<html lang="en">

<head>
  <title>模拟导航</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <script src="https://www.wxb3d.com/saas/sdk/v1/VgoMap.umd.js"></script>
  <link rel="stylesheet" href="https://www.wxb3d.com/saas/sdk/v1/VgoMap.umd.css">
</head>
<style>
  html,
  body {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
    font-size: 15px;
  }

  p {
    margin: 0px;
    padding: 0px;
  }

  .card {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.07);
    z-index: 1;
    padding: 10px;
    border-radius: 10px;
    font-size: 12px;
    background-color: #fff;
  }

  .list {
    display: flex;
  }

  .typeBtn {
    padding: 0px 10px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e9ecef;
    color: #74b9ff;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    margin-right: 10px;
  }

  .speed {
    background-color: #e9ecef;
    color: #57606f;
    cursor: default;
  }

  .input-card {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 3px 3px 5px 3px rgba(0, 0, 0, 0.07);
    transform: translateY(-25px);
  }

  .input-card .name {
    font-size: 15px;
    background-color: #50b4b9;
    color: #fff;
    padding: 5px 10px;
  }

  .input-card::after {
    content: '';
    width: 15px;
    height: 15px;
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%) translateY(50%) rotateZ(45deg);
    background-color: #fff;
  }

  .bar {
    display: flex;
    flex-wrap: nowrap;
    background-color: #fff;
  }

  .btn {
    margin: 12px 7px;
    padding: 5px 10px;
    background-color: #f3f3f3;
    font-size: 14px;
    color: #4C4E4E;
    white-space: nowrap;
  }

  #tip {
    display: none;
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.07);
    z-index: 1;
    padding: 10px;
    border-radius: 10px;
    font-size: 12px;
    background-color: #fff;
  }
</style>

<body>
  <div id="mapContainer" style="width: 100%; height: 100%;"></div>
  <div id="tip">
  </div>
  <div class="card">
    <!-- <p>点击POI点设置起点或终点</p> -->
    <div class="list">
      <div class="typeBtn" onclick="startNavi()">开始导航</div>
      <div class="typeBtn" onclick="pauseNavi()">暂停</div>
      <div class="typeBtn" onclick="restoreNavi()">继续</div>
      <div class="typeBtn" onclick="stopNavi()">结束</div>
      <div class="typeBtn" onclick="switchSpeed()">切换速度</div>
      <div class="typeBtn speed">
        低速
      </div>
    </div>
  </div>
</body>
<script>
  let mapId = '1633665850273828864' // 您创建的地图ID
  let tip = document.querySelector('#tip')
  let speedDom = document.querySelector('.speed')

  let polygon
  let start = {
    id: 'lf0td0xjb3'
  }
  let end = {
    id: 'lf0vl3w40p'
  }

  let speed = [
    { text: '低速', val: 2.5 },
    { text: '中速', val: 5 },
    { text: '高速', val: 10 },
  ]
  let seepIndex = 0

  // 初始化地图
  let map = new VgoMap.Map({
    el: 'mapContainer',
    id: mapId,
  })

  //在指定位置打开信息窗体
  function openInfo (lnglat, name) {
    var info = `
    <div class='input-card content-window-card'>
      <div class="name">${name}</div>
      <div class="bar">
        <div class="btn start" onclick="setStart()">设为起点</div>
        <div class="btn end" onclick="setEnd()">设为终点</div>
      </div>
    </div>
    `
    infoWindow = new AMap.InfoWindow({
      content: info,  //使用默认信息窗体框样式，显示信息内容
      isCustom: true, // 如果为true，则DOM所有样式需自己定义
    });

    infoWindow.open(map.amap, lnglat);
  }

  // 监听地图加载完成
  map.on('loaded', () => {
    // 监听地图点击事件
    map.on('click', (e) => {
      // 获取poi点数据
      polygon = e.object?.userData?.polygonData || null

      if (!polygon?.buildData && polygon?.name) {
        let lngLat = map.coordsToLngLat(polygon.center)
        openInfo(lngLat, polygon.name)
      }
    })

    // 设置默认起始点
    map.navi.setStart(start.id)
    map.navi.setEnd(end.id)
    map.navi.find().then(() => {
      // 路线规划成功，获取路线距离
      let distance = map.navi.status.routeDistance.toFixed(2) || 0
      tip.style.display = 'block'
      tip.innerHTML = `距离:${distance}米`
    })
  })

  function findPath () {
    map.amap.clearInfoWindow();

    if (!start || !end) {
      tip.style.display = 'none'
      return false
    }


    // 设置了起点和终点后可进行路线规划
    map.navi.find().then(() => {
      // 路线规划成功，获取路线距离
      let distance = map.navi.status.routeDistance.toFixed(2) || 0
      tip.style.display = 'block'
      tip.innerHTML = `距离:${distance}米`
    }).catch(err => {
      // 路线规划失败
      console.log(err, 'err')
      alert('未找到路线, 请联系地图制作方!')
    })
  }

  function setStart () {
    start = polygon
    map.navi.setStart(polygon.id)

    findPath()
  }

  function setEnd () {
    end = polygon
    map.navi.setEnd(end.id)

    findPath()
  }


  // 开始导航
  function startNavi () {
    if (!start || !end) return false

    map.navi.simulate()
    // 设置速度
    map.navi.setSimulateSpeed(speed[seepIndex].val)
  }

  // 暂停导航
  function pauseNavi () {
    // 判断当前是否处于导航中
    if (map.navi.status.isSimulate) {
      map.navi.pauseSimulate()
    }
  }

  //继续导航
  function restoreNavi () {
    // 判断当前是否处于暂停中
    if (!map.navi.isSimulatePause) {
      map.navi.resumeSimulate()
    }
  }


  // 退出导航
  function stopNavi () {
    // 退出模拟导航
    map.navi.stopSimulate()
    // 销毁箭头
    map.navi.removeNaviArrow()
    // 销毁线路
    map.navi.removeNaviLine()
    //移除终点
    map.navi.removeEnd()
    end = null
  }

  // 切换速度
  function switchSpeed () {
    seepIndex = seepIndex >= 2 ? 0 : ++seepIndex
    speedDom.innerHTML = speed[seepIndex].text

    // 设置速度
    map.navi.setSimulateSpeed(speed[seepIndex].val)
  }

</script>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <title>真实导航</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <script src="https://www.wxb3d.com/saas/sdk/v1/VgoMap.umd.js"></script>
  <link rel="stylesheet" href="https://www.wxb3d.com/saas/sdk/v1/VgoMap.umd.css">
</head>
<style>
  html,
  body {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
    font-size: 15px;
  }

  p {
    margin: 0px;
    padding: 0px;
  }

  .card {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.07);
    z-index: 1;
    padding: 10px;
    border-radius: 10px;
    font-size: 12px;
    background-color: #fff;
  }

  .list {
    display: flex;
    margin-top: 10px;
  }

  .typeBtn {
    padding: 0px 10px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e9ecef;
    color: #74b9ff;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    margin-right: 10px;
  }

  .speed {
    background-color: #e9ecef;
    color: #57606f;
    cursor: default;
  }

  .input-card {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 3px 3px 5px 3px rgba(0, 0, 0, 0.07);
    transform: translateY(-25px);
  }

  .input-card .name {
    font-size: 15px;
    background-color: #50b4b9;
    color: #fff;
    padding: 5px 10px;
  }

  .input-card::after {
    content: '';
    width: 15px;
    height: 15px;
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%) translateY(50%) rotateZ(45deg);
    background-color: #fff;
  }

  .bar {
    display: flex;
    flex-wrap: nowrap;
    background-color: #fff;
  }

  .btn {
    margin: 12px 7px;
    padding: 5px 10px;
    background-color: #f3f3f3;
    font-size: 14px;
    color: #4C4E4E;
    white-space: nowrap;
  }

  #tip {
    display: none;
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.07);
    z-index: 1;
    padding: 10px;
    border-radius: 10px;
    font-size: 12px;
    background-color: #fff;
  }
</style>

<body>
  <div id="mapContainer" style="width: 100%; height: 100%;"></div>
  <div id="tip">
  </div>
  <div class="card">
    <p>点击POI点设置起点或终点</p>
    <div class="list">
      <div class="typeBtn" onclick="startNavi()">开始导航</div>
      <div class="typeBtn" onclick="stopNavi()">结束导航</div>
    </div>
  </div>
</body>
<script>
  let mapId = '1633665850273828864' // 您创建的地图ID
  let tip = document.querySelector('#tip')
  let speedDom = document.querySelector('.speed')

  let polygon
  let start = {
    id: 'lf0td0xjb3'
  }
  let end = {
    id: 'lf0vl3w40p'
  }

  let speed = [
    { text: '低速', val: 2.5 },
    { text: '中速', val: 5 },
    { text: '高速', val: 10 },
  ]
  let seepIndex = 0

  // 初始化地图
  let map = new VgoMap.Map({
    el: 'mapContainer',
    id: mapId,
  })

  //在指定位置打开信息窗体
  function openInfo (lnglat, name) {
    var info = `
    <div class='input-card content-window-card'>
      <div class="name">${name}</div>
      <div class="bar">
        <div class="btn start" onclick="setStart()">设为起点</div>
        <div class="btn end" onclick="setEnd()">设为终点</div>
      </div>
    </div>
    `
    infoWindow = new AMap.InfoWindow({
      content: info,  //使用默认信息窗体框样式，显示信息内容
      isCustom: true, // 如果为true，则DOM所有样式需自己定义
    });

    infoWindow.open(map.amap, lnglat);
  }

  // 监听地图加载完成
  map.on('loaded', () => {
    // 监听地图点击事件
    map.on('click', (e) => {
      // 获取poi点数据
      polygon = e.object?.userData?.polygonData || null

      if (!polygon?.buildData && polygon?.name) {
        let lngLat = map.coordsToLngLat(polygon.center)
        openInfo(lngLat, polygon.name)
      }
    })

    // 设置默认起始点
    map.navi.setStart(start.id)
    map.navi.setEnd(end.id)
    map.navi.find().then(() => {
      // 路线规划成功，获取路线距离
      let distance = map.navi.status.routeDistance.toFixed(2) || 0
      tip.style.display = 'block'
      tip.innerHTML = `距离:${distance}米`
    })
  })

  function findPath () {
    map.amap.clearInfoWindow();

    if (!start || !end) {
      tip.style.display = 'none'
      return false
    }


    // 设置了起点和终点后可进行路线规划
    map.navi.find().then(() => {
      // 路线规划成功，获取路线距离
      let distance = map.navi.status.routeDistance.toFixed(2) || 0
      tip.style.display = 'block'
      tip.innerHTML = `距离:${distance}米`
    }).catch(err => {
      // 路线规划失败
      console.log(err, 'err')
      alert('未找到路线, 请联系地图制作方!')
    })
  }

  function setStart () {
    start = polygon
    map.navi.setStart(polygon.id)

    findPath()
  }

  function setEnd () {
    end = polygon
    map.navi.setEnd(end.id)

    findPath()
  }


  // 开始导航
  function startNavi () {
    if (!start || !end) return false

    map.navi.startNavi()
  }

  // 退出导航
  function stopNavi () {
    // 退出模拟导航
    map.navi.stopNavi()
    // 销毁箭头
    map.navi.removeNaviArrow()
    // 销毁线路
    map.navi.removeNaviLine()
    //移除终点
    map.navi.removeEnd()
    end = null
  }

</script>

</html>

3D可视化

<!DOCTYPE html>
<html lang="en">

<head>
  <title>模型动画</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <script src="https://www.wxb3d.com/saas/sdk/v1/VgoMap.umd.js"></script>
  <link rel="stylesheet" href="https://www.wxb3d.com/saas/sdk/v1/VgoMap.umd.css">
</head>
<style>
  html,
  body {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
    font-size: 15px;
  }

  p {
    margin: 0px;
    padding: 0px;
  }

  .card {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.07);
    z-index: 1;
    padding: 10px;
    border-radius: 10px;
    font-size: 12px;
    background-color: #fff;
  }

  .typeBtn {
    padding: 0px 10px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e9ecef;
    color: #74b9ff;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    margin-right: 10px;
    margin-top: 10px;
  }

  .input-card {
    background-color: #fff;
    padding: 5px 10px;
  }
</style>

<body>
  <div id="mapContainer" style="width: 100%; height: 100%;"></div>
</body>
<script>
  let mapId = '1587980663909388289' // 您创建的地图ID
  let marker = null

  // 初始化地图
  let map = new VgoMap.Map({
    el: 'mapContainer',
    id: mapId,
  })


  // 监听地图加载完成
  map.on('loaded', () => {
    console.log('加载完成')
    // 监听模型全部加载完成
    map.on('floorModelAllLoaded', (data) => {

      // 判断当前要展示的楼层是否一致
      if (data.id === map.mapData.id) {
        // 获取到对应的模型，这里获取的是卡车模型
        let model = map.getModelById("ljnvcnlmssk")
        if (!model) {
          return
        }

        //生成路径点
        // 第一个点则是模型的初始位置
        let path = [model.data.position, { x: 89.2682929049267, y: -0.2807872540732079, z: -1.0000000000000473 }, { x: 38.28258980149938, y: -46.76806675234569, z: -1 }, { x: 24.05138334486039, y: -72.25456530871818, z: -0.9999999999999528 }, { x: 24.072268704544, y: -111.20734156115543, z: -1 }, { x: 29.132774524737087, y: -142.61390263558755, z: -1 }, { x: 17.974061065969867, y: -204.2602197360307, z: -0.9999999999999528 }, { x: -2.648835166204586, y: -269.4427086850751, z: -1 }]

        // 获取模型位置
        let objPos = model.object3d.children[0].position

        // 创建动画函数
        let go = (idx, dir) => {
          let pos = path[idx + dir]
          if (!pos) {
            dir = -dir
            return setTimeout(() => {
              go(idx + dir, dir)
            }, 2000);
          }

          let time = objPos.distanceTo(pos) / 40
          let pos1 = { ...pos, z: model.data.position.z }

          let rot = objPos.clone().sub(pos1).angleTo(new VgoMap.THREE.Vector3(1, 0, 0))
          let rotDir = objPos.clone().cross(pos1)
          rot = rotDir.z > 0 ? -rot : rot

          new VgoMap.TWEEN.Tween(objPos).to(pos1, time * 1000).onUpdate(() => {
            model.object3d.children[0].rotation.z = rot
          }).onComplete(() => {
            go(idx + dir, dir)
          }).start()
        }

        // 开启动画函数
        go(0, 1)
      }
    })

  })
</script>

</html>

在线开发体验

地图SDK