--in HTML5, we provide the navigator.geolocation.getCurrentPosition (F1, F2) function, F1 is to locate the function that is successfully invoked, F2 is the function that locates the failed call, and the current geographic information is passed to the F1 and F2 functions as arguments. The F1 function calls the Google Maps API.
How to show it?
--Need a hint and a region to show the map.
On the page, roughly like this:
<map-geo-location height= "width=" ></map-geo-location>
<script src= "Angular.js" > </script>
<script src= "Http://maps.google.com/maps/api/js?sensor=false" ></script>
<script src== "Mapgeolocation.js" ></script>
The directive section is as follows:
(function () {
var mapGeoLocation = ['$window', function($window){
Var template = '< p > < span id = "status" > looking for address... < / span > < p >' + '< br / > < div id = "map" > < div >',
mapContainer = null,
status = null;
function link(scope, elem, attrs){
//Get the angular element in an angular way
status = angular.element(document.getElementById('status'));
mapContainer = angular.element(document.getElementById('map'));
mapContainer.attr('style', 'height:' + scope.height + 'px;width:' + scope.width + 'px');
$window.navigator.geolocation.getCurrentPosition(mapLocation, geoError);
}
//Called on successful positioning
function mapLocation(pos){
status.html('found your location! Longitude: ' + pos.coords.longitude + ' Latitude: ' + pos.coords.latitude);
var latlng = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
var optons = {
Zoom:15,
center: latlng,
myTypeCOntrol: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapContainer[0], options);
var marker = new google.maps.Markser({
position: latlng,
Map: map,
title: "Your location"
};
}
//Called on location failure
function geoError(error){
status.html('failed lookup ' + error.message);
}
Return {
Restrict: 'EA', / / default
Scope:{
Height: '@,
Width:'@'
}
Link: link,
template: template
}
]
angular.module('direcitveModule',[])
.direcitve('mapGeoLocation', mapGeoLocation);
} ();
The above is a small set for you to introduce in the Angularjs how to use Google Maps to show the current position of the relevant knowledge, hope to help everyone.