zoukankan      html  css  js  c++  java
  • [百度地图] MultiZMap 修改使用;

    MultiZMap修改说明

    MultiZMap 是基于百度地图API 封装的一些常用功能类库;主要以prototype方式实现;并且实现了一些辅助的功能,比如添加 Marker 功能,事件管理等;

    以前版本: http://www.cnblogs.com/editor/category/591379.html

    本次新增 marker 添加功能,支持链式操作,以及修改打印功能 及 测距功能;

    功能说明

    1. 创建地图

    var multiMap = new MultiZMap({
                    container: 'container',
                    mapId: 'mapId'
                });

    2. Marker 操作

    var pot = new multiMap.getPoint('118.523826,24.929245');
    var mke = new multiMap.Marker(pot)
                            .setLabel('标题', {})
                                .setIcon({img:'xxxx.gif', 22, height: 22});
    
    multiMap.panTo(pot);

    该mke 可以返回
    本身 get() 方法
    Marker label 名: getLabel();
    Icon 方法:getIcon(); 返回 图片,width, height的 json 数据;

    3. 打印功能;

    print : function(opts) {
                /*
                var pot = self.mapObj.getCenter();
                var zoom = self.mapObj.getZoom();
                
                opts.width = opts.width || 700;
                opts.height = opts.height || 600;
                
                window.open(opts.url + '?lng='+pot.lng+'&lat='+pot.lat+'&zoom='+zoom, '打印地图', "height="+opts.height+", width="+opts.width+", top=10, left=10,toolbar=yes, menubar=no, scrollbars=yes, resizable=yes, location=no, status=no");
                */
                
                var width = $('#'+ self.container).width();
                var height = $('#'+ self.container).height();
                var prtFull = new self.XfullMap({
                     width,
                    height: height,
                    fullfunc: function() {
                        
                    }
                });
                
                var mIdx = MultiZMap.dom.getMaxzIndex();
                prtFull.toFull(self.mapObj.getCenter(), mIdx);
                
                window.print();
                
                setTimeout(function() {
                    prtFull.toOrigi();
                }, 1000);
    }

    该功能在 tools 下:

    使用方法;

    multiMap.tools.print(); 

    打印时先全屏,打印后会自动回复原界面状态;

    源码下载 

    源码下载:http://files.cnblogs.com/editor/MultiZMap3.rar

    本项目源码采用 SpringMvc+Maven搭建,src/main/webapps 下即是 脚本源码;

  • 相关阅读:
    这些天对iframe的初步运用
    后台制作与商品装入
    主页的设计
    DevOps
    Nginx
    DevOps
    DevOps
    Cluster
    Cluster
    Cluster
  • 原文地址:https://www.cnblogs.com/editor/p/4235543.html
Copyright © 2011-2022 走看看