使用Mapbox给自己的博客加上漂亮的地图
Mapbox 是一家专注于地图技术和地理空间数据的公司。可以通过他们的地图服务来创建、定制和发布交互式地图。相关技术被广泛应用于各种领域,包括移动应用、网页地图、交通导航、地理信息系统(GIS)等。
示例效果展示
更多效果可以查看官方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());
给我的感觉
功能很强大,可以用来展示自己位置,旅游地图等等,而且干净美观。