jQuery根據(jù)緯度經(jīng)度查看地圖處理程序
更新時間：2013年05月08日 17:53:12 作者：
jQuery根據(jù)緯度經(jīng)度查看地圖處理程序如下在這里要注意js的引入順序，有需求的朋友可以參考下哈希望對你有所幫助
復(fù)制代碼 代碼如下:
<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">經(jīng)度</label>
<input id="lng" name="lng" value="-93.278"/>
<div id="map"></div>
<div class="demo-description">
</div>
</body>
</html>
您可能感興趣的文章:
- jQuery實現(xiàn)點擊查看大圖并以彈框的形式居中
- 基于jQuery實現(xiàn)表格的查看修改刪除
- jQuery實現(xiàn)簡單的圖片查看器
- jquery實現(xiàn)移動端點擊圖片查看大圖特效
- jquery實現(xiàn)點擊查看更多內(nèi)容控制段落文字展開折疊效果
- jquery實現(xiàn)鼠標(biāo)滑過小圖查看大圖的方法
- jQuery遍歷頁面所有CheckBox查看是否被選中的方法
- 查看大圖功能代碼jquery版
- JQuery中form驗證出錯信息的查看方法
- jQuery輸入城市查看地圖使用介紹
- 查看源碼的工具 學(xué)習(xí)jQuery源碼不錯的工具
- 基于jQuery實現(xiàn)的查看全文功能【實用】
相關(guān)文章
這篇文章主要分為以下知識：什么是Callbacks、Callbacks模型、基本模塊實現(xiàn)、once和auto(memory)、源碼和源碼下載，十分的細(xì)致全面，這里推薦給大家，有需要的小伙伴參考下吧。2015-03-03
Jquery帶搜索框的下拉菜單，需要的朋友可以參考一下2013-05-05
這篇文章主要介紹了jQuery事件用法實例匯總,對事件的綁定及各類事件的用法做了較為詳盡的實例分析,有很好的借鑒價值,需要的朋友可以參考下2014-08-08
Struts2的s:radio標(biāo)簽使用及用jquery添加change事件
用到Struts2的s:radio標(biāo)簽時想給它添加一個change事件，由于此標(biāo)簽為頁面自動生成一個radio組，不可以像正常那樣控制，于是想到用jquery來實現(xiàn)2013-04-04
這篇文章主要介紹了jquery實現(xiàn)郵箱自動填充提示功能，為了提高用戶的體驗，很多網(wǎng)站都會實現(xiàn)郵箱輸入的自動提示功能，對如何實現(xiàn)自動提示功能感興趣的小伙伴們可以參考一下2015-11-11
本文通過實例代碼給大家分享了基于jQuery Easyui實現(xiàn)登陸框界面，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的的朋友參考下吧2017-07-07
JQuery的強大之處，這里就不用講了。這里將用一行簡單的JQuery代碼實現(xiàn)簡單的表格篩選。2010-07-07
jQuery對事件系統(tǒng)的抽象與優(yōu)化也是它的一大特色。本文僅從事件系統(tǒng)入手，簡要分析一下jQuery為什么提供mouseenter和mouseleave事件，它們與標(biāo)準(zhǔn)的mouseover、mouseout事件有什么區(qū)別2011-11-11
本文給大家分享的是使用jQuery制作的模仿百度時間軸特效的代碼，效果非常不錯，有需要的小伙伴可以參考下。2015-07-07
jquery實現(xiàn)鼠標(biāo)經(jīng)過顯示下劃線的漸變下拉菜單效果代碼
這篇文章主要介紹了jquery實現(xiàn)鼠標(biāo)經(jīng)過顯示下劃線的漸變下拉菜單效果代碼,涉及jquery插件SuperSlide.2.1.js實現(xiàn)滑動切換效果的技巧,非常具有實用價值,需要的朋友可以參考下2015-08-08