Exploration of Google map's Big Data Processing

Recently, I used Google map for development and got a preliminary understanding of Google map APIs. Marker is generally used for Google API development to mark locations. This article will study and discuss the marker that shows a large amount of data.

Question:

If you need to display a marker with a large amount of data on a map, you will find two problems.

1. performance problems: If you add more marker on the map, the slower the speed will be. The speed depends on the browser and computer configuration. Google Chrome is much faster than IE.

2. availability issues. The more marker there are on the map, the less suitable it will be. Of course, this depends on the intensity of marker. If these marker are scattered, the relationship is not very large. If it is very intensive, users will not be able to see things on the map. For example, there are 10 or 100 problems. When the number is 1000, the map is occupied by the marker.

10 markers are displayed. No problem

It shows 100, and it feels a bit crowded.

The display is 1000, and nothing is displayed on the map.

 

Solution:

Solution 1: Reduce the number of Displays

1. In our system, you can use a search box. For example, you can search for the locations of all Walmart supermarkets in Shenzhen on a map.

2. Add filter. In principle, reduce the displayed marker as above. For example, add a filtering mechanism to only mark cities with a population larger than million.

Solution 2: Cluster display

The first two methods solve the problem by reducing the number of marker display. Let's take a look at the same effect if the number of marker is not reduced. The solution is to use a cluster. According to certain rules, marker is divided into different groups. Different marker clusters are displayed based on different scaling levels of the map. When the map is scaled, more related marker is concentrated in this group, and the marker is displayed in place of this group. When it is zoomed in to a certain level, the marker itself is displayed. For example, the following 1000 marker entries are displayed:

When the Map Display level is reduced, continue with the related cluster:

However, when the Map Display level is enlarged, the cluster is scattered:

What rules should be used for the cluster? The following describes three cluster methods:

1. grid-based: divide a map into many grids. The marker cluster in the same grid is in one group according to the different scaling levels of the map.

2. Based on distance: it is easy to understand that the nearest marker is displayed in a group.

3. Partition-based: We can divide a map into different partitions. For example, we can divide a map into different partitions Based on provinces. Display the marker in the province together.

Example:

The following is an example to achieve the above effect.

1. Use markerclusterer. markerclusterer is a third-party class library on Google Maps. It is based on grid grouping.

Create a map:

// Create map var Options = {ZOOM: 12, center: new Google. maps. latlng (22.50, 114.07), maptypeid: Google. maps. maptypeid. roadmap}; var map = new Google. maps. map (document. getelementbyid ('map'), options );

Create 1000 marker in the visible MAP range and use markerclusterer to display

Google. maps. event. addlisteneronce (MAP, 'bounds _ changed ', function () {// obtain the map demarcation line var bounds = map. getbounds (); // get the map's corner var southwest = bounds. getsouthwest (); var northeast = bounds. getnortheast (); // calculate the distance from top to bottom of the map var latspan = northeast. LAT ()-southwest. LAT (); // calculate the left-to-right distance from the map var lngspan = northeast. LNG ()-southwest. LNG (); // create a data save marker object var markers = []; // create a loop for (VAR I = 0; I <1000; I ++) {// create a random number var lat = southwest. LAT () + latspan * Math. random (); var lng = southwest. LNG () + lngspan * Math. random (); var latlng = new Google. maps. latlng (Lat, LNG); // create a marker. Note that it is not added to the map. var marker = new Google. maps. marker ({position: latlng}); // Add marker to the array markers. push (Marker);} // create a markerclusterer object and pass the marker array object to VaR markerclusterer = new markerclusterer (MAP, markers );});

2. Use markermanager. Markermanager is partitioned.

Now I am defining two provinces: Hunan and Guangdong. The Hunan Region defines three cities: Changsha, Changde, and Yongzhou. Guangdong defines three cities: Guangzhou, Shenzhen, and Dongguan. If the level is greater than 6, the city is displayed. Otherwise, the province cluster is displayed. The Code is as follows:

(Function () {window. onload = function () {// create map var Options = {ZOOM: 5, center: new Google. maps. latlng (26.41, 111.61), maptypeid: Google. maps. maptypeid. roadmap}; var map = new Google. maps. map (document. getelementbyid ('map'), options); // initialize markermanager var Mgr = new markermanager (MAP); // create a marker var Hunan = new Google. maps. marker ({position: new Google. maps. latlng (28.19, 112.98), icon: 'img/cluster.png '}); // Add a click event Google to Hunan. maps. event. addlistener (Hunan, 'click', function () {// sets the map level map. setzoom (7); // set the central point map. setcenter (Hunan. getposition () ;}); // create a variable to indicate Guangdong's marker var Guangdong = new Google. maps. marker ({position: new Google. maps. latlng (22.50, 114.07), icon: 'img/cluster.png '}); // Add a click event Google to Hunan. maps. event. addlistener (Guangdong, 'click', function () {// set the map level map. setzoom (7); // set the central point map. setcenter (Guangdong. getposition () ;}); var States = [Hunan, Guangdong]; // create a city named var cities in Hunan and Guangdong Province = [// Yongzhou new Google. maps. marker ({position: new Google. maps. latlng (26.41155054662258, 111.610107421875)}), // Changde new Google. maps. marker ({position: new Google. maps. latlng (29.017748018496046, 111.68701171875)}), // Hengyang new Google. maps. marker ({position: new Google. maps. latlng (28.22697003891834, 112.91748046875)}), // Guangzhou New Google. maps. marker ({position: new Google. maps. latlng (23.120153621695614, 113.2470703125)}), // Shenzhen new Google. maps. marker ({position: new Google. maps. latlng (22.512556954051437, 114.0380859375)}), // Dongguan New Google. maps. marker ({position: new Google. maps. latlng (22.998851594142913, 113.75244140625)})]; // before using markermanager, ensure that markermanager has loaded Google. maps. event. addlistener (MGR, 'loaded', function () {// The marker displays Mgr. addmarkers (States, 1, 5); // These marker displays Mgr. addmarkers (cities, 6); // Add markermanager to the map Mgr. refresh ();});};})();

Cluster display:

Click cluster to display the marker in a scattered manner.

Summary:This article explores the display of large data volumes on Google Maps and introduces several ways to process large data volumes.

Code download: http://files.cnblogs.com/zhuqil/WebApplication2.rar

Refer:

Http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/

Http://google-maps-utility-libraryv3.googlecode.com/svn/tags/markerclusterer/1.0/
Beginning Google Maps API 3