地图片段

一套专为 Sublime Text 2/3 定制的网页地图片段

详情

版本 2015.10.06.18.12.21
主页 github．com
问题 github．com
修改日期 9年前
最后见到 2小时前
首次见到 11年前

安装量

总计 710
Win 493
Mac 128
Linux 89

	2021年8月6日	2021年8月5日	2021年8月4日	2021年8月3日	2021年8月2日	2021年8月1日	2021年7月31日	2021年7月30日	2021年7月29日	2021年7月28日	2021年7月27日	2021年7月26日	2021年7月25日	2021年7月24日	2021年7月23日	2021年7月22日	2021年7月21日	2021年7月20日	2021年7月19日	2021年7月18日	2021年7月17日	2021年7月16日	2021年7月15日	2021年7月14日	2021年7月13日	2021年7月12日	2021年7月11日	2021年7月10日	2021年7月9日	2021年7月8日	2021年7月7日	2021年7月6日	2021年7月5日	2021年7月4日	2021年7月3日	2021年7月2日	2021年7月1日	2021年6月30日	2021年6月29日	2021年6月28日	2021年6月27日	2021年6月26日	2021年6月25日	2021年6月24日	2021年6月23日
Windows	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0
Mac	1	1	0	0	0	0	0	0	1	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0
Linux	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	1	0	0	0

自述文件

源代码: raw．githubusercontent．com

Sublime Text 网页地图片段

正在进行中。

输入片段简码，然后按 Tab 键完成片段。每个快捷键为流行的 JavaScript 地图 API 的最新版本提供了一个基本的 HTML 页面骨架。

以下列出了按字母顺序排列的片段。'$1' 表示光标/插入点的位置。任何包含 $1/$2/$3 等的片段都使用此技术。按 Tab 键将循环通过这些位置。

请随意扩展这些片段。

gmaps

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map-canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=$1&sensor=$2">
    </script>
  </head>
  <body>
    <div id="map-canvas"/>
    <script type="text/javascript">
      function initialize() {
        var map = new google.maps.Map(document.getElementById("map-canvas");
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </body>
</html>

leaflet

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>$1</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
  <style type="text/css">
    body { margin:0; padding:0; }
    #map { position:absolute; top:0; bottom:0; width:100%; }
  </style>
</head>
<body>
  <div id="map"></div>
  <script>
    var map = L.map('map');
    L.tileLayer('http://{s}.tile.cloudmade.com/{key}/{styleId}/256/{z}/{x}/{y}.png', {
        key: $2,
        styleId: "997",
        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>'
    }).addTo(map);
    $3
  </script>
</body>
</html>

mapbox

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>$1</title>
  <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
  <script src='//api.tiles.mapbox.com/mapbox.js/v1.6.0/mapbox.js'></script>
  <link href='//api.tiles.mapbox.com/mapbox.js/v1.6.0/mapbox.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 type="text/javascript">
    var map = L.mapbox.map('map', 'examples.map-9ijuk24y');
    $2
  </script>
</body>
</html>

ol3 (OpenLayers 3) “html <!doctype html>

.map { height: 400px; width: 100%; } adsadas