4009-960-987
地图演示
功能介绍与体验
  • 地图呈现
    <!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 {
        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;
      }
    </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;
        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;
        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>
  • 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>
账号与Key的申请

注册成为位构云的开发者:

第一步,注册位构云平台账号

第二步,控制台创建地图项目

第三步,获取Key

获取Key