使用Mapbox给自己的博客加上漂亮的地图

本文共：737 字阅读需要：2 分钟

加载中...

Mapbox 是一家专注于地图技术和地理空间数据的公司。可以通过他们的地图服务来创建、定制和发布交互式地图。相关技术被广泛应用于各种领域，包括移动应用、网页地图、交通导航、地理信息系统（GIS）等。

示例效果展示

更多效果可以查看官方Mapbox地图效果示例

关于注册

Mapbox官网

如果动手能力强建议自己注册，需要绑定银行卡，银联应该不行（我试了我的不行），外币卡没在身边所以没试。最简单有效的办法就是去淘宝十块多买一个号，每个月好像有50,000的请求。

另外登陆成功后新建一个Token白名单填写自己的博客网站，避免被其他人冒用。照抄代码的话需要改自己的经纬度。

示例源码

html代码

<div id="map"></div>
 <link href="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/mapbox-gl/2.8.0-alpha.1/mapbox-gl.css" rel="stylesheet">
 <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/mapbox-gl/2.8.0-alpha.1/mapbox-gl.js"></script>
      <style>
          #map {
             position: relative;
             top: 0;
             bottom: 0;
             width: 100%;
             height: 400px;
          }
          .mapboxgl-ctrl-bottom-left,
          .mapboxgl-ctrl-bottom-right {
              display: none;
          }
          .mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon,
          .mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon {
              background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1.4em' height='1.4em' viewBox='0 0 24 24'%3E%3Cpath fill='%23b0b0b0' d='M2 7.25A3.25 3.25 0 0 1 5.25 4h13.5A3.25 3.25 0 0 1 22 7.25v9.5A3.25 3.25 0 0 1 18.75 20h-6.275l-2.05-2.05A5.5 5.5 0 0 0 2 11.257zM5.5 20a4.5 4.5 0 0 0 2.607-.832l2.613 2.612a.75.75 0 1 0 1.06-1.06l-2.612-2.613A4.5 4.5 0 1 0 5.5 20m0-1.5a3 3 0 1 1 0-6a3 3 0 0 1 0 6'/%3E%3C/svg%3E");
          }
          .mapboxgl-ctrl-group {
              background: #29292900;
          }
          .mapboxgl-ctrl-group button:last-child {
              border-radius: 0 0 4px 4px;
              color: #b0b0b0;
          }
          .mapboxgl-ctrl-group button:first-child {
              border-radius: 4px 4px 0 0;
              color: #b0b0b0;
          }
      </style>

js代码

         mapboxgl.accessToken = '自己的Token，登录mapbox查看获取'; // Replace with your Mapbox Access Token
          const bounds = [
              [108.0, 34.0], // Southwest coordinates [longitude, latitude]
              [109.5, 35.0]  // Northeast coordinates [longitude, latitude]
          ];
          const map = new mapboxgl.Map({
              container: 'map', // container ID
              style: 'mapbox://styles/mapbox/dark-v11', // style URL
              center: [108.70, 34.34], // starting position [longitude, latitude]
              zoom: 12, // initial zoom level
              minZoom: 10, // minimum zoom level
              maxZoom: 13, // maximum zoom level
              maxBounds: bounds // maximum bounds
          });
          map.on('load', () => {
              map.loadImage(
                  '/6549e08158c74.png', //定位图标
                  (error, image) => {
                      if (error) {
                          console.error('Error loading image:', error);
                          return;
                      }
                      map.addImage('cat', image);
                      map.addSource('point', {
                          'type': 'geojson',
                          'data': {
                              'type': 'FeatureCollection',
                              'features': [
                                  {
                                      'type': 'Feature',
                                      'geometry': {
                                          'type': 'Point',
                                          'coordinates': [108.70, 34.34]
                                      }
                                  }
                              ]
                          }
                      });
                      map.addLayer({
                          'id': 'points',
                          'type': 'symbol',
                          'source': 'point', // reference the data source
                          'layout': {
                              'icon-image': 'cat', // reference the image
                              'icon-size': 0.15
                          }
                      });
                  }
              );
          });
          class CustomNavigationControl {
              onAdd(map) {
                  this.map = map;
                  this.container = document.createElement('div');
                  this.container.className = 'mapboxgl-ctrl mapboxgl-ctrl-group';
                  const zoomInButton = this._createButton('mapboxgl-ctrl-icon mapboxgl-ctrl-zoom-in', '+', () => this._zoomIn());
                  const zoomOutButton = this._createButton('mapboxgl-ctrl-icon mapboxgl-ctrl-zoom-out', '-', () => this._zoomOut());
                  this.container.appendChild(zoomInButton);
                  this.container.appendChild(zoomOutButton);
                  return this.container;
              }
              onRemove() {
                  this.container.parentNode.removeChild(this.container);
                  this.map = undefined;
              }
              _createButton(className, text, fn) {
                  const button = document.createElement('button');
                  button.className = className;
                  button.textContent = text;
                  button.onclick = fn;
                  return button;
              }
              _zoomIn() {
                  if (this.map.getZoom() < this.map.getMaxZoom()) {
                      this.map.zoomIn();
                  }
              }
              _zoomOut() {
                  if (this.map.getZoom() > this.map.getMinZoom()) {
                      this.map.zoomOut();
                  }
              }
          }
          map.addControl(new CustomNavigationControl(), 'top-left');
          // Disable scroll zoom
          map.scrollZoom.disable();
          // Add fullscreen control
          map.addControl(new mapboxgl.FullscreenControl());

给我的感觉

功能很强大，可以用来展示自己位置，旅游地图等等，而且干净美观。