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. 神经网络(10)--有助于对神经网络Backpropagation算法的理解

    为了更好的理解backpropagation,先来了解一下forward propagation的内部 我们在forward propagation中计算Z1(3)的方法与在back propagat ...

  2. C语言二级指针间接赋值

    重要意义:间接赋值的意义,实现了模块的功能划分,实现了软件作品的分层,使得模块接口和信息系统得以实现. 所谓二级指针就是指向指针的指针,其声明形式如下 int *p=NULL int **p1=NUL ...

  3. 动手动脑-------找出指定文件夹下所有扩展名为.txt和.java的文件

    思路:首先向获取文件,如果是文件的话,则判断它是否以".txt"或".java"结尾,如果是则输出它的路径.如果是文件夹的话,则需获取子文件,利用递归方法遍历子 ...

  4. [转载]JSON WEB TOKEN，简单谈谈TOKEN的使用及在C#中的实现

    https://www.cnblogs.com/chenwolong/p/Token.html

  5. include和taglib指令

    1.include指令用来包含另一个静态文件,这个静态文件可以是一个JSP页面.一个Servlet.文本文件.JSP代码. include.jsp <%@ page contentType=&q ...

  6. 布鲁克斯法则 (Brooks's Law)

    软件开发后期,添加人力只会使项目开发得更慢. 这个定律表明,在许多情况下,试图通过增加人力来加速延期项目的交付,将会使项目交付得更晚.布鲁克斯也明白,这是一种过度简化.但一般的推理是,新资源的增加时间 ...

  7. Codevs 1482 路线统计(矩阵乘法)

    1482 路线统计 时间限制: 1 s 空间限制: 256000 KB 题目等级 : 钻石 Diamond 题目描述 Description N个节点的有向图, 求从start到finish刚好经过时 ...

  8. Bzoj 2154: Crash的数字表格(积性函数)

    2154: Crash的数字表格 Time Limit: 20 Sec Memory Limit: 259 MB Description 今天的数学课上,Crash小朋友学习了最小公倍数(Least ...

  9. 洛谷P1706全排列问题

     P1706 全排列问题 题目描述 输出自然数1到n所有不重复的排列,即n的全排列,要求所产生的任一数字序列中不允许出现重复的数字. 输入输出格式 输入格式: n(1≤n≤9) 输出格式: 由1-n组 ...

  10. python-图像目标监测（1）识别答题卡

    # -*- coding: utf-8 -*- """ Created on Thu Dec 20 16:05:10 2018 @author: leizhen.liu ...