在线使用SuperMap Online上的地图


本例将带领您了解SuperMap Online的在线地图(http://www.supermapol.com/web/maps ),并在网页中快速插入其中一幅地图。

Step1 创建一个页面GettingStarted.html,添加地图容器

从零开始,您可以:

  • 先创建一个页面GettingStarted.html
  • 然后在页面中创建一个用于显示地图的容器:一个div,并设置id = "map"
  • 定义样式,如高度设为600px
<!DOCTYPE html>
<html>
<head>
    <title>GetStarted</title>
    <style>
        .mapcontainer{
            height: 600px;
        }
    </style>
</head>
<body>
<div id = "map" class="mapcontainer"></div>
</body>
</html>

Step2 引入在线js脚本

在GettingStarted.html中的</body>标签前,加入引用的脚本,如下:

<script src='http://www.supermapol.com/resources/api/libs/SuperMap.Include.js'></script>

其中,SuperMap.Include.js是SuperMap Online提供的在线脚本,可以很方便地嵌入地图。

Step3 在页面中插入SuperMap Online在线地图

在GettingStarted.html中,插入“中国地图”(id为493),代码如下:

<script>
    var url="http://www.supermapol.com";
    var viewer=new SuperMap.Cloud.MapViewer(url,"map");
    viewer.previewMapById(493);
</script>

其中,SuperMap.Cloud.MapViewer(url,"map")用于创建一个地图浏览的窗口,url为SuperMap Online的网址,"map"为Step1中创建的地图容器的id。

在线演示与源码编辑

将GettingStarted.html保存后,直接在浏览器中打开这个页面,您就可以开始浏览“中国地图”。 您也可以通过在线体验的方式,直接在线编辑源码并实时查看演示效果。

在线演示 编辑源码

<html>
<head>
    <title>GetStarted</title>
    <style>
        .mapcontainer{
            height: 600px;
        }
    </style>
      <script src='http://www.supermapol.com/resources/api/libs/SuperMap.Include.js'></script>
</head>
<body>
    <div id="map" class="mapcontainer"></div>
    <script>
        var url="http://www.supermapol.com";
        var viewer=new SuperMap.Cloud.MapViewer(url,"map");
        viewer.previewMapById(493);
    </script>
</body>
</html>

Where to go next

如果使用SuperMap Online网站已有的地图不能满足您的需求,您还可以在线制作属于您自己的地图,并插入您的网页中。

SuperMap Online提供了丰富的底图和多种添加个性化数据的途径,您可以基于这些地图素材方便地在线制作的地图。

但是在制作属于自己的地图前,您必须先拥有一个自己的SuperMap账户