问题与谷歌地图

我想集成我的地图与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

问题与谷歌地图

回答

相关问题