0

我有一个带有初始谷歌地图（城市）和组合框的页面。用户可以通过在地图上拖动一个标记来选择一个位置，然后这个值（lang，long）被保存到一个隐藏字段并传递给服务器。然而，该组合列出了一些城市区域。当用户选择一个区域时，谷歌地图会发生变化：城市地图消失，显示所选区域的地图。这是通过 getJSON 完成的，一切正常。

我的问题是如何启用第二张地图，区域地图，具有相同的功能（更新可拖动标记的位置）。我知道侦听器最初绑定到初始地图，我只是不知道足够的 javascript 来了解将这些函数放在哪里以启用新地图上的功能，也许是 jquery live？

我在这个答案中找到了很大的帮助，但它并没有解决我的问题。

代码如下

<script type="text/javascript" src="/site_media/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

$(function() {

$("#id_area").change(function() {

    var url = '/areageo/'+this.value;

    $.getJSON(url, function(data) {

        if (data.lat){

            $('#mapCanvas').empty();
            // map options
            var options = {
                   zoom: 14,
                   center: new google.maps.LatLng(data.lat, data.lon),
                   mapTypeId: google.maps.MapTypeId.ROADMAP
                 };

                 // Creating the map
            var map = new google.maps.Map(document.getElementById('mapCanvas'), options);

                 // Adding a marker to the map
            var marker = new google.maps.Marker({
                   position: new google.maps.LatLng(data.lat, data.lon),
                   map: map,
                   title: 'Some title',
                   draggable: true,
                      });
            }

                 });  //getJSON end function

    });  //id_area change end function

});


         var geocoder = new google.maps.Geocoder();
         function geocodePosition(pos) {
           geocoder.geocode({
             latLng: pos
           }, function(responses) {
             if (responses && responses.length > 0) {
               updateMarkerAddress(responses[0].formatted_address);
             } else {
               updateMarkerAddress('Cannot determine address at this location.');
             }
           });
         }
         function updateMarkerStatus(str) {
           document.getElementById('markerStatus').innerHTML = str;
         }
         function updateMarkerPosition(latLng) {
           document.getElementById('info').innerHTML = [
             latLng.lat(),
             latLng.lng()
           ].join(', ');

           id_lat.value = [
             latLng.lat()];
           id_lon.value = [
             latLng.lng()];
         }

         function updateMarkerAddress(str) {
           document.getElementById('address').innerHTML = str;
         }

        // initial setup
         function initialize() {
           var latLng = new google.maps.LatLng(44.77184334415235, 20.55164378320319); // initial map position
           var map = new google.maps.Map(document.getElementById('mapCanvas'), {
             zoom: 12, // initial zoom
             center: latLng,
             mapTypeId: google.maps.MapTypeId.ROADMAP
           });

           var marker = new google.maps.Marker({
             position: latLng,
             title: 'Point A',
             map: map,
             draggable: true,

           });

           // Update current position info.
           updateMarkerPosition(latLng);
           geocodePosition(latLng);

           // Add dragging event listeners.
           google.maps.event.addListener(marker, 'dragstart', function() {
             updateMarkerAddress('Dragging...');
           });

           google.maps.event.addListener(marker, 'drag', function() {
             updateMarkerStatus('Dragging...');
             updateMarkerPosition(marker.getPosition());
           });

           google.maps.event.addListener(marker, 'dragend', function() {
             updateMarkerStatus('Drag ended');
             geocodePosition(marker.getPosition());
           });
         }


         // Onload handler to fire off the app.
         google.maps.event.addDomListener(window, 'load', initialize);
         </script>
4

1 回答 1

1

简单的答案是不要摆脱地图。当用户选择一个郊区时，将现有地图缩放到该区域（并在必要时移动标记以使其可见）。然后你不必重新定义任何东西。

如果你有一张地图，试着用那张地图做所有事情。您永远不必销毁它：只需让它显示其他内容即可。

因此，您的if (data.lat) {...块只需将地图居中data.lat,data.lon并将现有标记移动到该位置。因为标记仍然是相同的标记，并且地图仍然是相同的地图，所以您不需要重新创建侦听器或任何东西。

于 2012-04-08T21:38:58.567 回答