维码平台二次开发帮助文档

风格地图

  • 概述

    • 调用51地图

  • 示例

    新增：风格地图调用 （2010.04.29）

    • 1.数据源的配置放在配置文件的Other节点，字段别名是固定的，可参考如下例子：
    <MapList>
      <Map Name="MyMap" Title="地图的数据源配置">
          <DataSource Type="SqlServer">
            <![CDATA[
                       select a.Id,a.CityName,a.LatAndlon,a.color,a.type from (select '00001559-BCDF-4092-98A4-E28353D76C93' as Id,'成都' as CityName,'10406750,3058102' as LatAndlon,'red' as color,'主导产品' as type
            union
            select '0000B4A6-D19E-4067-86BA-EEBCF70C39E0' as Id,'北京' as CityName,'11663767,3983604' as LatAndlon,'blue' as color,'二线品牌' as type
            ) a where CityName='{@Query['CityName']}'
                     ]]>
          </DataSource>
          <DataSource Type="Oracle">
            <![CDATA[   
            select '00001559-BCDF-4092-98A4-E28353D76C93' as Id,'北京' as CityName,'10406750,3058102' as LatAndlon,'red' as color,'主导产品' as type from dual
            union
            select '0000B4A6-D19E-4067-86BA-EEBCF70C39E0' as Id,'北京' as CityName,'11663767,3983604' as LatAndlon,'blue' as color,'二线品牌' as type  from dual
                       ]]>
          </DataSource>
        </Map>
      </MapList>
其中'{@Query['CityName']}'是查询字段，与查询生成的XML格式相对应。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20

    • 2.页面调用：

      <%--地图初始化--%> 
    <script language="javascript" type="text/javascript" src="../JavaScript/UI/MapDiv/WebMapDiv.js"></script>
    <script language="javascript" type="text/javascript" src="../JavaScript/Global.js.aspx"></script>
    <%--地图必备--%>
    <script language="javascript" src="http://api.51ditu.com/js/maps.js" type="text/javascript"></script>
      1
      2
      3
      4
      5

      2．HTML控件容器，用于显示地图，可自行设计在页面的任意位置，

      <body>
    <form id="form1" runat="server">
     <div id="myMap"  EntityName="SysMapping" MapName="MyMap" style="border-right: #000066 0px solid; border-left: #000066 1px solid;
                                         width: 100%; border-bottom: #000066 1px solid; position: relative; height: 95%">
                                    </div>
    </form>
</body>
      1
      2
      3
      4
      5
      6
      7

      3．调用生成页面事件：JS(Load)

      window.attachEvent("onload", function() {
            var Div = new WebMapDiv("myMap");//生成地图，"myMap"为装载地图的DIV容器Id
            //此DIV有EntityName（配置文件名）和MapName属性以便找到相关数据源，无则不加
            //数据源，有查询功能时，此Div对象做为全局对象，以便查询按钮调用Div.Init(QueryXml);
            var QueryXml = "<Root>";//查询最终要生成的格式，以<Root>开头，与数据源相对应。
            QueryXml += "<CityName>成都</CityName>";
            QueryXml += "</Root>";
            Div.Init(QueryXml);//加载数据
            // Div.ShowPonit("10414204, 3064349");//传入坐标点，在地图上标示。
            })
        function _OKOnClick(a) {
           //此方法是在地图上标识坐标，确定后调用的方法，参数a为该点的坐标。            }
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12

      4.地图中标记点点击后点了查看详细（如图下）

      map

      在自己的页面中重写function jumpTo(id){

      //此方法是处理后续想要触发的事件，若没有写，则点击查看详细后没有反应。

      其中id为在xml中配置该点坐标对应的ID的值。}

← 工具栏控件 →