快捷導(dǎo)航

jQuery根據(jù)緯度經(jīng)度查看地圖處理程序

更新時(shí)間：2013年05月08日 17:53:12 作者：

jQuery根據(jù)緯度經(jīng)度查看地圖處理程序如下在這里要注意js的引入順序，有需求的朋友可以參考下哈希望對(duì)你有所幫助

 
<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> 

您可能感興趣的文章:

相關(guān)文章

jQuery實(shí)現(xiàn)簡單彈窗遮罩效果
本文主要介紹了jquery實(shí)現(xiàn)簡單彈窗遮罩效果的實(shí)例，具有很好的參考價(jià)值，下面跟著小編一起來看下吧
2017-02-02
jquery移動(dòng)listbox的值原理及代碼
jQuery操作listbox原理并不難，就是將listbox中的選中項(xiàng)進(jìn)行移動(dòng)，實(shí)現(xiàn)我們需要的移動(dòng)效果，具體實(shí)例如下，感興趣的朋友可以學(xué)習(xí)下
2013-05-05
jquery和css3實(shí)現(xiàn)的炫酷時(shí)尚的菜單導(dǎo)航
點(diǎn)擊列表圖表后，內(nèi)容頁面向內(nèi)移動(dòng)顯示菜單項(xiàng)。當(dāng)單擊關(guān)閉菜單按鈕時(shí)，菜單項(xiàng)隱藏，內(nèi)容頁恢復(fù)原位
2014-09-09
jQuery實(shí)現(xiàn)鼠標(biāo)劃過展示大圖的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)劃過展示大圖的方法,實(shí)例分析了jQuery操作鼠標(biāo)事件及圖片處理的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-03-03
基于jQuery Tipso插件實(shí)現(xiàn)消息提示框特效
這篇文章主要介紹了基于jQuery Tipso插件實(shí)現(xiàn)消息提示框特效，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-03-03
一個(gè)簡單的jQuery插件ajaxfileupload.js實(shí)現(xiàn)ajax上傳文件例子
這篇文章主要介紹了一個(gè)簡單的jQuery插件ajaxfileupload.js實(shí)現(xiàn)ajax上傳文件例子,需要的朋友可以參考下
2014-06-06
JQuery記住用戶名和密碼的具體實(shí)現(xiàn)
這篇文章主要介紹了JQuery實(shí)現(xiàn)記住用戶名和密碼的方法,需要的朋友可以參考下
2014-04-04
全面解析jQuery $(document).ready()和JavaScript onload事件
這篇文章主要介紹了全面解析jQuery $(document).ready()和JavaScript onload事件的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-06-06
jquery處理json對(duì)象
JSON(JavaScript Object Notation)javscript對(duì)象標(biāo)記，是一種輕量級(jí)的數(shù)據(jù)交換格式。具體的詳細(xì)基礎(chǔ)知識(shí)可以參考JSON官網(wǎng)http:/www.json.org/。不說太多廢話，直接說說我對(duì)JSON的理解吧。
2014-11-11
Iscrool下拉刷新功能實(shí)現(xiàn)方法(推薦)
下面小編就為大家?guī)硪黄狪scrool下拉刷新功能實(shí)現(xiàn)方法(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-06-06