Comment: Today we will combine html5 geolocation to develop a small application. Interested friends can learn about it. If there are any shortcomings, I hope the hero will give you advice.
Today we will combine HTML5's geolocation with Google Maps to develop a small application. Google maps' API address: https://developers.google.com/maps/documentation/javascript/?hl=zh-CN.To call Google maps, the implementation needs to add a js reference <script type=text/javascript src=?sensor=false></script>, where the specific meaning of the sensor parameter:
To use the Google Maps API, you need to indicate whether your application uses sensors (such as GPS locators) in any Maps API library or service requests to determine where the user is. 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:
<body>
<div>
</div>
</body>
The framework of js code is as follows:
<script type="text/javascript">
var map;
var browserSupport = false;
var attempts = 0;
$(document).ready(function () {
//Initialize the map
InitMap();
//position
getLocation();
//Location 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 the map. It needs to set the options object and use it when calling the map initialization.
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);
}
getLocation and watchLocation methods to obtain positioning information.
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.
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