Part3 使用JavaScript显示地图

来源：互联网发布：p2p软件编辑：程序博客网时间：2024/05/22 15:49

新建空web应用程序项目

新建样式文件夹和库文件夹，分别用来管理CSS样式和库（可直接拷贝本示例的样式和库）
在MapGIS 10的安装目录下拷贝资源到相应的文件夹，可以直接去拷贝本示例的。

新建Html页面，在head中添加引用：
<head>
<title>地图加载显示</title>
<script src="Lib/jquery-1.5.1.min.js"type="text/javascript"></script>
   <link href="CSS/style.css" rel="stylesheet"type="text/css" />
   <link href="CSS/zondy-style-thin.css"rel="stylesheet" type="text/css" />
   <script src="Lib/OpenLayers.js"type="text/javascript"></script>
   <script src="Lib/zdclient.js" type="text/javascript"></script>
</head>

在body标签中新建div标签，用于显示地图
<divid="myMap"></div>
新建CSS文件，在Html的head中连接
#myMap{   width:960px;   height:800px;   border:2px solid red;margin: 0 auto!important;}
这个地方important是提高居中的权限，在openLayer的代码中，强制将试图靠左变了，所以想要居中，必须加强CSS样式的权限。

添加body的onload事件“init()”
新建Script文件，在Html的head中连接
/// <reference path="jquery-1.5.1.min.js"/>/// <referencepath="OpenLayers.js" />/// <referencepath="zdclient.js" />var map, layer;function init() {   map = new OpenLayers.Map('myMap', { numZoomLevels: 16, maxExtent: newOpenLayers.Bounds(-1178.56250932989, -783.359712724798, 1178.56250933002,783.359712724798), maxResolution: 7.24, controls: [newOpenLayers.Control.Navigation(), new OpenLayers.Control.PanZoomBar()] });   layer = new Zondy.Map.Doc("MapGIS IGS MapDocLayer", "世界地图（等差分）",{ ip: "192.168.23.15", port: "6163" });   map.addLayers([layer]);   map.setCenter(new OpenLayers.LonLat(0, 0), 2);}
完成的源码如下：
Html内容
xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>地图显示</title>    <script src="lib/jquery-1.5.1.min.js" type="text/javascript"></script>    <script src="lib/OpenLayers.js" type="text/javascript"></script>    <script src="lib/zdclient.js" type="text/javascript"></script>    <link href="CSS/style.css" rel="stylesheet" type="text/css" />         <link rel="stylesheet" type="text/css" href="CSS/StyleSheet1.css" />    <script src="lib/MyScript.js" type="text/javascript"></script> </head><body onload="init()"><div id="top"></div><div id="myMap"></div><div id="footer"></div></body></html>
CSS（StyleSheet1.css）源码
#myMap {    width:960px;    height:800px;    border:2px solid red;    margin: 0 auto !important;        }    #top    {        margin:0 auto;        width:960px;        height:200px;        background-color:Blue;               }    #footer    {         margin:0 auto;        width:960px;        height:200px;        background-color:Green;    }
Script（MyScript.js）源码
/// <reference path="jquery-1.5.1.min.js" />/// <reference path="OpenLayers.js" />/// <reference path="zdclient.js" />var map, layer;function init() {//初始化地图容器，确定地图文档范围，显示级数分辨力等    map = new OpenLayers.Map('myMap', { numZoomLevels: 16, maxExtent: new OpenLayers.Bounds(-1178.56250932989, -783.359712724798, 1178.56250933002, 783.359712724798), maxResolution: 7.24, controls: [new OpenLayers.Control.Navigation(), new OpenLayers.Control.PanZoomBar()] });  //初始化图层，确定数据名称，地址等    layer = new Zondy.Map.Doc("MapGIS IGS MapDocLayer", "世界地图（等差分）", { ip: "192.168.23.15", port: "6163" });   //给容器添加图层    map.addLayers([layer]);    设置初始化显示级别    map.setCenter(new OpenLayers.LonLat(0, 0), 2);}
运行效果（浏览器缩放为75%）
http://

源码地址：下载源码

0 0