Shulou(Shulou.com)06/03 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.