mapbox地图入门案例

<!DOCTYPE html>

<html>

<head>

    <meta charset='utf-8' />

    <title>Mapbox显示地图案例</title>

    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />

    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.37.0/mapbox-gl.js'></script>

    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.37.0/mapbox-gl.css' rel='stylesheet' />

    <style>

        body {

            margin: 0;

            padding: 0;

        }

        #map {

            position: absolute;

            top: 0;

            bottom: 0;

            width: 100%;

        }

    </style>

</head>

<body>

    <div id='map'></div>

    <script>

        mapboxgl.accessToken = '<your access token here>';

        var map = new mapboxgl.Map({

            container: 'map', // container id

            style: 'mapbox://styles/mapbox/streets-v9', //stylesheet location

            center: [116.28, 39.54], // starting position 北京的经纬度坐标

            zoom: 3, // starting zoom

        });

    </script>

</body>

</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. 【转】使用JavaParser获得Java代码中的类名、方法形参列表中的参数名以及统计总的文件个数与不能解析的文件个数

    遍历目录查找Java文件: public static void ergodicDir(File dir, HashSet<String> argNameSet, HashSet<S ...

  2. Microsoft Onenote shortcuts / Onenote快捷键大全

    Onenote跟Libreoffice ,有道笔记比起来一个快捷键特别不太好用,就是Ctrl + Shift +v 并不会提供一个选择粘贴模式选项. 而在Onenote 中 Ctrl + Shift ...

  3. linux系统编程之进程(一)

    今天起,开始学习linux系统编程中的另一个新的知识点----进程,在学习进程之前,有很多关于进程的概念需要了解,但是,概念是很枯燥的,也是让人很容易迷糊的,所以,先抛开这些抽象的概念,以实际编码来熟 ...

  4. IOT设备通讯，MQTT物联网协议，MQTTnet

    一.IOT设备的特性 硬件能力差(存储能力基本只有几MB,CPU频率低连使用HTTP请求都很奢侈) 系统千差万别(Brillo,mbedOS,RIOT等) 如使用电池供电,电量消耗敏感 如果是小设备, ...

  5. 题解 UVa10943

    题目大意 多组数据,每组数据给定两个整数 \(n,k\),求出用 \(k\) 个不超过 \(n\) 的数相加得到 \(n\) 的方案数(不同顺序不算同种). 分析 计数水题.令 \(f_{i,j}\) ...

  6. 3D-2D透视投影数学推导

    请尊重作者,禁止私自盗用图片!

  7. go html

    package main import ( "fmt" "html/template" "net/http" ) type User str ...

  8. 最长不下降子序列 nlogn && 输出序列

    最长不下降子序列实现: 利用序列的单调性. 对于任意一个单调序列,如 1 2 3 4 5(是单增的),若这时向序列尾部增添一个数 x,我们只会在意 x 和 5 的大小,若 x>5,增添成功,反之 ...

  9. TCPDUMP抓包学习

    一.抓包基础 1.抓网卡ens33 的包,有多大抓多大,然后保存到a.cap中 [root@localhost ~]# tcpdump -i ens33 -s -w a.cap tcpdump: li ...

  10. 六.搭建基本的Web服务

    1.安装httpd软件包 ]# yum -y install httpd 2.重起httpd服务 ]# systemctl restart httpd ]# systemctl enable http ...