将手绘地图或自制地图显示在网页上（利用百度API）

利用百度APi实现将手绘地图展示在网页上，达到类似这样的效果：

切图参考了：cnblog jz1108 并用了其工具，表示非常感谢！

百度地图API目前默认支持两种地图类型（map type）：普通图和三维图，它们分别通过常量BMAP_NORMAL_MAP和BMAP_PERSPECTIVE_MAP来表示，在1.2版本中这两个常量实际上是MapType对象的实例。当然开发者也可以自己实例化一个MapType从而实现一个自定义的地图。

切图工具的使用

我们先从切图工具的使用开始，接着再分析该工具产生的代码来详细了解自定义地图的方法。具体地址为

http://www.t00y.com/file/38314676

注意，该工具是基于.NET平台开发的，所以要求有.NET Framework 4 以上的版本。

启动这个exe后会出现这个界面：

首先我们要做的就是选择一张图片作为地图的底图：

点击下一步后需要设置输出的目录，这里我们直接选择桌面：

继续下一步，这里要设置输出类型，我们使用默认值，即图块和相关代码都由工具生成：

坐标设置我们使用默认值，即图片的中心点所在的位置。由于我们制作的是独立的地图类型，所以中心点设置为0, 0即可。

级别范围设置：我们使用自定义，将范围设置为5到10级，原图放置在第10级，这样5到9级工具就会自动缩小图片。建议原图所在级别与最大级别一致，否则高于原图所在级别的时候图片会发虚（因为工具会将图片进行放大处理）。

设置地图类型的名称：

一切就绪，最后可以确认所有的信息是否正确。然后就可以点击“开始切图”了。

完成了：

这时我们会发现桌面多了一个index.html和一个tiles文件夹。我们打开index.html会看到结果：地图成功的显示在了网页上面，整如上面的例子中一样

源代码解析

现在再来看看这个页面的代码部分：

<!DOCTYPE html>
<html>
<head>
<title>自定义地图类型</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
</head>
<body>
<div id="map" style="width:800px;height:540px"></div>
<script type="text/javascript">
var tileLayer = new BMap.TileLayer();
tileLayer.getTilesUrl = function(tileCoord, zoom) {var x = tileCoord.x;var y = tileCoord.y;return 'tiles/' + zoom + '/tile' + x + '_' + y + '.png';
}
var MyMap = new BMap.MapType('MyMap', tileLayer, {minZoom: 5, maxZoom: 10});
var map = new BMap.Map('map', {mapType: MyMap});
map.addControl(new BMap.NavigationControl());
map.centerAndZoom(new BMap.Point(0, 0), 10);
</script>
</body>
</html>

代码先创建了一个TileLayer实例，它代表一个图层，接着实现getTilesUrl方法提供图片的路径。getTilesUrl方法由API在铺图的时候进行调用，调用时会提供图块编号和级别信息，开发者要做的就是根据图块编号和级别信息返回正确图片地址（有关坐标和图块编号的内容可以阅读

http://blog.csdn.net/lanximu/article/details/16964967）。

下面代码创建一个MapType实例，第一个参数为地图类型的名字，第二个参数为地图类型所对应的图层，这里我们直接传递之前创建的TileLayer实例，后面是一些可选的配置参数，这里指定了最小级别和最大级别。

后面的代码就很简单了，创建map实例，并通过配置参数指定地图类型为MyMap。

还可以添加其他控制时间，包括弹出窗口之类的，如下面是写的比较好的百度API JQUERY 类扩展：

(function($,doc){

$.fn.baidu=function(settings){
var _id=$(this).attr("id");

if(_id==""){_id="MAP_"+(new Date().getTime());$(this).attr({id:_id});}

var _anchor=[BMAP_ANCHOR_TOP_LEFT,BMAP_ANCHOR_TOP_RIGHT,BMAP_ANCHOR_BOTTOM_LEFT,BMAP_ANCHOR_BOTTOM_RIGHT];

var _types=[BMAP_NAVIGATION_CONTROL_LARGE,BMAP_NAVIGATION_CONTROL_SMALL,BMAP_NAVIGATION_CONTROL_PAN,BMAP_NAVIGATION_CONTROL_ZOOM,];

var _mapTypes={mapTypes:[BMAP_NORMAL_MAP,BMAP_HYBRID_MAP],anchor:_anchor[1]};

var defaults={map:'baidu',zoom:5,xpoint:0,ypoint:0,marker:false,minZoom:1,maxZoom:19,scroll:true,nvgat:{show:false,anchor:0,type:0},maptype:false,overview:false,hand:false,func:null};
//118.07408 24.45124
settings=$.extend(defaults,settings);

$.handLayer=new BMap.TileLayer();

//JJ:2013/11/25/获取手绘地图图层
//$.handLayer.getTilesUrl=function(tileCoord,zoom){var x=tileCoord.x;var //y=tileCoord.y;return //HTTP_HOST+'map/tiles/'+zoom+'/tile'+x+'_'+y+'.png';};

$.handLayer.getTilesUrl=function(tileCoord,zoom){var x=tileCoord.x;var y=tileCoord.y;return 'tiles/'+zoom+'/tile'+x+'_'+y+'.png';};

var glyMap=new BMap.MapType('myMap',$.handLayer,{minZoom:settings.minZoom,maxZoom:settings.maxZoom});

var map=$.baiduMap=new BMap.Map(_id,{mapType:glyMap});

map.addEventListener("tilesloaded",function(){$("#"+_id).css({background:"#A6C2DE"});});

if(settings.scroll){map.enableScrollWheelZoom();}

if(settings.nvgat.show){map.addControl(new BMap.NavigationControl({anchor:_anchor[settings.nvgat.anchor],type:_types[settings.nvgat.type]}));}

if(settings.maptype){map.addControl(new BMap.MapTypeControl(_mapTypes));}

if(settings.overview){map.addControl(new BMap.OverviewMapControl({isOpen:true,anchor:_anchor[2]}));}

map.centerAndZoom(new BMap.Point(settings.xpoint,settings.ypoint),settings.zoom);

//JJ
//添加覆盖物

    var marker1 = new BMap.Marker(new BMap.Point(settings.xpoint,settings.ypoint));
    map.addOverlay(marker1);
//显示消息框
      var addr = "hello";
    //显示消息框
    var opts = {
        width: 150,     // 信息窗口宽度
        height: 50,     // 信息窗口高度
        title: "" // 信息窗口标题
    }
    var infoWindow = new BMap.InfoWindow(addr, opts); // 创建信息窗口对象

marker1.addEventListener("click", function (e) {
        map.openInfoWindow(infoWindow,new BMap.Point(settings.xpoint,settings.ypoint)); //开启信息窗口
    });


if(settings.marker){$.addPoint(settings.xpoint,settings.ypoint);}

if(settings.map=='hand'){$.showHand();}

if(settings.hand){
hand();
}
}})

(jQuery,document);
jQuery.extend({
baiduMap:null,mapType:0,mapLabel:null,handLayer:null,icons:{main:1,food:1,lodging:1,music:1,scene:1,service:1,shopping:1},

addPoint:function(xpoint,ypoint,label,img){
if(this.baiduMap===null)return false;
var marker=new BMap.Marker(new BMap.Point(xpoint,ypoint));this.baiduMap.addOverlay(marker);if(label){marker.setLabel(new BMap.Label(label,{offset:new BMap.Size(20,-10)}));}if(img){var src=this.icons[img.src]!=1?'m':img.src;var myIcon=new BMap.Icon("../images/"+src+".png",new BMap.Size(img.width,img.height));marker.setIcon(myIcon);
marker.setShadow(new BMap.Icon("../images/s.gif",new BMap.Size(img.width,img.height)));marker.setOffset(new BMap.Size(0,-(img.height/2)));}return marker;},

addLabel:function(settings){if(this.baiduMap===null)return false;if(this.mapLabel===null){this.mapLabel=this.mapOverlay();}var defaults={xpoint:118.07408,ypoint:24.45124,width:60,height:80,drag:false,data:null};settings=$.extend(defaults,settings);if(settings.data===null)return false;var point=new BMap.Point(settings.xpoint,settings.ypoint);var newLabel=new this.mapLabel(point,settings.width,settings.height,settings.data,settings.drag);this.baiduMap.addOverlay(newLabel);return newLabel.getDiv();},

mapOverlay:function(){
if(this.baiduMap===null)return false;
var mapOverlay=function(center,width,height,data,drag){this._center=center;this._width=width;this._height=height;this._data=data;this._drag=drag;};
mapOverlay.prototype=new BMap.Overlay();
mapOverlay.prototype.initialize=function(map){this._map=map;var div=document.createElement("div");div.className="mapLabel";div.style.width=this._width+"px";div.style.height=this._height+"px";if(this._data){div.innerHTML=this._data+"<div class='dir'></div>";}var _drag=this._drag;div.οnmοuseοver=function(){this.style.zIndex='9999999';$(this).find(".add").show();$(this).find("a").addClass("cur");$(this).find(".dir").addClass("dir-cur");this.style.backgroundColor="#8BA4DC";if(!_drag)$.baiduMap.disableDragging();};div.οnmοuseοut=function(){this.style.zIndex='';$(this).find(".add").hide();$(this).find("a").removeClass("cur");$(this).find(".dir").removeClass("dir-cur");this.style.backgroundColor="#FFFFFF";if(!_drag)$.baiduMap.enableDragging();};map.getPanes().markerPane.appendChild(div);this._div=div;return div;};
mapOverlay.prototype.draw=function(){var pos=this._map.pointToOverlayPixel(this._center);this._div.style.left=pos.x-(this._width+12)/2-9+"px";this._div.style.top=pos.y-this._height-28+"px";};
mapOverlay.prototype.show=function(){if(this._div){this._div.style.display="";}};
mapOverlay.prototype.hide=function(){if(this._div){this._div.style.display="none";}};
mapOverlay.prototype.getDiv=function(){return this._div;};return mapOverlay;},

setCenter:function(xpoint,ypoint){
if(this.baiduMap===null)return false;this.baiduMap.setCenter(new BMap.Point(xpoint,ypoint));},

clearOverlay:function(){if(this.baiduMap===null)return false;this.baiduMap.clearOverlays();},

showHand:function(func){if(this.handLayer!=null){this.baiduMap.addTileLayer(this.handLayer);this.mapType=1;if(typeof func!="undefined")typeof func=='function'?eval(func()):eval(func());}},

hideHand:function(func){if(this.handLayer!=null){this.baiduMap.removeTileLayer(this.handLayer);this.mapType=0;if(typeof func!="undefined")typeof func=='function'?eval(func()):eval(func());}},

getZoom:function(){if(this.baiduMap===null)return false;return this.baiduMap.getZoom();}

});

将手绘地图或自制地图显示在网页上（利用百度API）相关推荐

爬虫——python——百度地图经纬度查询——经纬度查看地点地名——利用百度API获取地名经纬度——爬取所有的中国地址...
import requests address = '40.8587960,86.
Android基于mAppWidget实现手绘地图（一）--简介
http://lemberg.github.io/mappwidget/user_guide.html 最近在看一些导游类应用,发现一些景区的导览图使用的完全是自定义地图,也就是手绘地图.这种小范围使 ...
如何制作手绘地图？如何将图片图层精确地对准在地图上？
最近大家常常在问,如何制作鼓浪屿手绘地图,如何将气象图层叠加在高德地图上啊? 其实地图上的研发量很小,几行代码就可以搞定. 关键是在图片绘制上,有较高的要求. 下面就用简单粗暴的方法来实现,如有不妥之 ...
自定义View进阶-手绘地图（二）
前一篇说到了使用自定义ViewGroup实现手绘地图,没看过的可以移步,因为本篇会用到上一篇的部分内容自定义View-手绘地图(一) 和前一篇一样,实现图片的操作经过同样的操作.onMeasure, ...
微信小程序--放入个性化手绘地图具体步骤（腾讯地图）
微信小程序–放入个性化手绘地图具体步骤(腾讯地图) 前言:小程序中想要实现个性化手绘地图需要通过H5嵌入的模式进行实现. 1.首先需要一个腾讯地图的账号(微信登录即可),然后选择个性化地图进入(htt ...
H5手绘地图（自定义栅格图层）踩坑
手绘地图简介手绘地图顾名思义就是手工绘制的地图,比普通的地图更有观赏性和生动性,通过把特定的地点绘制出来,兼具实用和纪念性,同时更加具有可看性.一般在旅游景点有很多这种纸质版手绘地图.比如这种: 前 ...
景区自定义手绘地图叠加
地图上嵌套手绘地图--实现效果: 这里用到了地图的图层简单一个完整Demo代码 <!DOCTYPE html> <html lang="en"><h ...
制作手绘地图并准确覆盖到地图的超简单流程
第一步,取得底图. 如果要制作比较准确匹配到地图特定区域的手绘地图,首先要取得这部分区域的地图作为绘图的底图.可以用bigemap地图下载器,下载这部分区域的地图保存为后缀为 tif 的文件,保存 ...
Android高德地图贴合图片完成手绘地图展示
上周刚接到一个需求,产品觉得高德的默认地图样式不好看,想要一个手绘地图贴合上去,看着美观很多,然而我内心确是抵触的,无法 ,产品讲了,只能先回答试试看看.接下拉就是一搏谷歌搜索. 1.使用web版本的 ...

将手绘地图或自制地图显示在网页上（利用百度API）

将手绘地图或自制地图显示在网页上（利用百度API）相关推荐

最新文章

热门文章