Come on wuhan!!

I have made a map of the distribution of confirmed cases in many cities, and found that Guangzhou does not have one, so I made one, hoping to give you a reference

The code in github.com/chenguojun/… See the effect

Here is a screenshot

The data source

Location information is mostly posted on the official website of the municipal Health Commission. You can find the relevant epidemic notification on Baidu, and the distribution notice of Guangzhou is on the official website of guangzhou Municipal Health Commission

The data processing

Because the data only address, there is no detailed data, so the data to input

For data storage, I use the data cloud of Tencent Map, which can save bandwidth and search

You can choose other maps on the map, such as Baidu Map and Autonavi Map, whose open platform has required interfaces

Or choose to save in the database is also possible, depending on personal choice

The data only has text, but the longitude and latitude are needed to display on the map. In order to facilitate processing, I used the data cloud of Tencent Map to create a data interface, which can save the location and query and call as the database

You only need to submit the address (pay attention to stitching city name and district name, improve the accuracy of conversion) to automatically convert to coordinates and create new data, data processing back-end code: Github

If the data is stored in your own database, you can use the address resolution interface to convert the address into map coordinates and store it in your own database

You can see this effect on the console after all the data has been submitted

The front end

After data processing is displayed in the front end of the data, here is still using Tencent’s map

You can also choose Autonavi map or Baidu map, but pay attention to the different map using the coordinate format is not the same, if it is in Tencent map to obtain coordinates in Baidu map used on the need to coordinate conversion

After the web page loading map is completed, the back-end interface is called to obtain the data, and the distance is calculated and displayed on the web page

This part is not difficult, and I do it relatively simple, so I spend most of my time on data processing

Also use markers on the map to mark locations, which is more intuitive

The back-end

At the back end, I use PHP environment, and need to call the interface to obtain the data saved during data preparation. I use the area search interface of data cloud, which can search the data just saved by region and county

PHP search code for data


       
$lng = $_GET['lng'];  // The parameter is passed in the user's current coordinates
$lat = $_GET['lat'];
// This is because the current position needs to be displayed on the map, but the GPS obtains GPS coordinates, and the GPS coordinates need to be converted to the coordinate format used by Tencent map
if($_GET['action']) {echo curl_get("Https://apis.map.qq.com/ws/coord/v1/translate?locations=$lat, $lng&type = 1 & key = map key");
	die(a); }// Area is the name of a district or county
$area = $_GET['area'];
echo curl_get("Https://apis.map.qq.com/place_cloud/search/region?table_id= data to the new table id&key key&region = = map of guangzhou, $area&filter = x.a rea = $area & orderby=distance($lat,$lng)");
Copy the code

Data submission code


       
	//area indicates a county, and list indicates a list within a county
	$data = [
		["area"= >"Urban extension"."list"= > ["Second Fuiliyuan Street, Xintang Town"."Position two"]]
		["area"= >"Baiyun District"."list"= > ["Wong Shek Street, Baiyun Shang Cheng"."Yellowstone Garden"]]];// Convert to the format of the data required by the data cloud
	$newDataList = [];
	foreach ($data as $area){
		foreach ($area['list'] as $location){
			$newDataList[] = ["title"=>trim($location),"address"= >"Guangzhou".$area["area"].trim($location),"x"= > ["area"=>$area["area"]]];
		}
	}
	$result = curl_post("https://apis.map.qq.com/place_cloud/data/create",json_encode(["key"= >"Map key"."table_id"= >"Id of new table when data is prepared"."data"=>$newDataList]));

	echo($result);
Copy the code

If you are using a database, you can save the data with a district and county field for search

In fact, the entire web page is basically no technical content, but the data processing to be a little patient, we hope to share if there is a more convenient method