Online Address: 58 The same city brand apartment search House
GitHub Address: Https://github.com/liguobao/58HouseSearch
The column (likes to use): Api+python to solve the rental problem (. NET version)
After one weeks of patching, as well as the code of small partner offerings, the entire project is basically in a stable state of operation.
Also added a new feature:
- IP location: Call the Gold map IP location function implementation
- Mobile Map Center Positioning: Call the German map mobile map positioning implementation
- Locate city name turn 58 city name to get accurate 58 city domain name: Fetch 58 City of the same city classified information
- Optimize data sources, remove AD data: Small partner dedication Code
Today, let's briefly explain some of the high-de map API interfaces used.
# # # # # # # # # #高德地图JavaScript The API body is the map object, and basically all of the operations are done through the map object.
The Map object instantiation is done through the AMAP class. such as the following code:
1 2 3 4 5 6
|
New Amap.map ("container", { True True Center: [31.1345],//latitude and longitude, here for Shanghai 11 });
|
IP location
Call Map.citysearch () to get the city where the current IP is located, directly displaying the map as the current city. The code is as follows:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21st 22
|
functionShowcityinfo (MAP) { Instantiate a city query class var Citysearch =New Amap.citysearch (); Get the User IP automatically, return to the current city Citysearch.getlocalcity (function (Status, result) { if (status = = =' Complete ' && result.info = = =' OK ') { If (Result && result.city && result.bounds) { var cityinfo = result.city;Get XX City var citybounds = result.bounds;An instance to set the location of the map display CityName = cityinfo.substring (0, Cityinfo.length-1); //Remove the word City Convertcitycnnametoshortcut (); //city name converted to 58 city of the same city name letter, such as Shanghai->sh, Suzhou->su, //There will be implementation code below
document.getElementById (' iplocation '). InnerHTML = ' Your current city: ' + cityname; //Map showing current city Map.setbounds (Citybounds); } } Else { document.getElementById (' iplocation '). InnerHTML = Result.info; } }); }
|
Mobile Map Automatic Center positioning
One of the previous editions was to have the user enter the city name and then navigate directly to the input city.
This feature card in the set map display location, if the use of the high-D map provided by the search control, there is a result after the results of the search results may be more than a problem. And I'm just going to take the city that the user wants to locate, and I don't feel the need to do it too complicated.
Last night when I saw the high-key map API, I found that there was a sample of the location of the map center in a mobile map, and it was immediately bright. This function is better than I want ... Decisively on.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
|
functionMapmovetolocationcity () { Map.on (' MoveEnd ', getcity); functionGetcity () { Map.getcity (function (Data) { if (data[ ' province '] && typeof data[ ' province '] = = = var cityinfo = (data[ ' province ']); CityName = cityinfo.substring (0, Cityinfo.length- 1); Convertcitycnnametoshortcut (); document.getelementbyid ( Span class= "string" > ' iplocation '). InnerHTML = Map Center City: ' + cityname; } /span> |
The whole code means to bind the map to move time, after the move, call getcity method to get the city information of the current map center.
It is important to note that the city name may be inside or in the province.
The reason is simple: the ordinary city rank is the city, our country also exists one and the province one rank city: the municipality. So the city name of the municipality is inside the province.
City name matches 58 domain name in the same city area
This is a new feature introduced by a bug in the last version (two or three days ago).
The last version is to let the user enter the city name, and then extract the city name of the Chinese pinyin initials as 58 of the same city domain name. such as Shanghai =sh, Guangzhou =gz, Beijing =bj, Chengdu =cd.
This feature uses a JS library written by someone on the web, which is implemented through the Chinese character matching. There is nothing wrong with the converted data, but the Chinese characters are really mysterious.
Guangzhou =gz, Ganzhou =gz;
Suining =sn; Suining =sn;
Huizhou =hz, Hangzhou =hz.
In this way, the above practice will not be able to play.
Think about how to solve this problem, brainwave. Anyway is crawling 58 data, this city name and city domain name data 58 The same city certainly has, and then found this.
58 City of the same city category navigation
Obviously, all the city names and city names I want are inside.
In the evening, clothes and clothes to say, the clothing early in the morning to the processing of JSON data to me.
Then came the following section of code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
|
Loading the JSON file $.getjson ("Domainjs/city.json",function (Data { Allcityinfo = data; });
function convertcitycnnametoshortcut ( { var filterarray = $.grep ( Allcityinfo, function (obj) { return obj.cityname = = CityName; //find the JSON object corresponding to the current city name //get the locale domain name of the JSON object Citynamecnpy = filterarray instanceof array? Filterarray[0].shortcut:filterarray! = null? Filterarray.shortcut: /span>
|
Auto-complete function of Gold map
1 2 3
|
<class="Control-input" > <id=type=style="width:60%" > </div>
|
1 2 3 4 5
|
New Amap.autocomplete ({ "Work-location" });
"Select", worklocationselected);
|
Look at the method before you know, in fact, this is the ID of work-location input initialized to the map plug-in, and then to Amap added a listener event.
When a certain data is selected, the Worklocationselected function is triggered. The effect is as follows:
Here locationselected is positioned to the selected location, the code is as follows:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21st 22 23
|
function worklocationselected (e) { workaddress = E.poi.name; Loadworklocation (); }
function Loadworklocation () { Delworklocation (); var geocoder = newAMap.Geocoder ({ City:cityname, Radius1000 }); Geocoder.getlocation (workaddress, function (status, result) { if (status = = "complete" && result.info = = = ' ok ') { var geocode = result.geocodes[0]; X = Geocode.location.getLng (); Y = Geocode.location.getLat (); Loadworkmarker (x, y); Loadworkrange (x, y, 60, Map.setzoomandcenter (12, [x, y]); } /span> |
As for the navigation function code I did not move, did not study to caught dead ...
Last one.
# # #北京
# # #成都
# # #苏州
# # #深圳
German api+. NET solve the problem of renting (JS related)