[百度地图] 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‘, width: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: 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 下即是 脚本源码;

时间: 2024-10-10 03:15:49

[百度地图] MultiZMap 修改使用;的相关文章

百度地图-修改marker图标(icon)

学习了:https://blog.csdn.net/clh604/article/details/9412291/ 源码膜拜: var map = new BMap.Map("map"); // 创建地图实例 var point = new BMap.Point(116.404, 39.915); // 创建点坐标 map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别 map.addControl(new BMap.Navigation

[百度地图] 用于类似 DWZ UI 框架的 百度地图 功能封装类 [MultiZMap.js] 实例源码

MultiZMap 功能说明 MultiZMap.js 本类方法功能大多使用 prototype 原型 实现,它是 ZMap 的多加载版本,主要用于类似 DWZ 这个 多标签的 UI 的框架: 包含的功能有:轨迹回放,圈画区域可编辑,判断几个坐标是否在一个圆圈内,生活服务查询,从经纬度获取地址信息,地图工具包括测距,获取面积,以积打印地图,地图全屏,实时路况,坐标是否在polygon区域内,打车方案,经过中间途经点,添加地图控件: 界面查看 : http://www.cnblogs.com/ed

百度地图:普通覆盖物,以及多边形覆盖物,及他们的描述信息的添加,修改,删除,查看功能,还有多边形根据名称查询功能;

版权所有,未经本人允许,禁止转载! 这个界面功能是,普通覆盖物,以及多边形覆盖物,及他们的描述信息的添加,修改,删除,查看功能,还有多边形根据名称查询功能: 由于这个界面的数据是存在数据库,还有后台代码,所以这个页面无法直接使用: <%@ page contentType="text/html;charset=UTF-8"%> <%@ include file="/WEB-INF/views/include/taglib.jsp"%> <

【百度地图API1.1】修改文本标注的样式

原文:[百度地图API1.1]修改文本标注的样式 百度地图API1.0中文本标注的样式写法为: label.getDom().style.borderColor = "#808080"; label.getDom().style.color = "#333"; label.getDom().style.cursor = "pointer"; 2010年12月,百度地图API升级至1.1版本,文本标注的样式写法需要修改为:(否则将会导致鼠标点击失灵

百度地图标注图标太小

1.1.1  现象 百度地图中,定位点的标注示意图标太小: 实际期望的图标是这样的: 1.1.2  原因 检查了很久,以为是打开地图时的设置问题,后来慢慢查找地图上的元素定位,终于发现原来这个图标大小是被CSS控制的,在地图元素的内部可以找到如下代码: 这个img元素就是用来显示定位图标的,可以修改这个元素的CSS属性来改变大小. 1.1.3  解决 如果要使用默认大小,则需要配置如下CSS: img {     max-width: inherit; } 原来图标变小,是因为其它CSS配置导致

百度地图API

本文我将从如何使用地图API(本文以百度为例,谷歌类似)开始,往后的扩展行的内容详见后续文章.1.打开链接http://developer.baidu.com/map/jshome.htm  这里有很多DEMO,或者你直接百度搜索“百度地图API”,第一个就是.进入后有很多方向供你选择,由于现在开源的地图API都是JS脚本写的,所以我上面的链接就只针对JAVASCRIPT进行介绍.  即使是编程菜鸟(像我这种),也知道当你在任何一个开发环境下写代码时,都需要加入头文件,例如,你要在C++里使用c

百度地图离线化(API v=1.3)

毕设(北斗导航项目)进行了一段时间,近日在实验室给老师汇报进展时,由于网络不畅,加载百度在线地图及其各种操作时,时间过长,于是想将百度地图离线化.查阅网上很多资料,有的是广告(卖GIS应用的),有的版本太久......最后参考网上两位前辈的博客内容,加以实践,实现了地图完全离线且能进行基本操作.趁周末整理了实践过程并记录下来,希望能帮到有需要的朋友. 注:感谢两位前辈,其原文为:开源中国:Web版百度地图加载离线瓦片 :csdn:使用百度地图JS API构建离线地图应用(完整教程) 原文附带De

获取百度地图POI数据二(准备搜索关键词)

上篇讲到  想要获取尽可能多的POI数据 需要准备尽可能多的搜索关键字   那么这些关键字如何得来呢?   本人使用的方法是通过一些网站来获取这些关键词   http://poi.mapbar.com/这个网站有全国各地的POI数据  对各个城市的POI数据都有归类  我便是从这个网站上面获取了上海市的各个类别的关键词  比如上海市所有的门牌号码  公路名称  地铁名称等等  下面介绍如何获取这些信息 和获取百度POI数据所用的方法一样,都是通过分析这个网站的url然后替换其中的参数获取不同的数

Ionic2使用百度地图API(JS)出现白屏解决方案

最近自学ionic2,写了一个内嵌百度地图JS的demo,实际跑起来之后出现了大家常见的白屏问题.. 最初的实现是这样的: 首先主页内嵌了一个百度地图插件 <div id="Bmap" style="width: 100%;height: 100%"> 之后menu中一个引导的子页面也内嵌了一个百度地图 <div id="Bmap" style="width: 100%;height: 100%"> 然