javascript - 谷歌地图标记弹出 Jquery

Question

我想用 jquery 为我想要的标记创建一个弹出窗口。 所以我有一个标记的代码，但如何为另一个标记创建另一个弹出窗口？ 例如在巴黎的标记上。 我也想知道如何防止弹出窗口移动？

<script type='text/javascript'> $(function(){function initialize() {
    var mapOptions = {
      zoom: 4,
      disableDefaultUI: true,
      center: new google.maps.LatLng(45.35, 4.98),
      mapTypeId: google.maps.MapTypeId.TERRAIN
    }
    var map = new google.maps.Map(document.getElementById('map_canvas'),
                                  mapOptions);


// Paris 
var Paris = new google.maps.LatLng(48.856291,2.352705);
    var image = 'rss.png';
    var marker = new google.maps.Marker({
        position: Paris,
        map: map,
        icon: image,
    });


// Le Mans
var Lemans = new google.maps.LatLng(48.006922,0.20874);
    var image = 'rss.png';
    var marker = new google.maps.Marker({
        position: Lemans,
        map: map,
        icon: image,
    });

    var styles = [
   {
      featureType: "all",
      stylers: [
        { saturation: -15 },
        { lightness: -10 },
      ]
    },

            ];
map.setOptions({styles: styles});


var popup=$('<div/>', {
    'id':'infoWindow',
    'text':'Hello World'
}).dialog({
    'autoOpen':false,
    'width': 200,
    'height':200,
    'resizable':false,
    'modal':true,
    'title':'Map info'
});
google.maps.event.addListener(marker, 'click', function(e) {
    console.log(e);
    popup.dialog('open');
});    }initialize();}); </script>

Answer 1

您可以在一个额外的函数中提取标记和窗口的创建，并为每个城市调用它。顺便说一下，我用谷歌地图窗口替换了弹出窗口。但这也适用于自定义弹出窗口。

function addMarkerWithWindow(name, coordinate, map) {
    var infowindow = new google.maps.InfoWindow({
        content: name
    });

    var marker = new google.maps.Marker({
        map: map,
        position: coordinate
    });

    google.maps.event.addListener(marker, 'click', function (e) {
        infowindow.open(map, marker);
    });
}

function initialize() {
    var mapDiv = document.getElementById('map-canvas');
    var map = new google.maps.Map(mapDiv, {
        center: new google.maps.LatLng(48.006922, 2.20874),
        zoom: 4,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    addMarkerWithWindow("This is Lemans", new google.maps.LatLng(48.006922, 0.20874), map);
    addMarkerWithWindow("This is Paris", new google.maps.LatLng(48.856291, 2.352705), map);
}

把代码放在这里就可以测试了:http://code.google.com/apis/ajax/playground/#info_windows_complex_v3