我想集成我的地圖與jquery dialouge框保存滾動的窗體。問題與谷歌地圖
地圖工作正常,直到我我把它集成到jQuery用戶界面的臺詞框
我也想文本框添加到這一點,以便一旦進入城市像孟買地圖將打開指向孟買。
爲了提高效率下面我列舉張貼整個代碼: -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Get Lat Lon Finder</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/ui-darkness/jquery-ui.css" />
<style>
.gBubble
{
color:black;
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
var marker=false;
$(document).ready(function()
{
$("#map_container").dialog({
autoOpen:false,
width: 555,
height: 400,
resizeStop: function(event, ui) {google.maps.event.trigger(map, 'resize') },
open: function(event, ui) {google.maps.event.trigger(map, 'resize'); }
});
$("#showMap").click(function() {
$("#map_container").dialog("open");
return false;
});
$( "input:submit,input:button, a, button", "#controls").button();
navigator.geolocation.getCurrentPosition(callback);
});
function callback(position) {
var lat = position.coords.latitude;
var lon = position.coords.longitude;
document.getElementById('lat').innerHTML = lat;
document.getElementById('lon').innerHTML = lon;
var latLong = new google.maps.LatLng(lat,lon);
var myOptions = {
zoom: 14,
center: latLong,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
marker = new google.maps.Marker({
position: latLong,
map: map,
draggable:true
});
marker.setMap(map);
map.setZoom(8);
map.setCenter(marker.getPosition());
google.maps.event.addListener(map, 'zoom_changed', function() {
zoomLevel = map.getZoom();
document.getElementById("zoom_level").innerHTML = zoomLevel;
});
google.maps.event.addListener(marker, 'drag', function(event){
document.getElementById("lat").innerHTML = event.latLng.lat();
document.getElementById("lon").innerHTML = event.latLng.lng();
});
document.getElementById("zoom_level").innerHTML = 14;
}
</script>
</head>
<body>
<div id="map_container" title="Location Map">
<div id="map_canvas" style="width:100%;height:100%;"></div>
</div>
<div id="controls">
<input type="button" name="showMap" value="Show Map" id="showMap" />
</div>
</body>
</html>
你想有這種搜索功能的jQuery的對話框裏面? https://google-developers.appspot.com/maps/documentation/javascript/examples/full/places-searchbox? – nik
hello bro 我的第一個問題是它不工作jquery dialoug – user3177068
看看這個[JsFiddle](http://jsfiddle.net/JjGDf/) – Akhlesh