展示銷售據點

範例展示

原始碼

copy
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>展示銷售據點 - Map8 Platform Documentation</title>
    <link rel="stylesheet" href="https://api.map8.zone/css/gomp.css?key=[YOUR_KEY_HERE]" />
    <style>
        #map{
            height: 400px;
            width: 100%;
        }
        .map-container {
          display:flex;
          border:1px solid #ccc;
          height:400px;
          max-height:80vh;
          position:relative;
        }
        .point{
          cursor: pointer;
        }
        #points,
        #map{
          box-sizing:border-box;
        }
        #points{
          font-size:14px;
          overflow-y:scroll;
        }
        #points div{
          line-height:1.8em;
          padding:1em;
          transition:.2s;
        }
        #points div + div{
          border-top:1px solid #ddd;
        }
        #points div:hover{
          background:#eee;
        }
    </style>
</head>
<body>
    <div class="map-container">
      <div id="points"></div>
      <div id="map"></div>
    </div>
    <script type="text/javascript" src="https://api.map8.zone/maps/js/gomp.js?key=[YOUR_KEY_HERE]"></script>
    <script type="text/javascript">
        gomp.accessToken = '[YOUR_KEY_HERE]';
        var map = new gomp.Map({
            container: 'map', // 地圖容器 ID
            style: 'https://api.map8.zone/styles/go-life-maps-tw-style-std/style.json', // 地圖樣式檔案位置
            maxBounds: [[105, 15], [138.45858, 33.4]], // 台灣地圖區域
            center: [121.574494, 25.075904], // 初始中心座標，格式為 [lng, lat]
            zoom: 16, // 初始 ZOOM LEVEL; [0-20, 0 為最小 (遠), 20 ;最大 (近)]
            minZoom: 6, // 限制地圖可縮放之最小等級, 可省略, [0-19.99]
            maxZoom: 19.99, // 限制地圖可縮放之最大等級, 可省略 [0-19.99]
            speedLoad: false,
            attributionControl: false
        }).addControl(new gomp.AttributionControl({
            compact: false
        }));
let points = [
      {
          'name': '台灣圖霸 - 研鼎智能科技',
          'add': '台北市內湖區港墘路200號4樓',
          'tel': '(02)87921567',
          'coordinate': [121.574494, 25.075904]
      },
      {
          'name': '台北光華商場門市：精緯電子',
          'add': '台北市光華商場市民大道三段 8 號 4 樓 51 室',
          'tel': '(02)23962950',
          'coordinate': [121.53219, 25.045384]
      },
      {
          'name': '新北市泰山區：元新車業',
          'add': '新北市泰山區楓江路 7 號',
          'tel': '(02)29003508',
          'coordinate': [121.433613,25.062567]
      },
      {
          'name': '新竹縣竹北市：鑫業車業',
          'add': '新竹縣竹北市縣政十三路 133 號',
          'tel': '(03)6562995',
          'coordinate': [121.008202, 24.831911]
      },
      {
          'name': '彰化：三立機車行',
          'add': '彰化縣北斗鎮中山路一段 256 號',
          'tel': '(04)8872782',
          'coordinate': [120.514914, 23.870652]
      },
      {
          'name': '嘉義：松葉騎士館',
          'add': '嘉義市西區自由路 221 號',
          'tel': '(05)2910329',
          'coordinate': [120.436162, 23.488574]
      }
  ];
  points.forEach(function(point) {
    // 文字
      let pointEl = document.createElement("div");
      pointEl.coordinate = point.coordinate;
      pointEl.setAttribute('class', 'point');
      pointEl.innerHTML = point.name + point.add + point.tel;
      document.getElementById("points").appendChild(pointEl);
      // 新增 Popup 視窗
      let popup = new gomp.Popup({
        offset: 38,
        closeButton: false // 不顯示「×」
      }).setText(point.name);
      // 在地圖上打點並預設開啟 Popup
      new gomp.Marker().setLngLat(point.coordinate).setPopup(popup).addTo(map).togglePopup();
  });

  // 滑鼠置於據點上時滑動地圖並顯示據點資料
  let pointElList = document.getElementsByClassName("point");
  for (let i = 0; i < pointElList.length; i++) {
    let point = points[i];
      pointElList[i].addEventListener("click", function (event) {
          let coordinate = event.target.coordinate;
          map.flyTo({
            center: coordinate,
          });
      });
  }

    </script>
</body>
</html>