jQuery根据纬度经度查看地图处理程序

2019/6/29 22:44:27

编程Tag： 经度纬度查看地图

本文主要是介绍jQuery根据纬度经度查看地图处理程序，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
//在这里要注意js的引入顺序 
<link href="css/jquery.ui.base.css" rel="stylesheet" type="text/css" /> 
<link href="css/jquery.ui.theme.css" rel="stylesheet" type="text/css" /> 
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> 
<script src="js/jquery-1.9.1.js" type="text/javascript"></script> 
<script src="js/jquery.mousewheel.js" type="text/javascript"></script> 
<script src="js/jquery.ui.core.js" type="text/javascript"></script> 
<script src="js/jquery.ui.widget.js" type="text/javascript"></script> 
<script src="js/jquery.ui.button.js" type="text/javascript"></script> 
<script src="js/jquery.ui.spinner.js" type="text/javascript"></script> 
<link href="css/demos.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript"> 
$(function () { 
function latlong() { 
return new google.maps.LatLng($("#lat").val(), $("#lng").val()); 
} 
function position() { 
map.setCenter(latlong()); 
} 
$("#lat, #lng").spinner({ 
step: .001, 
change: position, 
stop: position 
}); 
var map = new google.maps.Map($("#map")[0], { 
zoom: 8, 
center: latlong(), 
mapTypeId: google.maps.MapTypeId.ROADMAP 
}); 
}); 
</script> 
<style type="text/css"> 
#map { 
width:500px; 
height:500px; 
} 
</style> 
</head> 
<body> 
<label for="lat">纬度</label> 
<input id="lat" name="lat" value="44.797"/> 
<br> 
<label for="lng">经度</label> 
<input id="lng" name="lng" value="-93.278"/> 
<div id="map"></div> 
<div class="demo-description"> 
</div> 
</body> 
</html> 

这篇关于jQuery根据纬度经度查看地图处理程序的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

jQuery根据纬度经度查看地图处理程序

相关编程文章