mapbox地图入门案例

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta charset='utf-8' />
  6.     <title>Mapbox显示地图案例</title>
  7.     <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
  8.     <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.37.0/mapbox-gl.js'></script>
  9.     <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.37.0/mapbox-gl.css' rel='stylesheet' />
  10.     <style>
  11.         body {
  12.             margin: 0;
  13.             padding: 0;
  14.         }
  15.  
  16.         #map {
  17.             position: absolute;
  18.             top: 0;
  19.             bottom: 0;
  20.             width: 100%;
  21.         }
  22.     </style>
  23. </head>
  24.  
  25. <body>
  26.  
  27.     <div id='map'></div>
  28.     <script>
  29.         mapboxgl.accessToken = '<your access token here>';
  30.         var map = new mapboxgl.Map({
  31.             container: 'map', // container id
  32.             style: 'mapbox://styles/mapbox/streets-v9', //stylesheet location
  33.             center: [116.28, 39.54], // starting position 北京的经纬度坐标
  34.             zoom: 3, // starting zoom
  35.         });
  36.     </script>
  37.  
  38. </body>
  39.  
  40. </html>

先有案例，才好入门mapbox。

来自：mapbox中国 官网

https://www.mapbox.cn/mapbox-gl-js/examples/

Mapbox显示地图案例的更多相关文章

  1. 小白的mapbox学习之路-显示地图

    刚接触mapbox,只是简单记下自己的学习之路,如有错误,欢迎大神指正 1-头部引入链接 2-body中定义一个div块,用来显示地图 3-在script中创建一个map对象,并设置相关参数 mapb ...

  2. JavaWeb和WebGIS学习笔记（五）——使用OpenLayers显示地图

    系列链接: Java web与web gis学习笔记(一)--Tomcat环境搭建 Java web与web gis学习笔记(二)--百度地图API调用 JavaWeb和WebGIS学习笔记(三)-- ...

  3. Google Maps API显示地图的小示例

    来源:http://www.ido321.com/1089.html 效果(新版Firefox中测试): 代码: <!DOCTYPE> <html> <head> ...

  4. Swift - 使用MapKit显示地图，并在地图上做标记

    通过使用MapKit可以将地图嵌入到视图中,MapKit框架除了可以显示地图,还支持在地图上做标记. 1,通过mapType属性,可以设置地图的显示类型 MKMapType.Standard :标准地 ...

  5. 转载-SharePoint 2010 WebPart与Google地图系列 一：创建显示地图的WebPart

    [原] SharePoint 2010 WebPart与Google地图系列 一:创建显示地图的WebPart 摘要: 作为信息化先驱的产品SharePoint 2010竟然对GIS相关技术支持如此有 ...

  6. 开源方案搭建可离线的精美矢量切片地图服务-3.Mapbox个性化地图定制入门

    1.简介 mapbox是一家非常牛的公司,比如像特斯拉.DJI大疆创新.孤独星球.Airbnb.GitHub.Cisco.Snap.飞猪.Keep.Bosch这些在国内外各自领域中响当当的企业都是它的 ...

  7. openlayers一：显示地图与鼠标地理坐标

    openlayers两个好用的开源JS互动地图库之一,另一个是leaflet. openlayers的特点是是大而全,自身包含绝大多数功能,文档好看. leaflet是小而美,自身小,但支持扩展,好用 ...

  8. 百度地图api通过地址显示地图，白名单

    百度地图api通过地址显示地图,白名单 http://developer.baidu.com/map/jsdemo.htm#i7_1?qq-pf-to=pcqq.c2c---------------- ...

  9. (android 地图实战开发)2 创建MapActivity,根据设备当前位置，显示地图

    (android 地图实战开发)2 创建MapActivity,根据设备当前位置,显示地图 http://www.cnblogs.com/macroxu-1982/archive/2011/09/13 ...

随机推荐

  1. k8s安装之dashboard.yaml

    这个我使用了nodeport方式导出来. 为了安装,最好在前面加个nginx作密码验证... 这个端口,可以通过防火墙禁掉. # Copyright 2017 The Kubernetes Autho ...

  2. 微信小程序~获取位置信息

    微信小程序提供的getlocation来获取用户的定位,能够得到用户的经纬度信息 (注:getloaction需要用户授权scope.userLocation)结合map组件能够得到用户的详细定位 & ...

  3. JDK、CGLIB、Javassist和ASM的动态代理使用对比

    动态代理是指在运行时,动态生成代理类.正如标题所示,能够提供动态代理的方式有很多.既然选择这么有很多,那么如何选择会更好呢? 带着这个疑问,我找到了Dubbo的作者--梁飞大神的一篇文章.文章中对四种 ...

  4. Mycat简单配置

    最近项目中需要用到Mycat来作为Mysql的分表中间件.所以稍微研究了一下. Mycat使用起来是非常方便,而且最重要的是配置简单,稍显麻烦的就是需要对库中的每一个表都进行配置. 记录一下最重要的几 ...

  5. oracle数据库创建表且主键自增

    唠叨几句:几年前的知识忘却了,整理一下笔记,提供一下方便 1.创建数据库表 设置主键 create table users( userid number(10) primary key, /*主键,自 ...

  6. 堆优化Prim 最小生成树 模板

    #include <bits/stdc++.h> using namespace std; const int MAXN = 5005; const int MAXM = 200005; ...

  7. set的完整用法

    #include<bits/stdc++.h> using namespace std; set<int>s; int main () { //begin()--返回指向第一个 ...

  8. SpringBoot官方文档学习（三）配置文件、日志、国际化和JSON

    一.Profiles Spring配置文件提供了一种方法来隔离应用程序配置的各个部分,并使其仅在某些环境中可用.任何@Component.@Configuration或@ConfigurationPr ...

  9. Linux入门——安装jdk、tomcat、MySQL以及项目部署

    Linux简介     Linux是一套免费使用和自由传播的类Unix操作系统,是一个基于POSIX和Unix的多用户.多任务. 支持多线程和多CPU的操作系统.伴随着互联网的发展,     Linu ...

  10. Prometheus监控学习笔记

    K8S最佳实战(包括了K8S的Prometheus监控和EFK日志搜集) https://jimmysong.io/kubernetes-handbook/practice/ Prometheus-b ...