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. ifram 调用父页面的easyui弹框

    转自https://www.cnblogs.com/puke/archive/2012/09/13/2683067.html 曾经试过这样的方法       在iframe子页面获取父页面元素     ...

  2. UVA1660 电视网络 Cable TV Network[拆点+最小割]

    题意翻译 题目大意: 给定一个n(n <= 50)个点的无向图,求它的点联通度.即最少删除多少个点,使得图不连通. 解析 网络瘤拆点最小割. 定理 最大流\(=\)最小割 感性地理解(口胡)一下 ...

  3. 基于h5+的微信登录，hbuilder打包

    1.打开app项目的manifest.json的文件,选择模块权限配置,将OAuth(登录鉴权)模块添加至已选模块中 2.选择SDK配置,在plus.oauuth·登录鉴权中,勾选□ 微信登录,配置好 ...

  4. python操作excel（xlwt写，xlrd读）基本方法

    python操作excle在测试工作中还是很有用的,比如读取测试数据,回写测试结果到excel. 1.安装 pip install xlwt pip install xlrd 2.写excel # 导 ...

  5. jdk1.6文档官方下载资源

    JDK1.6官方下载_JDK6官方下载地址:http://www.java.net/download/jdk6/6u10/promoted/b32/binaries/jdk-6u10-rc2-bin- ...

  6. git 删除错误commit

    其实就是硬reset到之前对的commit记录然后强行再推送到远程库一下 具体操作: git reset --hard <commit_id> git push origin HEAD - ...

  7. windows错误代码摘录

    Windows API 错误代码定义在winerror.h里,当我们得到一个Error Code不知其意时,可以查阅这个文件 这里定义了绝大部分的错误,摘录翻译如下 [0]-操作成功完成. [1]-功 ...

  8. 数据库访问优化之四：减少数据库服务器CPU运算

    1.使用绑定变量 绑定变量是指SQL中对变化的值采用变量参数的形式提交,而不是在SQL中直接拼写对应的值. 非绑定变量写法:Select * from employee where id=123456 ...

  9. Hadoop NameNode判断 DataNode 节点宕机的时间

    .namenode 如何判断datanode节点是否宕机? 先决条件: datanode每隔一段时间像namenode汇报,汇报的信息有两点 ()自身datanode的状态信息: ()自身datano ...

  10. 6、vueJs基础知识06

    vue动画 transition 之前1.0版本是以 属性的形式展示的 <p transition="fade"></p> .fade-transition ...