CN102023866A - Map control based on Google Maps JavaScript API and production method thereof - Google Patents
Map control based on Google Maps JavaScript API and production method thereof Download PDFInfo
- Publication number
- CN102023866A CN102023866A CN2010105912814A CN201010591281A CN102023866A CN 102023866 A CN102023866 A CN 102023866A CN 2010105912814 A CN2010105912814 A CN 2010105912814A CN 201010591281 A CN201010591281 A CN 201010591281A CN 102023866 A CN102023866 A CN 102023866A
- Authority
- CN
- China
- Prior art keywords
- data
- map control
- *** maps
- api
- xml
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Images
Landscapes
- Stored Programmes (AREA)
Abstract
The invention relates to a map control based on Google Maps JavaScript API and production method thereof. The production method comprises the following steps: introducing XML data file; and converting into recognizable data format to store in a data storage area; reading data from the data storage area, and invokeing Google Maps API to generate corresponding map control. The threshold of using Google electronic map service by a service system can be lowered by utilizing the invention, and application based on Google Maps can be rapidly developed; furthermore, the developer can invoke the function and service of the Google Maps only by outputting the data according to a fixed data exchange format without researching the use of Google Maps.
Description
Technical field
The present invention relates to communication field, relate in particular to a kind of map control and generation method thereof based on Google Maps JavaScript API.
Background technology
Based on the application of spatial data, need two to support greatly, the firstth, data; The secondth, platform.But in fact, spatial data often costs an arm and a leg, and data are incompatible, and traditional GIS (GeographicInformation System, Geographic Information System) often complicated and difficult the using of platform, this makes builds a cover generalized information system, and more than half above investment is all spent on data, and more than half energy spends in the GIS platform of dealing with those difficult usefulness again.The result who causes at last is that the GIS project investment is many, but effect is bad.
Along with Internet development, network electronic map becomes a key areas of internet, applications, and internet electronic map industry is development with surprising rapidity also, by the internet to position and navigation Service that the netizen provides, quick and mass data becomes users' first-selection with it.Along with user's continuous increase, also when the river rises the boat goes up for the internet electronic The Map Market.And in this period, the electronic chart that Google company provides (being Google Maps) more becomes a line of scenery line of this industry.
Different fully with situation in the past, Google provides free data, and has opened three kinds of API and used for the developer: Google Maps JavaScript API, Google Maps API Flash version, Google static map API.The present invention is based on that Google Maps JavaScript API realizes.Google Map JavaScript API provides a large amount of utilities to be used to handle map, and adds content by various services to map, thereby makes you can create the map application of complete function on your website.Except these ready-made functions and control, the advantage of Google Maps API maximum, be that the user can self-defined fully various contents, from function to the map control, incident, map style, periphery search etc., the user all can be self-defined by Google Maps API.Therefore, around Google Maps API, much very significant expansion and application continue to bring out.
Summary of the invention
Fundamental purpose of the present invention provides a kind of map control and generation method thereof based on Google Maps JavaScript API, and it is flexible, easy to be intended to make that the map control uses, and powerful.
The invention provides a kind of map control generation method, may further comprise the steps based on Google Maps JavaScript API:
Import the XML data file, and be converted into discernible data layout and be stored in the data storage area;
From the data storage area reading of data, and call Google Maps API, generate corresponding map control.
Preferably, above-mentioned from the data storage area reading of data, and call Google Maps API, generate corresponding map control and be specially:
Judge whether there is interaction data in the described data, exist audiomonitor then to be set or to start timer, call Google Maps API again and generate corresponding map control; Otherwise directly call Google Maps API and generate corresponding map control.
Preferably, above-mentioned importing XML data file, and be converted into discernible data layout and be stored in the data storage area and be specially:
Import the XML data file from XML file data loading interface or backstage service data loading interface, and be converted into discernible data layout and be stored in the data storage area.
Preferably, above-mentioned from the data storage area reading of data, and call Google Maps API, generate corresponding map control and also comprise afterwards:
The instruction of reception map edit is correspondingly upgraded the data of map control, and preserves the data of the map control after its renewal, returns to carry out to import the XML data file, and is converted into the step that discernible data layout is stored in the data storage area.
The present invention also provides a kind of map control based on Google Maps JavaScript API, comprising:
The data importing module is used to import the XML data file, and is converted into discernible data layout;
Data memory module is used to store the data file after the conversion;
Data load module is used for from the data memory module reading of data, and calls Google Maps API, generates corresponding map control.
Preferably, above-mentioned data load module specifically is used for:
Judge whether there is interaction data in the described data, exist audiomonitor then to be set or to start timer, call Google Maps API again and generate corresponding map control; Otherwise directly call Google Maps API and generate corresponding map control.
Preferably, above-mentioned data importing module specifically is used for:
Import the XML data file from XML file data loading interface or backstage service data loading interface, and be converted into discernible data layout and be stored in the data storage area.
Preferably, above-mentioned map control also comprises:
The map edit module is used to receive the map edit instruction, the data of map control is correspondingly upgraded, and preserved the data of the map control after its renewal, and the data that will preserve after changing by the data importing module import again.
The present invention can reduce the threshold that operation system is used the electronic chart service of Google, helps exploitation fast based on the application of Google Maps.And the developer no longer needs to study the use of Google Maps API, only needs according to fixing data interchange format output data, the function and the service that can realize calling Google Maps.
Description of drawings
Fig. 1 is the schematic flow sheet that the present invention is based on map control generation method one embodiment of Google Maps JavaScriptAPI;
Fig. 2 is the synoptic diagram that the present invention is based on control data interchange format among map control generation method one embodiment of Google Maps JavaScriptAPI;
Fig. 3 the present invention is based on the schematic flow sheet that generates corresponding map control among map control generation method one embodiment of Google Maps JavaScriptAPI according to corresponding control data;
Fig. 4 is the schematic flow sheet that the present invention is based on another embodiment of map control generation method of Google Maps JavaScript API;
Fig. 5 is the structural representation that the present invention is based on map control one embodiment of Google Maps JavaScript API;
Fig. 6 is the structural representation that the present invention is based on another embodiment of map control of Google Maps JavaScriptAPI.
The realization of the object of the invention, functional characteristics and advantage will be in conjunction with the embodiments, are described further with reference to accompanying drawing.
Embodiment
Further specify technical scheme of the present invention below in conjunction with Figure of description and specific embodiment.Should be appreciated that specific embodiment described herein only in order to explanation the present invention, and be not used in qualification the present invention.
Fig. 1 is the schematic flow sheet that the present invention is based on map control generation method one embodiment of Google Maps JavaScriptAPI.
Present embodiment may further comprise the steps based on the map control generation method of Google Maps JavaScript API:
Step S10, import the XML data, and be converted into discernible data layout and be stored in the data storage area;
Step S10 is specially: from XML (Extensible Markup Language, being extend markup language) file data loading interface or backstage service data loading interface import the XML data, and be converted into discernible data layout and be stored in the data storage area.When XML file data loading interface imports, can be by the XML file path (absolute path or relative path) of appointment, the XML data of this importing must be followed " control data interchange format ", as shown in Figure 2.When backstage service data loading interface imports, can be by the URL address of specifying to export the backstage service of this XML form, what this backstage service data loading interface returned is dynamically to generate the XML format string, certainly, this XML format string also must be followed " control data interchange format " shown in Figure 2.After importing the XML data, be converted into discernible data layout again and be stored in the data storage area.
Step S11, from the data storage area reading of data, and call Google Maps API, generate corresponding map control.
With reference to Fig. 3, step S11 specifically comprises:
Whether there is interaction data in step S111, the judgment data, has then execution in step S112; Otherwise execution in step S113;
This interaction data comprises:
Operations such as A, mouse-click, mouse are close, mouse drag and right-click can be finished by corresponding monitoring function is set;
B, dynamic queries can be finished the renewal of data by calling the dynamic data loading interface, for example at foreground Web layout setting query term, dynamically form querying condition, and upgrade Query Result.
C, map edit are edited pel (for example, point, line and polygon etc.), and can be finished by the pel saving interface.
D, data importing can be finished by the invocation map introducting interface.
E, data derive, will export to the backstage preservation from the XML data file that XML data load interface imports.
Therefore, whether having above-mentioned interaction data in the judgment data, is execution in step S112 then; Otherwise execution in step S113.
Step S112, audiomonitor is set or starts timer, execution in step S113;
When having above-mentioned interaction data in the data, audiomonitor then is set or starts timer, so that trigger corresponding interactive function.
Step S113, call Google Maps API and generate corresponding map control.
At last, call Google Maps API function again, can generate corresponding map control.
Present embodiment can reduce the threshold that operation system is used the electronic chart service of Google based on the map control generation method of Google Maps JavaScript API, helps exploitation fast based on the application of GoogleMaps.And the developer no longer needs to study the use of Google Maps API, only needs according to fixing data interchange format output data, the function and the service that can realize calling Google Maps.
The map control that generates by the present embodiment method has the following advantages:
(1) good function integration is arranged.Google Maps API itself is flexibly, because flexibly, so each api function that it provides can only be finished a part or small function, if realize satisfying the function of specific transactions scene or general service scene, also need the developer to study the use of each API, and in code, carry out a series of control and just can reach.And the control that the present invention realized has just been integrated these API and has been finished predetermined one group of function independently.For example: the map edit function, the user only by revising the online editing function that control property just can use map, no longer needs to write a lot of codes.
(2) designed the data interchange format of a kind of feasible and succinct XML data layout as control, if directly adopt KML (Keyhole Markup Language, the Keyhole SGML) data are carried out exchanges data, each nodal value of KML are committed to operation system and be saved in the difficulty of database very big.
(3) defined map layer is divided into Tile figure layer (segment figure layer), KML figure layer, Geometry figure layer (map element figure layer) three kinds among the XML.Therefore, the form of any Google Maps API input data all is a kind of in these three kinds of forms after all, makes control satisfy the requirement of versatility.
(4), in control, realized meeting the functional module of specific transactions scene by the power of Google Maps API.And this function does not directly provide at former Google Maps API.For example: the flashing function of pel (map element).Be to be difficult to find in the application system that this flashing function much uses Google Maps API to develop at present on the net, and this flashing function can have good application to the alarm module in the systems such as network management system.
Fig. 4 is the schematic flow sheet that the present invention is based on another embodiment of map control generation method of Google Maps JavaScript API.
On the basis of the foregoing description, also comprise after the above-mentioned steps S11:
Step S12, edit instruction according to the map correspondingly upgrade the data of map control;
The map edit instruction is imported for the user, by this map edit instruction, can correspondingly change the pel of control.Then, then can correspondingly upgrade the data of map control according to this map edit instruction.
Data after step S13, preservation are upgraded, and return execution in step S10.
When the map control makes that by online pel editting function or other interactive functions it changes, then can preserve the data after the variation in time, and the data after will upgrading import execution in step S10 again.So, can guarantee the real-time update and the preservation of data.
Fig. 5 is the structural representation that the present invention is based on map control one embodiment of Google Maps JavaScript API.
Present embodiment comprises based on the map control of Google Maps JavaScript API:
Above-mentioned data importing module 10 specifically is used for: import the XML data file from XML file data loading interface or backstage service data loading interface, and be converted into discernible data layout and be stored in the data storage area.When XML file data loading interface imports, can be by the XML file path (absolute path or relative path) of appointment, the XML data of this importing must be followed " control data interchange format ", as shown in Figure 2.When backstage service data loading interface imports, can be by the URL address of specifying to export the backstage service of this XML form, what this backstage service data loading interface returned is dynamically to generate the XML format string, certainly, this XML format string also must be followed " control data interchange format " shown in Figure 2.Data importing module 10 imports the XML data earlier, is converted into discernible data layout again and is stored in the data storage area.
Above-mentioned data load module 12 specifically is used for: whether judgment data exists interaction data, exists audiomonitor then to be set or to start timer, calls Google MapsAPI again and generates corresponding map control; Otherwise directly call Google Maps API and generate corresponding map control.
This interaction data comprises:
Operations such as A, mouse-click, mouse are close, mouse drag and right-click can be finished by corresponding monitoring function is set;
B, dynamic queries can be finished the renewal of data by calling the dynamic data loading interface, for example at foreground Web layout setting query term, dynamically form querying condition, and upgrade Query Result.
C, map edit are edited pel (for example, point, line and polygon etc.), and can be finished by the pel saving interface.
D, data importing can be finished by the invocation map introducting interface.
E, data derive, will export to the backstage preservation from the XML data file that XML data load interface imports.
Therefore, when having above-mentioned interaction data in data load module 12 judgment data, audiomonitor is set or starts timer,, call Google Maps API function at last again, can generate corresponding map control so that trigger corresponding interactive function.
The map control of present embodiment has the following advantages:
(1) good function integration is arranged.Google Maps API itself is flexibly, because flexibly, so each api function that it provides can only be finished a part or small function, if realize satisfying the function of specific transactions scene or general service scene, also need the developer to study the use of each API, and in code, carry out a series of control and just can reach.And the control that the present invention realized has just been integrated these API and has been finished predetermined one group of function independently.For example: the map edit function, the user only by revising the online editing function that control property just can use map, no longer needs to write a lot of codes.
(2) designed the data interchange format of a kind of feasible and succinct XML data layout,, each nodal value of KML has been committed to operation system and be saved in the difficulty of database very big if directly adopt the KML data to carry out exchanges data as control.
(3) defined map layer is divided into Tile figure layer (segment figure layer), KML figure layer, Geometry figure layer (map element figure layer) three kinds among the XML.Therefore, the form of any Google Maps API input data all is a kind of in these three kinds of forms after all, makes control satisfy the requirement of versatility.
(4), in control, realized meeting the functional module of specific transactions scene by the power of Google Maps API.And this function does not directly provide at former Google Maps API.For example: the flashing function of pel (map element).Be to be difficult to find in the application system that this flashing function much uses GoogleMaps API to develop at present on the net, and this flashing function can have good application to the alarm module in the systems such as network management system.
Fig. 6 is the structural representation that the present invention is based on another embodiment of map control of Google Maps JavaScript API.
On the basis of the foregoing description, present embodiment map control also comprises:
When the map control makes it change by online pel editting function or other interactive functions, 13 of map edit modules can be preserved the data after the variation, and the data of map control are upgraded.And, also the data after upgrading can be imported again by data importing module 10.So, can guarantee the real-time update and the preservation of data.
The above only is the preferred embodiments of the present invention; be not so limit its claim; every equivalent structure or equivalent flow process conversion that utilizes instructions of the present invention and accompanying drawing content to be done; directly or indirectly be used in other relevant technical fields, all in like manner be included in the scope of patent protection of the present invention.
Claims (8)
1. the map control generation method based on Google Maps JavaScript API is characterized in that, may further comprise the steps:
Import XML extensible markup file, and be converted into discernible data layout and be stored in the data storage area;
From the data storage area reading of data, and call Google Maps API, generate corresponding map control.
2. method according to claim 1 is characterized in that, and is described from the data storage area reading of data, and calls Google Maps API, generates corresponding map control and is specially:
Judge whether there is interaction data in the described data, exist audiomonitor then to be set or to start timer, call Google Maps API again and generate corresponding map control; Otherwise directly call Google Maps API and generate corresponding map control.
3. method according to claim 1 is characterized in that, described importing XML data file, and be converted into discernible data layout and be stored in the data storage area and be specially:
Import the XML data file from XML file data loading interface or backstage service data loading interface, and be converted into discernible data layout and be stored in the data storage area.
4. according to each described method in the claim 1 to 3, it is characterized in that, described from the data storage area reading of data, and call Google Maps API, generate corresponding map control and also comprise afterwards:
Edit instruction correspondingly upgrades the data of map control according to the map, and preserves the data of the map control after its renewal, returns to carry out to import the XML data file, and is converted into the step that discernible data layout is stored in the data storage area.
5. the map control based on Google Maps JavaScript API is characterized in that, comprising:
The data importing module is used to import the XML data file, and is converted into discernible data layout;
Data memory module is used to store the data file after the conversion;
Data load module is used for from the data memory module reading of data, and calls Google Maps API, generates corresponding map control.
6. map control according to claim 5 is characterized in that, described data load module specifically is used for:
Judge whether there is interaction data in the described data, exist audiomonitor then to be set or to start timer, call Google Maps API again and generate corresponding map control; Otherwise directly call Google Maps API and generate corresponding map control.
7. map control according to claim 5 is characterized in that, described data importing module specifically is used for:
Import the XML data file from XML file data loading interface or backstage service data loading interface, and be converted into discernible data layout and be stored in the data storage area.
8. according to each described map control in the claim 5 to 7, it is characterized in that, also comprise:
The map edit module is used to receive the map edit instruction, the data of map control is correspondingly upgraded, and preserved the data of the map control after its renewal, and the data that will preserve after changing by the data importing module import again.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN2010105912814A CN102023866A (en) | 2010-12-16 | 2010-12-16 | Map control based on Google Maps JavaScript API and production method thereof |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN2010105912814A CN102023866A (en) | 2010-12-16 | 2010-12-16 | Map control based on Google Maps JavaScript API and production method thereof |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN102023866A true CN102023866A (en) | 2011-04-20 |
Family
ID=43865188
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN2010105912814A Pending CN102023866A (en) | 2010-12-16 | 2010-12-16 | Map control based on Google Maps JavaScript API and production method thereof |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN102023866A (en) |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103294459A (en) * | 2012-02-29 | 2013-09-11 | 阿里巴巴集团控股有限公司 | Map activex generation method and device |
| CN107229461A (en) * | 2016-03-25 | 2017-10-03 | 谷歌公司 | Navigation application DLL |
| WO2017219884A1 (en) * | 2016-06-23 | 2017-12-28 | 斑马网络技术有限公司 | Service layer generating method and apparatus, terminal device, and user interface system |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20040263513A1 (en) * | 2003-06-26 | 2004-12-30 | Smith Marc A. | Treemap visualization engine |
| CN101110079A (en) * | 2007-06-27 | 2008-01-23 | 中国科学院遥感应用研究所 | Digital globe antetype system |
-
2010
- 2010-12-16 CN CN2010105912814A patent/CN102023866A/en active Pending
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20040263513A1 (en) * | 2003-06-26 | 2004-12-30 | Smith Marc A. | Treemap visualization engine |
| CN101110079A (en) * | 2007-06-27 | 2008-01-23 | 中国科学院遥感应用研究所 | Digital globe antetype system |
Non-Patent Citations (1)
| Title |
|---|
| GOOGLE: "Google Maps API2文档", 《HTTP://WWW.CODECHINA.ORG/DOC/GOOGLE/GMAPAPI/#CUSTOM_CONTROLS》 * |
Cited By (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103294459A (en) * | 2012-02-29 | 2013-09-11 | 阿里巴巴集团控股有限公司 | Map activex generation method and device |
| CN103294459B (en) * | 2012-02-29 | 2016-05-25 | 阿里巴巴集团控股有限公司 | Map control generates method and apparatus |
| CN107229461A (en) * | 2016-03-25 | 2017-10-03 | 谷歌公司 | Navigation application DLL |
| CN107229461B (en) * | 2016-03-25 | 2022-01-14 | 谷歌有限责任公司 | Method for integrating navigation services as part of a software application and computing device |
| WO2017219884A1 (en) * | 2016-06-23 | 2017-12-28 | 斑马网络技术有限公司 | Service layer generating method and apparatus, terminal device, and user interface system |
| CN107544790A (en) * | 2016-06-23 | 2018-01-05 | 斑马网络技术有限公司 | Service figure layer generation method, device, terminal device and user interface system |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN103383645B (en) | Code generating method and system | |
| CN102426519B (en) | Linked data-based multiplexing method of business process execution language (BPEL) templates and services, and system thereof | |
| CN104679903B (en) | The operating method and device of a kind of tables of data | |
| CN101799753B (en) | Method and device for realizing tree structure | |
| CN101788906B (en) | Resource management method and system thereof | |
| CN102566984B (en) | Method and device for configuring parameters | |
| CN104407863A (en) | Abstract control model programming device and method | |
| CN102946415B (en) | A kind of implementation method of mobile terminal this locality application and device | |
| CN103927385A (en) | Unifying method and device of data model | |
| CN104881490A (en) | WEB form data access method and system | |
| CN105528418A (en) | Design document generation method and apparatus | |
| CN103605660A (en) | Graphic processing method for SCD (Substation Configuration Description) file | |
| CN102222278A (en) | Operation process customizing method and device | |
| CN102184101A (en) | Software application frame and development system thereof for smartphones | |
| CN100397397C (en) | XML data storage and access method based on relational database | |
| CN104679793A (en) | Dynamic invoice template invoice issuing system | |
| CN109977510B (en) | Hydrological model network publishing method based on GIS technology | |
| CN104834715A (en) | Website generating method and system based on components and container | |
| CN105468793A (en) | Automated management method for simulation model data | |
| Kolovos et al. | The epsilon pattern language | |
| Whiteaker et al. | From a NEXRAD rainfall map to a flood inundation map | |
| CN104572832A (en) | Requirement meta model construction method and device | |
| CN102023866A (en) | Map control based on Google Maps JavaScript API and production method thereof | |
| CN110851123A (en) | WebGIS power grid visualization framework construction method, system and device based on SpringMVC | |
| CN103501341A (en) | Method and device for establishing Web service |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| C12 | Rejection of a patent application after its publication | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20110420 |