search

Home >Web Front-end >H5 Tutorial >HTML5 Guide-7. Geolocation combined with Google Maps to develop a small application_html5 tutorial skills

HTML5 Guide-7. Geolocation combined with Google Maps to develop a small application_html5 tutorial skills

WBOY
WBOYOriginal
2016-05-16 15:50:221794browse

Today we will develop a small application by combining HTML5 geolocation with Google Maps. Google maps API address: https://developers.google.com/maps/documentation/javascript/?hl=zh-CN.
To call google maps, you need to add js reference


The InitMap method is to call the google maps api to initialize the map. It needs to set the options object and use it when calling the map initialization.

Copy code
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 positioning information.

Copy code
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 obtaining the location information, call the plotLocation method to display the location on Google Maps.

Copy code
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);
}

demo Download address: googleMapGeolocation.rar
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Use html5 css3 to achieve slider switching effect Say goodbye to javascript css_html5 tutorial skillsNext article：Use html5 css3 to achieve slider switching effect Say goodbye to javascript css_html5 tutorial skills

Related articles

See more