使用iis服务建设自己的网站实现简单的地图服务_巧了我也是_新浪博客

工具：iis服务管理器，本地浏览器，本机IP，javascript编写的index.asp文本

（1）打开iis服务管理器，新建自己的网站。

windows版本的系统自带iis服务，如果你找不到的话，那就需要在“打开或关闭windows应用程序”里将iis勾选开启。然后到管理工具里，打开iis服务管理器，可以看到电脑自带的默认网站，一般这个都除了一个你的电脑名什么都是系统默认的。

我们现在新建自己的网站，新建iis很简单。新建完成后可以点击查看网站，最好将访问地址改成你电脑的ip地址，这样整个区域网中的电脑都可以访问你的网站了。

（2）最主要的是如何设置你网站的网页，那就涉及到javascript网页编程了，我设计的地图访问代码如下：

   

   

   

   

   

   

   

        #map{ width:100%;height:1500px;} 

        #menu{float:left;position:absolute;bottom:10px;z-index:2000;}

        .tooltip-inner{white-space:nowrap;}   

   

   

        function init() {

            var map = new ol.Map({

                target: 'map',

                layers: [

        new ol.layer.Tile({

            source: new ol.source.OSM()

        })

        ],

                view: new ol.View({

                    center: [12950000, 4860000],

                    zoom: 8,

                    minZoom: 6,

                    maxZoom: 12,

                    rotation:Math.PI/6

                })

            });

            var view = map.getView();

            var zoom = view.getZoom();

            var center = view.getCenter();

            var rotation = view.getRotation();

            document.getElementByIdx_x('zoom-out').onclick = function() {

                var view = map.getView();

                var zoom = view.getZoom();

                view.setZoom(zoom + 1);

            };

            document.getElementByIdx_x('zoom-in').onclick = function() {

                var view = map.getView();

                var zoom = view.getZoom();

                view.setZoom(zoom - 1);

            };

            document.getElementByIdx_x('panto').onclick = function() {

                var view = map.getView();

                var wh = ol.proj.fromLonLat([116.31667, 39.91667]);

                view.setCenter(wh);

            };

            document.getElementByIdx_x('restore').onclick = function() {

            view.setCenter(center);

            view.setRotation(rotation);

            view.setZoom(zoom);

            };

            $('.ol-zoom-in,.ol-zoom-out').tooltip({

                placement: 'right'

            });

            $('.ol-rotate-reset,.ol-attribution button[title]').tooltip({

                placement: 'left'

            });

            

        }

   

     欢迎来到孙利国的个人地图服务

     

       单击缩小

       单击放大

       平移到【北京】

       复位

     

上面的代码可以直接拷贝到text文本中，然后修改成index.asp文件，默认访问该页面。

（3）如果直接打开上的网页是没有地图的，地图是调用别人的，还需要其他文件。下面附一张我做的地图网站显示。

为什么地图是斜的，因为原本地图是可以转动的，手机浏览器访问就没有这个问题。

注：如果你不知道将来毕业了要做什么，不妨拿这个先练练手，简单还有成就感，当你做成这个你就知道地理信息是怎么做开发的了。