谷歌地图javascript

我有一个带有初始谷歌地图（城市）和组合框的页面。用户可以通过在地图上拖动标记来选择位置，然后将该值（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>

$（函数（）{
$（“#id_区域”）。更改（函数（）{
var url='/areageo/'+this.value；
$.getJSON（url、函数（数据）{
if（data.lat）{
$（'#mapCanvas'）.empty（）；
//地图选项
变量选项={
缩放：14，
中心：新的google.maps.LatLng（data.lat，data.lon），
mapTypeId:google.maps.mapTypeId.ROADMAP
};
//创建地图
var map=new google.maps.map（document.getElementById（'mapCanvas'），选项）；
//向地图添加标记
var marker=new google.maps.marker({
位置：新的google.maps.LatLng（data.lat，data.lon），
地图：地图，
标题：“一些标题”，
真的，
});
}
})；//getJSON结束函数
})；//id_区域更改结束函数
});
var geocoder=new google.maps.geocoder（）；
功能地理编码定位（pos）{
地理编码({
车床：位置
}，职能（回应）{
if（responses&&responses.length>0）{
UpdateMarkeradAddress（响应[0]。格式化的\u地址）；
}否则{
UpdateMarkeradAddress（'无法确定此位置的地址'）；
}
});
}
函数updateMarkerStatus（str）{
document.getElementById（'markerStatus'）。innerHTML=str；
}
函数更新标记位置（latLng）{
document.getElementById（'info'）。innerHTML=[
latLng.lat（），
latLng.lng（）
]。加入（‘，’）；
id_lat.value=[
latLng.lat（）；
id_lon.value=[
latLng.lng（）；
}
函数更新标记地址（str）{
document.getElementById（'address'）。innerHTML=str；
}
//初始设置
函数初始化（）{
var latLng=new google.maps.latLng（44.771843344132523520.55164378320319）；//初始地图位置
var map=new google.maps.map（document.getElementById（'mapCanvas'）{
缩放：12，//初始缩放
中心：拉特林，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var marker=new google.maps.marker({
位置：latLng，
标题：“A点”，
地图：地图，
真的，
});
//更新当前职位信息。
更新市场定位（latLng）；
地理共定位（latLng）；
//添加拖动事件侦听器。
google.maps.event.addListener（标记'dragstart'，函数（）{
UpdateMarkeradAddress（'拖动…'）；
});
google.maps.event.addListener（标记'drag'，function（）{
updateMarkerStatus（'拖动…'）；
updateMarkerPosition（marker.getPosition（））；
});
google.maps.event.addListener（标记'dragend'，function（）{
updateMarkerStatus（“拖动结束”）；
geocodePosition（marker.getPosition（））；
});
}
//用于启动应用程序的Onload处理程序。
google.maps.event.addDomListener（窗口“加载”，初始化）；

简单的答案是不要扔掉地图。当用户选择郊区时，将现有地图缩放到该区域（必要时移动标记使其可见）。那么你就不必重新定义任何东西了

如果你有一张地图，试着用这张地图做任何事情。你永远不应该破坏它：只是让它展示一些别的东西。

---

所以你的

if（data.lat）{…

block只需将地图集中在

data.lat，data.lon上，并将现有的标记移动到该位置。因为标记仍然是同一个标记，而地图仍然是同一个地图，您不需要重新创建侦听器或任何东西。
这听起来很好，也很合乎逻辑，我只需使用同一个地图并动态更改它即可使用我，再问一个问题，如果我使用函数initialize（）声明初始映射，外部代码是否可以看到它{var latLng=new google.maps.latLng（44.77184,20.55164）；var map=new google.maps.map（document.getElementById（'mapCanvas'），{…如果
var-map
出现在函数内部，则它是该函数的本地对象，在其他位置不可用。在全局范围（任何函数外部）中使用
var-map；
，然后使用
map=new google.maps.map（…）将映射对象分配给该对象
函数内部。是的。我得到了它-删除了变量，一切都很好。非常感谢安德鲁，你救了我！