問題與谷歌地圖

我想集成我的地圖與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>

來源

2014-02-22 user3177068

你想有這種搜索功能的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

試試這個，現在其做工精細，按您的評論。

<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() 
    { 
     navigator.geolocation.getCurrentPosition(callback); 

     $("#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"); 
      map.setCenter(new google.maps.LatLng(lat,lon), 10); 

      return false; 
     });  
     $( "input:submit,input:button, a, button", "#controls").button(); 


    }); 


function callback(position) { 


     var lat = position.coords.latitude; 
     var lon = position.coords.longitude; 

    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>

來源

2014-02-22 06:50:51 Sam

標記工作不細請檢查 – user3177068

加入HTML 緯度： LON：
– Sam

招呼兄弟請檢查烏爾以上代碼在firefox中不起作用 – user3177068

元素id爲緯度和經度是不可用時，爲什麼我們的代碼是行不通的。看到下面的代碼

var map; 
var marker = false; 

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; 
} 
$(document).ready(function() { 
//callback(); 
$("#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); 
});

工作Fiddle

來源

2014-02-22 06:22:36 Akhlesh

沒有任何顯示彈出 – user3177068

你能否幫助我在城市文本框中所述的問題 – user3177068

@ user3177068請參閱此[link]（https://developers.google.com/maps/documentation/javascript/examples/places-searchbox）。我認爲它會幫助你。 – Akhlesh

問題與谷歌地圖

回答

相關問題