Question

我想将我的地图与jquery dialouge框集成以保存表单的滚动。

地图工作正常，直到我将它集成到jquery ui dialouge box

我还想为此添加文本框，这样一旦像孟买这样的城市进入地图就会打开指向孟买。

为了提高效率，我将在下面发布完整的代码： -

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

Answer 1

带有id lat和lon的

元素不可用，为什么你的代码不起作用。见下面的代码

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

Answer 2

试试这个，现在根据你的评论工作正常。

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

麻烦 - 谷歌地图的问题

2 个答案: