99国产精品影院,张柏芝黑54张黑森林P,丝瓜草莓茄子榴莲污污污在线观看,欧美日韩亚洲国产中文

4009-960-987
地圖演示
功能介紹與體驗(yàn)
  • 地圖呈現(xiàn)
    <!DOCTYPE html>
<html lang="en">

<head>
  <title>基礎(chǔ)地圖</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' // 您創(chuàng)建的地圖ID

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

  // 監(jiān)聽(tīng)地圖加載完成
  map.on('loaded', () => {
    console.log('地圖加載成功')
  })
</script>

</html>
  • 室內(nèi)外一體化
    <!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">
    移動(dòng)地圖并縮放，將自動(dòng)切換室內(nèi)外模式
  </div>
</body>
<script>
  let mapId = '1661676290278822678' // 您創(chuàng)建的地圖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' // 您創(chuàng)建的地圖ID 

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

  // 監(jiān)聽(tīng)地圖加載完成
  map.on('loaded', () => {
    let floorControl = new VgoMap.FloorControl({
      map,
      style: 'inset: 80px 20px auto auto;',
      floorButtonCount: 5, // 樓層顯示按鈕數(shù)量
      showAllFloorButton: true, // 是否顯示多層展示按鈕
    })

  })
</script>

</html>
  • 地圖控制
    <!DOCTYPE html>
<html lang="en">

<head>
  <title>地圖移動(dòng)</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">
    雙擊地圖，移動(dòng)到相關(guān)位置
  </div>
</body>
<script>
  let mapId = '1633665850273828864' // 您創(chuàng)建的地圖ID

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

  // 監(jiān)聽(tīng)地圖加載完成
  map.on('loaded', () => {
    console.log('地圖加載成功')

    // 綁定地圖雙擊事件
    map.amap.on('dblclick', (e) => {
      const { lnglat } = e

      // 設(shè)置地圖移動(dòng)
      map.amap.panTo(lnglat)
    })
  })
</script>

</html>
  • 事件響應(yīng)
    <!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' // 您創(chuàng)建的地圖ID

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

  // 監(jiān)聽(tīng)地圖加載完成
  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>點(diǎn)擊地圖創(chuàng)建圖片覆蓋物</p>
    <div class="typeBtn" onclick="destroy()">銷毀所有Marker</div>
  </div>
</body>
<script>
  let mapId = '1650704053455425536' // 您創(chuàng)建的地圖ID
  let marker = null

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

  // 監(jiān)聽(tīng)地圖加載完成
  map.on('loaded', () => {
    // 監(jiān)聽(tīng)地圖點(diǎn)擊事件
    map.on('click', (e) => {
      console.log(e, 'e')
      // 將經(jīng)緯度轉(zhuǎn)換成坐標(biāo)
      let coords = map.lngLatToCoord(e.lnglat)
      // 獲取poi點(diǎn)數(shù)據(jù)
      const polygon = e.object?.userData?.polygonData
      console.log(coords, 'coords')

      /**
       * addCustomMarker(floorId, ops)
       *  floorId 樓層ID 用于設(shè)置當(dāng)前 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">搜索結(jié)果:</div>
      <div class="list">

      </div>
    </div>
  </div>
</body>
<script>
  let mapId = '1633665850273828864' // 您創(chuàng)建的地圖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>
  • 路徑規(guī)劃
    <!DOCTYPE html>
<html lang="en">

<head>
  <title>路線規(guī)劃</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>點(diǎn)擊POI點(diǎn)設(shè)置起點(diǎn)或終點(diǎn)</p>
    <div class="typeBtn" onclick="destroy('line')">銷毀路線</div>
    <div class="typeBtn" onclick="destroy('start')">銷毀起點(diǎn)</div>
    <div class="typeBtn" onclick="destroy('end')">銷毀終點(diǎn)</div>
  </div>
</body>
<script>
  let mapId = '1633665850273828864' // 您創(chuàng)建的地圖ID
  let tip = document.querySelector('#tip')
  let polygon, start, end

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

  //在指定位置打開(kāi)信息窗體
  function openInfo (lnglat, name) {
    //構(gòu)建信息窗體中顯示的內(nèi)容
    var info = `
    <div class='input-card content-window-card'>
      <div class="name">${name}</div>
      <div class="bar">
        <div class="btn start" onclick="setStart()">設(shè)為起點(diǎn)</div>
        <div class="btn end" onclick="setEnd()">設(shè)為終點(diǎn)</div>
      </div>
    </div>
    `
    infoWindow = new AMap.InfoWindow({
      content: info,  //使用默認(rèn)信息窗體框樣式，顯示信息內(nèi)容
      isCustom: true, // 如果為true，則DOM所有樣式需自己定義
    });

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

  // 監(jiān)聽(tīng)地圖加載完成
  map.on('loaded', () => {
    // 監(jiān)聽(tīng)地圖點(diǎn)擊事件
    map.on('click', (e) => {
      // 獲取poi點(diǎn)數(shù)據(jù)
      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
    }

    // 設(shè)置了起點(diǎn)和終點(diǎn)后可進(jìn)行路線規(guī)劃
    map.navi.find().then(() => {
      // 路線規(guī)劃成功，獲取路線距離
      let distance = map.navi.status.routeDistance.toFixed(2) || 0
      tip.style.display = 'block'
      tip.innerHTML = `距離:${distance}米`
    }).catch(err => {
      // 路線規(guī)劃失敗
      console.log(err, 'err')
      alert('未找到路線, 請(qǐng)聯(lián)系地圖制作方!')
    })
  }

  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') {
      // 銷毀起點(diǎn)
      map.navi.removeStart()
      start = null
    } else {
      //銷毀終點(diǎn)
      map.navi.removeEnd()
      end = null
    }
  }
</script>

</html>
  • 導(dǎo)航
    <!DOCTYPE html>
<html lang="en">

<head>
  <title>模擬導(dǎo)航</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>點(diǎn)擊POI點(diǎn)設(shè)置起點(diǎn)或終點(diǎn)</p> -->
    <div class="list">
      <div class="typeBtn" onclick="startNavi()">開(kāi)始導(dǎo)航</div>
      <div class="typeBtn" onclick="pauseNavi()">暫停</div>
      <div class="typeBtn" onclick="restoreNavi()">繼續(xù)</div>
      <div class="typeBtn" onclick="stopNavi()">結(jié)束</div>
      <div class="typeBtn" onclick="switchSpeed()">切換速度</div>
      <div class="typeBtn speed">
        低速
      </div>
    </div>
  </div>
</body>
<script>
  let mapId = '1633665850273828864' // 您創(chuàng)建的地圖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,
  })

  //在指定位置打開(kāi)信息窗體
  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()">設(shè)為起點(diǎn)</div>
        <div class="btn end" onclick="setEnd()">設(shè)為終點(diǎn)</div>
      </div>
    </div>
    `
    infoWindow = new AMap.InfoWindow({
      content: info,  //使用默認(rèn)信息窗體框樣式，顯示信息內(nèi)容
      isCustom: true, // 如果為true，則DOM所有樣式需自己定義
    });

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

  // 監(jiān)聽(tīng)地圖加載完成
  map.on('loaded', () => {
    // 監(jiān)聽(tīng)地圖點(diǎn)擊事件
    map.on('click', (e) => {
      // 獲取poi點(diǎn)數(shù)據(jù)
      polygon = e.object?.userData?.polygonData || null

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

    // 設(shè)置默認(rèn)起始點(diǎn)
    map.navi.setStart(start.id)
    map.navi.setEnd(end.id)
    map.navi.find().then(() => {
      // 路線規(guī)劃成功，獲取路線距離
      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
    }


    // 設(shè)置了起點(diǎn)和終點(diǎn)后可進(jìn)行路線規(guī)劃
    map.navi.find().then(() => {
      // 路線規(guī)劃成功，獲取路線距離
      let distance = map.navi.status.routeDistance.toFixed(2) || 0
      tip.style.display = 'block'
      tip.innerHTML = `距離:${distance}米`
    }).catch(err => {
      // 路線規(guī)劃失敗
      console.log(err, 'err')
      alert('未找到路線, 請(qǐng)聯(lián)系地圖制作方!')
    })
  }

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

    findPath()
  }

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

    findPath()
  }


  // 開(kāi)始導(dǎo)航
  function startNavi () {
    if (!start || !end) return false

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

  // 暫停導(dǎo)航
  function pauseNavi () {
    // 判斷當(dāng)前是否處于導(dǎo)航中
    if (map.navi.status.isSimulate) {
      map.navi.pauseSimulate()
    }
  }

  //繼續(xù)導(dǎo)航
  function restoreNavi () {
    // 判斷當(dāng)前是否處于暫停中
    if (!map.navi.isSimulatePause) {
      map.navi.resumeSimulate()
    }
  }


  // 退出導(dǎo)航
  function stopNavi () {
    // 退出模擬導(dǎo)航
    map.navi.stopSimulate()
    // 銷毀箭頭
    map.navi.removeNaviArrow()
    // 銷毀線路
    map.navi.removeNaviLine()
    //移除終點(diǎn)
    map.navi.removeEnd()
    end = null
  }

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

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

</script>

</html>
  • 3D可視化
    <!DOCTYPE html>
<html lang="en">

<head>
  <title>模型動(dòng)畫</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' // 您創(chuàng)建的地圖ID
  let marker = null

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


  // 監(jiān)聽(tīng)地圖加載完成
  map.on('loaded', () => {
    console.log('加載完成')
    // 監(jiān)聽(tīng)模型全部加載完成
    map.on('floorModelAllLoaded', (data) => {

      // 判斷當(dāng)前要展示的樓層是否一致
      if (data.id === map.mapData.id) {
        // 獲取到對(duì)應(yīng)的模型，這里獲取的是卡車模型
        let model = map.getModelById("ljnvcnlmssk")
        if (!model) {
          return
        }

        //生成路徑點(diǎn)
        // 第一個(gè)點(diǎn)則是模型的初始位置
        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

        // 創(chuàng)建動(dòng)畫函數(shù)
        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()
        }

        // 開(kāi)啟動(dòng)畫函數(shù)
        go(0, 1)
      }
    })

  })
</script>

</html>
賬號(hào)與Key的申請(qǐng)

注冊(cè)成為位構(gòu)云的開(kāi)發(fā)者：

第一步，注冊(cè)位構(gòu)云平臺(tái)賬號(hào)

第二步，控制臺(tái)創(chuàng)建地圖項(xiàng)目

第三步，獲取Key

獲取Key