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. java加密算法-MD5

    import java.security.MessageDigest; public class MD5Util { /*** * MD5加密 生成32位md5码 * @param 待加密字符串 * ...

  2. java.lang.RuntimeException: org.springframework.dao.DuplicateKeyException:

    java.lang.RuntimeException: org.springframework.dao.DuplicateKeyException: ### Error updating databa ...

  3. mysql.jdbc.Driver异常总结

    1.registered the JDBC driver [com.mysql.jdbc.Driver] but failed to unregister it when the web applic ...

  4. Samba服务安装

    安装Samba服务   1.在可以联网的机器上使用yum工具安装,如果未联网,则挂载系统光盘进行安装. # yum install samba samba-client samba-swat 有依赖关 ...

  5. VS调试web api服务

    vs2013开发web api service时,使用vs开发服务器调试没有问题,但将项目放到另一台电脑调试(vs2010),总会提示 无法再以下端口启动asp.net开发服务器 错误:通常每个套接字 ...

  6. 常用的两种web单点登录SSO的实现原理

    单点登录SSO(Single Sign On)说得简单点就是在一个多系统共存的环境下,用户在一处登录后,就不用在其他系统中登录,也就是用户的一次登录能得到其他所有系统的信任.单点登录在大型网站里使用得 ...

  7. ES 大批量写入提高性能的策略

    1.用bulk批量写入 你如果要往es里面灌入数据的话,那么根据你的业务场景来,如果你的业务场景可以支持让你将一批数据聚合起来,一次性写入es,那么就尽量采用bulk的方式,每次批量写个几百条这样子. ...

  8. imagick的简单使用

    原文:https://blog.csdn.net/wulove52/article/details/78376142 PHP建图通常都用GD库,因为是内置的不需要在服务器上额外安装插件,所以用起来比较 ...

  9. 《挑战30天C++入门极限》C++的iostream标准库介绍(3)

        C++的iostream标准库介绍(3) C语言提供了格式化输入输出的方法,C++也同样,但是C++的控制符使用起来更为简单方便,在c++下有两中方法控制格式化输入输出. 1.有流对象的成员函 ...

  10. 《挑战30天C++入门极限》C++类对象的复制－拷贝构造函数

        C++类对象的复制-拷贝构造函数 在学习这一章内容前我们已经学习过了类的构造函数和析构函数的相关知识,对于普通类型的对象来说,他们之间的复制是很简单的,例如: int a = 10; int ...