Comments: Today, we will use html5 geolocation in combination with google maps to develop a small application. If you are interested, may you kindly advise me to develop a small application using html5 geolocation in combination with google maps. The api address for google maps: https://developers.google.com/maps/documentation/javascript? Hl = zh-CN.
Call google maps to add js references to the implementation <script type = "text/javascript" src = "http://maps.google.com/maps/api/js? Sensor = false "> </script>. The specific meanings of the sensor parameter are as follows:
To use the Google Maps API, you must specify whether your application uses sensors (such as GPS locators) in any Maps API library or service requests to determine the location of the user. This is especially important for mobile devices. If your Google Maps API application uses any form of sensor to determine the location of the device accessing your application, you must declare this by setting the sensor parameter value to true.
The html part is relatively simple. You only need to prepare a div.:
The Code is as follows:
<Body>
<Div id = "map">
</Div>
</Body>
The js Code framework is as follows::
The Code is as follows:
<Script type = "text/javascript">
Var map;
Var browserSupport = false;
Var attempts = 0;
$ (Document). ready (function (){
// Initialize the map
InitMap ();
// Locate
GetLocation ();
// Positioning and tracking
WatchLocation ();
});
Function InitMap (){
/* Set all of the options for the map */
Var options = {
};
/* Create a new Map for the application */
Map = new google. maps. Map ($ ('# map') [0], options );
}
/*
* If the W3C Geolocation object is available then get the current
* Location, otherwise report the problem
*/
Function getLocation (){
}
Function watchLocation (){
}
/* Plot the location on the map and zoom to it */
Function plotLocation (position ){
}
/* Report any errors using this function */
Function reportProblem (e ){
}
</Script>
The InitMap method is to call the google maps api to initialize a map. It needs to set the options object and use it when calling the map initialization.
The Code is as follows:
Function InitMap (){
/* Set all of the options for the map */
Var options = {
Zoom: 4,
Center: new google. maps. LatLng (38.6201,-90.2003 ),
MapTypeId: google. maps. MapTypeId. ROADMAP,
MapTypeControl: true,
MapTypeControlOptions :{
Style: google. maps. MapTypeControlStyle. HORIZONTAL_BAR,
Position: google. maps. ControlPosition. BOTTOM_CENTER
},
PanControl: true,
PanControlOptions :{
Position: google. maps. ControlPosition. TOP_RIGHT
},
ZoomControl: true,
ZoomControlOptions :{
Style: google. maps. ZoomControlStyle. LARGE,
Position: google. maps. ControlPosition. LEFT_CENTER
},
ScaleControl: true,
ScaleControlOptions :{
Position: google. maps. ControlPosition. BOTTOM_LEFT
},
StreetViewControl: true,
StreetViewControlOptions :{
Position: google. maps. ControlPosition. LEFT_TOP
}
};
/* Create a new Map for the application */
Map = new google. maps. Map ($ ('# map') [0], options );
}
The getLocation and watchLocation methods obtain the location information.
The Code is as follows:
Function getLocation (){
/* Check if the browser supports the W3C Geolocation API */
If (navigator. geolocation ){
BrowserSupport = true;
Navigator. geolocation. getCurrentPosition (plotLocation, reportProblem, {timeout: 45000 });
} Else {
ReportProblem ();
}
}
Function watchLocation (){
/* Check if the browser supports the W3C Geolocation API */
If (navigator. geolocation ){
BrowserSupport = true;
Navigator. geolocation. watchPosition (plotLocation, reportProblem, {timeout: 45000 });
} Else {
ReportProblem ();
}
}
After obtaining the location information, call the plotLocation method to display the location on google maps.
The Code is as follows:
Function plotLocation (position ){
Attempts = 0;
Var point = new google. maps. LatLng (position. coords. latitude, position. coords. longpolling );
Var marker = new google. maps. Marker ({
Position: point
});
Marker. setMap (map );
Map. setCenter (point );
Map. setZoom (15 );
}
Demo: googleMapGeolocation.rar
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
