leaflet+jpa+webmagic在线爬取租房信息（二）

前端

前端结构

leaflet加载天地图

• 引用leaflet插件

map.js

L.TileLayer.ChinaProvider = L.TileLayer.extend({

    initialize: function(type, options) { // (type, Object)
        var providers = L.TileLayer.ChinaProvider.providers;

        var parts = type.split('.');

        var providerName = parts[0];
        var mapName = parts[1];
        var mapType = parts[2];

        var url = providers[providerName][mapName][mapType];
        options.subdomains = providers[providerName].Subdomains;
        options.key = options.key || providers[providerName].key;
        L.TileLayer.prototype.initialize.call(this, url, options);
    }
});

L.TileLayer.ChinaProvider.providers = {
    TianDiTu: {
        Normal: {
            Map: "http://t{s}.tianditu.com/DataServer?T=vec_w&X={x}&Y={y}&L={z}&tk={key}",
            Annotion: "http://t{s}.tianditu.com/DataServer?T=cva_w&X={x}&Y={y}&L={z}&tk={key}"
        },
        Satellite: {
            Map: "http://t{s}.tianditu.com/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk={key}",
            Annotion: "http://t{s}.tianditu.com/DataServer?T=cia_w&X={x}&Y={y}&L={z}&tk={key}"
        },
        Terrain: {
            Map: "http://t{s}.tianditu.com/DataServer?T=ter_w&X={x}&Y={y}&L={z}&tk={key}",
            Annotion: "http://t{s}.tianditu.com/DataServer?T=cta_w&X={x}&Y={y}&L={z}&tk={key}"
        },
        Subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
        key: "****************"//这里key 要到天地图官网自己申请
    },

    GaoDe: {
        Normal: {
            Map: 'http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'
        },
        Satellite: {
            Map: 'http://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
            Annotion: 'http://webst0{s}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}'
        },
        Subdomains: ["1", "2", "3", "4"]
    },

    Google: {
        Normal: {
            Map: "http://www.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}"
        },
        Satellite: {
            Map: "http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}"
        },
        Subdomains: []
    },

    Geoq: {
        Normal: {
            Map: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}",
            PurplishBlue: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
            Gray: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetGray/MapServer/tile/{z}/{y}/{x}",
            Warm: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetWarm/MapServer/tile/{z}/{y}/{x}",
        },
        Theme: {
            Hydro: "http://thematic.geoq.cn/arcgis/rest/services/ThematicMaps/WorldHydroMap/MapServer/tile/{z}/{y}/{x}"
        },
        Subdomains: []
    },

    OSM: {
        Normal: {
            Map: "http://{s}.tile.osm.org/{z}/{x}/{y}.png",
        },
        Subdomains: ['a', 'b', 'c']
    }

};

L.tileLayer.chinaProvider = function(type, options) {
    return new L.TileLayer.ChinaProvider(type, options);
};

index.html

var normalm = L.tileLayer.chinaProvider('Geoq.Normal.Gray',{maxZoom:18,minZoom:5}),
		    normala = L.tileLayer.chinaProvider('Geoq.Normal.Gray',{maxZoom:18,minZoom:5}),
		    imgm = L.tileLayer.chinaProvider('Google.Satellite.Map',{maxZoom:18,minZoom:5}),
		    imga = L.tileLayer.chinaProvider('Google.Satellite.Map',{maxZoom:18,minZoom:5});
		//
		var normal = L.layerGroup([normalm,normala]),
		    image = L.layerGroup([imgm,imga]);
		
		var baseLayers = {
		    "地图":normal,
		    "影像":image,
		}
		
		var overlayLayers = {                    //	可以叠加其他的图层
		     
		}
		
		var map = L.map("map",{
		    center:[28.184611513671868, 112.96844223632812],
		    zoom:11,
		    layers:[normal],
		    zoomControl:false
		});
		
		L.control.layers(baseLayers,overlayLayers).addTo(map);
		L.control.zoom({zoomInTitle:'放大', zoomOutTitle:'缩小'}).addTo(map);
		L.control.scale().addTo(map);  

这样就能加载地图

因为不能爬取房子的经纬度 ，所以选择读取房子的地址 利用高德api的地理编码 将地址转换为经纬度.将房价根据价格 分配不同颜色的marker 用来进行区分。

	//读取数据库的内容
		function read_gb(){
			$.ajax({
				tyoe:"get",
				url:"http://127.0.0.1:8080/house/searchall",//
				success:function(result){
					if(result){
						var data=eval(result);
						for(var i=0;i<data.length;i++){
							var address= data[i].houseLatlng;
							var price= data[i].housePrice;
							tran_latlng(address,data[i])
						}
					}
				}
				
			})
		}
		//正向地理编码 根据传进来的地址名 转换为经纬度
		var markers=[];
		function tran_latlng(address,options){
			var myGroup=L.layerGroup(markers);
			map.addLayer(myGroup);
			myGroup.clearLayers();	//批量删除marker
			AMap.plugin('AMap.Geocoder', function() {
			  var geocoder = new AMap.Geocoder({
			    // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
			    city: '430100'
			  })
			  var price =options.housePrice;
			  
			  if(price<1001){
				  var CustomerIcon = L.Icon.extend({
					  options: {
					        iconUrl: './img/marker/red.png',
		//			         shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
					        iconSize:     [32, 40],
					        shadowSize:   [20, 24],
					        iconAnchor:   [17, 12],
					        shadowAnchor: [4, 62],
						    }
					  });
			  }else if(1000<price&&price<1400){
			  		var CustomerIcon = L.Icon.extend({
					  options: {
					        iconUrl: './img/marker/gre.png',
		//			         shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
					        iconSize:     [32, 40],
					        shadowSize:   [50, 64],
					       iconAnchor:   [17, 12],
					        shadowAnchor: [4, 62],
						    }
					  });
			  }else {
			  		var CustomerIcon = L.Icon.extend({
					  options: {
					        iconUrl: './img/marker/blue.png',
		//			         shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
					        iconSize:     [32, 40],
					        shadowSize:   [50, 64],
					       	iconAnchor:   [17, 12],
					        shadowAnchor: [4, 62],
						    }
					  });
			  }
			  geocoder.getLocation(address, function(status, result) {
			    if (status === 'complete' && result.info === 'OK') {
			      // result中对应详细地理坐标信息
//			      add_marker(result.geocodes[0].location.lng,result.geocodes[0].location.lat);
			      var marker = L.marker([result.geocodes[0].location.lat,result.geocodes[0].location.lng],{icon:new CustomerIcon()}).addTo(map);
			     	 var html='';
			     	 html+='<div class="" style="width:200px;height:80px;">';
							html+='<div>房源信息:'+options.houseName+'</div>';
							html+='<div>租金:'+options.housePrice+'</div>';
							html+='<div>房型:'+options.houseLayout+'</div>';
							html+='<div>大小:'+options.houseSize+'</div>';
					html+='</div>';	
			      marker.bindPopup(html)
			      markers.push(marker);
			      marker.on('click', function(e) {
					   marker.openPopup();
					})
			    }
			  })
			})		
		}