Dialouge

Dialouge

关注
发信
关注(28)粉丝(399)

jquery - 麻烦-使用Google Map的Jquery

我想将地图与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>

最佳答案

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





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

07-26 04:43
Powered by LMLPHP ©2025 Dialouge 0.025932