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. 【转】spring bean 卸载

    spring bean 卸载起因: 群里的一个朋友问到: 关于配置destory-method, springboot中 yml如何指定 首先介绍 bean卸载的三种形式 自定义destory-met ...

  2. samba简单配置

    Samba是在Linux和UNIX系统上实现SMB协议的一个免费软件,由服务器及客户端程序构成.SMB (Server Messages Block,信息服务块)是一种在局域网上共享文件和打印机的一种 ...

  3. 剑指offer：用两个栈实现一个队列

    题目 用两个栈来实现一个队列,完成队列的Push和Pop操作. 队列中的元素为int类型. 解题思路 用一个栈A来保存入栈,当要出栈的时候,将栈A的元素按照栈后进先出的特点转移到栈B中(此时栈A为空了 ...

  4. web 错误代码解析

    404表示文件或资源未找到java WEB常见的错误代码1.1xx-信息提示:这些状态代码表示临时的响应.客户端在收到常规响应之前,应准备接收一个或多个1xx响应.100-继续.101-切换协议.2. ...

  5. 51nod 2497 数三角形

    小b有一个仅包含非负整数的数组a,她想知道有多少个三元组(i,j,k),满足i<j<k且a[i],a[j],a[k]可能作为某个三角形的三条边的边长. 收起   输入 第一行输入一个正整数 ...

  6. Sharding-JDBC（三）3.1.0版本实践

    目录 一.Sharding-JDBC依赖 二.代码实践 三.源码分析 在上一篇博文中,介绍了Sharding-JDBC的分片策略.分片键和分片算法的基本概念,以及2.0.3版本可以支持和无法支持的使用 ...

  7. “只有DBA才能导入由其他DBA导出的文件”各种解决办法

    “只有DBA才能导入由其他DBA导出的文件”各种解决办法 当oracle导入的时候出现“只有 DBA 才能导入由其他 DBA 导出的文件”的时候通常有以下几种解决办法! 1:常见的是直接grant   ...

  8. Selenium常用API的使用java语言之20-获取窗口截图

    自动化用例是由程序去执行,因此有时候打印的错误信息并不十分明确.如果在脚本执行出错的时候能对当前窗口截图保存,那么通过图片就可以非常直观地看出出错的原因. WebDriver提供了截图函数getScr ...

  9. js 定时器 执行一次和重复执行

    1- 执行一次(延时定时器) var t1 = window.setTimeout(function() { console.log('1秒钟之后执行了') },1000) window.clearT ...

  10. [CSS] Create a Card Flip Animation with CSS

    Animation can be a powerful way to enhance a user experience. In this lesson, we'll walk through the ...