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. k8s安装之calico.yaml

    这个calico有点长,我也没有仔细看完. 但部署上去是可用的. 如果节点超过200台,那最好要另外一套配置... 而对于我们,差不多下面的配置够用了. veth_mtu: "1440&qu ...

  2. WXS介绍

    WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构. 1.WXS与JS的区别 1.1 WXS 的基础类库: WXS 只提供给开发者5个基础类库,分别是 c ...

  3. TODO : 一些新的学习计划

    1.读完jvm那本书 2.加深Android的开发知识 3.编写atx的demo 4.跑几个apk的性能测试并做详细的性能分析 5.尝试实现一个uiautomator多个手机同时执行脚本的可能性(连线 ...

  4. celery retry发送的队列

    celery retry时,将发送到原有的队列,并在任务中加入执行的时间,以及当前重试的次数. worker立刻读取该任务,同时记录一条[任务]到 unacked中,表示该任务在worker中还未执行 ...

  5. [NgRx 8] Basic of NgRx8

    1. First step is creating action creator Action name should be clear which page, which functionality ...

  6. 2019/8/20 Test

    题目 简述 做法 \(BSOJ2237\) 求\(\displaystyle{k\in G:\sum_{i\in G\vee j\in G}\frac{C^k_{i,j}}{C_{i,j}}}\),其 ...

  7. Go Node.js 生成的exe公布成windows服务

    环境变量 GOBIN E:\01_SOFT\go1.9.2\bin GOROOT E:\01_SOFT\go1.9.2 GOPATH(下载包的存放位置:go get github.com/gin-go ...

  8. learning java AWT BoxLayout布局管理器

    import javax.swing.*; import java.awt.*; public class BoxSpaceTest { private Frame f = new Frame(&qu ...

  9. POJ 2778 DNA Sequence (矩阵快速幂 + AC自动鸡)

    题目:传送门 题意: 给你m个病毒串,只由(A.G.T.C) 组成, 问你生成一个长度为 n 的 只由 A.C.T.G 构成的,不包含病毒串的序列的方案数. 解: 对 m 个病毒串,建 AC 自动机, ...

  10. 了解区块链&比特币

    https://www.bilibili.com/video/av45247943 假如有ABCD四个比特币交易者,其中A交易给B者10个比特币(BTC),而这条信息要广播给其他所有的交易者知道. 假 ...