使用 GeoHey JavaScript SDK 显示地图

by WuYF

GeoHey JavaScript SDK是一个面向移动互联网时代，遵循移动优先、向下兼容、保持轻量等原则的地图开发包。使用SDK开发Web应用的第一步一般都是把地图显示出来，现在让我们看怎么用几行代码来显示各种来源的地图。

显示简单地图

显示地图首先需要引入SDK库文件，如何在页面中引入库文件可以参考在线SDK文档：http://dist.geohey.com/g-js/latest/doc/index.html#guide-init
简单地说就是先在页面head中引入以下两个文件：

<head>
    <link rel="stylesheet" href="http://dist.geohey.com/g-js/latest/lib/g.css">
    <script type="text/javascript" src="http://dist.geohey.com/g-js/latest/lib/g.min.js"></script>
</head>

然后在页面body中添加一个div用作地图的容器：

<body>
    <div id="mapContainer" style="width: 100%; height: 100%;">
</body>

在这之后就可以使用JavaScript显示并操作地图了，这里先加载一个最简单的开放地图：

G.ready(function() { // 此时类库加载完成
    var map = new G.Map('mapContainer');
    var layer = new G.Layer.Tile('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        cluster: ['a', 'b', 'c']
    });
    layer.addTo(map);
});

现在你应该可以看到这样的一个地图（请忽略地图左上角的按钮，这是自己另行添加的，GeoHey的SDK不绑定任何这类UI元素）：

显示主流互联网地图

在GeoHey的SDK中，显示大家熟悉的地图服务一般通过Layer.Tile这个类（瓦片图层）加载，一个地图里面可以加一个或者多个“图层”。瓦片图层就是通过一张张小图片拼起来的地图。为了方便操作，GeoHey封装了若干主流地图服务的图层：

> 这里你看到的地图有些会感觉字不是很清晰等情况，一方面是有的地图不支持Retina屏幕，另一方面是我们的SDK支持的无级缩放地图模式（这个模式可以关闭）虽然可以带来更好的体验，但是大部分地图服务并不支持。

显示这些地图的代码通常只有几行：

G.ready(function() { // 此时类库加载完成
    G.loadModule('maps', function() { // 开始使用模块内的功能
        var map = new G.Map('mapContainer');
        var layer = new G.Layer.QQMap('street');
        					map.addLayer(layer);
    });
});

这里的图层创建需要在loadModule方法中调用，因为第三方地图的支持并不在核心库中。这里先加载了“maps”这个模块，当这个模块加载完成后才可以进行下一步的操作。

显示自定义地图

事实上，如果你很清楚各种地图的调用格式，自己也可以写这样的代码调用各种地图，理论上GeoHey SDK不对地图的形式有任何的限制。如果你是一个地图方面的专家，你甚至可以用自己发布的任何坐标系的地图（SDK默认设置为Web Mercator，因为这在互联网地图中最为常见），只要你能确定图层URL模式，并设置好对应的zoomReses选项（详情请参考更加详细的文档说明：http://dist.geohey.com/g-js/latest/doc/index.html#tile-layer
）就可以了，SDK中判断地图如何显示都是通过zoomReses定义的地图分辨率来确定的，这和很多SDK预先定义的若干个显示级别的方法有非常大的不同。

最后再放一个使用GeoHey SDK开发的室内地图的例子，在电脑上用鼠标滚动一下地图或者在手机上用手指捏合一下地图，来体验一下GeoHey地图所能提供的无级缩放的感觉吧：