Last active
December 22, 2015 08:29
-
-
Save JacobHsu/6445561 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html lang="en"> | |
<head> | |
<title>Google maps and geolocation - Google maps jQuery plugin</title> | |
<meta charset="utf-8" /> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> | |
<meta http-equiv="content-language" content="en" /> | |
<meta name="viewport" content="width=device-width,initial-scale=1" /> | |
<meta name="keywords" content="Google maps, jQuery, plugin, Geolocation, Geo positioning" /> | |
<meta name="description" content="An example with jQuery, Google Maps and geolocation using Google maps jQuery plugin" /> | |
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css" /> | |
<link type="text/css" rel="stylesheet" href="css/style.css" /> | |
</head> | |
<body> | |
<header class="dark"> | |
</header> | |
<div class="container_16"> | |
<article class="grid_16"> | |
<div class="item rounded dark"> | |
<div id="map_canvas" class="map rounded"></div> | |
</div> | |
</article> | |
</div> | |
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> | |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> | |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script> | |
<script type="text/javascript" src="js/demo.js"></script> | |
<script type="text/javascript" src="ui/jquery.ui.map.js"></script> | |
<script type="text/javascript" src="ui/jquery.ui.map.overlays.js"></script> | |
<!--the getCurrentPosition is an extension of the plugin. Most likely you haven't included jquery-ui-map-extensions.js--> | |
<script type="text/javascript" src="ui/jquery.ui.map.extensions.js"></script> | |
<script type="text/javascript"> | |
$(function() { | |
demo.add(function() { | |
$('#map_canvas').gmap({ 'disableDefaultUI':true, 'callback': function() { | |
var self = this; | |
self.getCurrentPosition(function(position, status) { | |
if ( status === 'OK' ) { | |
self.set('clientPosition', new google.maps.LatLng(position.coords.latitude, position.coords.longitude)); | |
self.addMarker({'position': self.get('clientPosition'), 'bounds': true}); | |
var zoom = $('#map_canvas').gmap('option', 'zoom'); | |
$('#map_canvas').gmap('option', 'zoom', 15); //改變檢視層級 | |
self.addShape('Circle', { 'strokeWeight': 0, 'fillColor': "#008595", 'fillOpacity': 0.25, 'center': self.get('clientPosition'), 'radius': 300, clickable: false });//畫半徑300m的圈 | |
} | |
}); | |
}}); | |
}).load(); | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment