Record once echarts map Baidu coordinate usage

For work reasons, we need to use the echarts China Map chart, and introduce ecchart. js as usual.

Then... Sadly, the map is not loaded. After tracking code, we found that the map interface reported an error. echart. js reported the map JS error and found that China. js was not referenced.

Because the echarts version referenced this time is 3.0, it is found that there will be an error in China. js 2.0 of the previous project integrated, and you decided to download it from the official website.

Then go to http://ecomfe.github.io/echarts-map-tool/download the map JS, and see what you can fear:

I don't even provide download of Baidu map JS ..... Instantly felt a pain point

The day will continue, the code will be delivered, it will be painful, and the mood will be stable. If you think of it, you can try to find the source code or sample program.

With an uneasy mood, I opened githubhttps: // github.com/apache/incubator-echartsto find the salvation of github.

 

I can't help but laugh at it... Because I met you.

Download Now, and reference China. js to be integrated into the project. Very well, the map of China is shown below,

Then we will develop the provincial map drilling function... No, old problems... JS without Province

Fortunately, I have the province folder. After opening it, the whole person is happy. I am slowly introducing the province js to the page.

A Ctrl + F5 refresh. Well, my country is amazing. He can drill through ....

Now, the map has been loaded.

Next is the coordinate of the scatter plot... According to the echarts document, the geographic map coordinate system of a scatter chart requires Baidu's longitude and latitude.

Baidu map Baidu to Baidu map's Baidu map pick-up system http://api.map.baidu.com/lbsapi/getpoint/index.html, no language problems ~~~~

Enter the location name, Baidu. It's good to get the longitude and latitude coordinates. However, there is no batch operation .... But I have hundreds of low points... How can I be good?

No way. You can only use Baidu map API guidance... Open http://lbsyun.baidu.com/index.php? Title = % E9 % a6 % 96% E9 % a1 % B5

After some searches, find the location search service and see...

 

The registration process is followed .. Get the service key smoothly.

The next step is to call the interface. For a simple implementation of Python, refer to Baidu API development documentation and paste a python program for simple round-robin API as a record.

#-*-Coding: UTF-8-*-import urllibimport urllib2import hashlibimport jsonimport sysimport codecsadressfile = 'plazaname.txt 'coordsfile = 'coords.txt' def getaddresscoord (address ): coord = [] Ak = 'myak' Sk = 'mysk' url = 'HTTP: // api.map.baidu.com '# Take GET request as an example http://api.map.baidu.com/geocoder/v2? Address = Baidu tower & Output = JSON & aK = yourak querystr = '/geocoder/v2 /? Address = '+ address +' & Output = JSON & aK = '+ AK # transcode querystr. The reserved characters in safe are not converted to encodedstr = urllib. quote (querystr, safe = "/: = &? # +! $,; '@ () * [] ") # Add yoursk rawstr = encodedstr + SK # The Sn calculated by MD5 7de5a22212ffaa9e326444c75a58f9a0 # The final legal request URL is the http://api.map.baidu.com/geocoder/v2? Address = Baidu tower & Output = JSON & aK = yourak & Sn = 7de5a22212ffaa9e326444c75a58f9a0 Sn = hashlib. MD5 (urllib. quote_plus (rawstr )). hexdigest () url = urllib. quote (URL + querystr + "& Sn =" + SN, safe = "/: = &? # +! $,; '@ () * [] ") Response = urllib2.urlopen (URL) html = response. read () decoded = JSON. loads (HTML) print decoded if decoded ["status"]! = 302: coord. append (decoded ["result"] ["location"] ["LNG"]) coord. append (decoded ["result"] ["location"] ["Lat"]) return coord def getaddresslist (): file = codecs. open (adressfile, 'R') lines = [line. strip () for line in file] file. close () return linesdef getadresscoords (): dict_t = {} content = getaddresslist () for address in content: Key = STR (address ). decode ("UTF-8") dict_t [Key] = getaddresscoord (Address) with codecs. open (coordsfile, 'w') as F: f. write (JSON. dumps (dict_t, ensure_ascii = false) getadresscoords ()

 

Then we got the longitude and latitude data of each location and introduced it to JS. The map was a little bit ....

Ah... What a meaningful day ~~~~

Record once echarts map Baidu coordinate usage