How to develop a small application by combining geolocation with google maps in html5
This article mainly introduces the html5 geolocation combined with google maps to develop a small application, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.
The api address of google maps: https://developers.google.com/maps/documentation/javascript/?hl=zh-CN.
To call google maps, you need to add a js reference to the implementation, where the specific meaning of the sensor parameter:
To use Google Maps API, you need to indicate whether your application uses a sensor, such as an GPS locator, to determine the location of the user in any Maps API library or service request. This is especially important for mobile devices. If your Google Maps API application uses any kind 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:
The framework of the js code is as follows:
The code is as follows:
Var map
Var browserSupport = false
Var attempts = 0
$(document) .ready (function () {
/ / initialize the map
InitMap ()
/ / location
GetLocation ()
/ / location 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) {
}
The InitMap method is to call google maps api to initialize the map. It needs to set the options object to use 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 get 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 successfully getting the location information, call the plotLocation method to display the location on the google maps.
The code is as follows:
Function plotLocation (position) {
Attempts = 0
Var point = new google.maps.LatLng (position.coords.latitude, position.coords.longitude)
Var marker = new google.maps.Marker ({
Position: point
});
Marker.setMap (map)
Map.setCenter (point)
Map.setZoom (15)
}
Thank you for reading this article carefully. I hope the article "how to develop a small application with geolocation in html5 combined with google maps" shared by the editor will be helpful to everyone. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!
