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

Answer 2

创建一个弹出窗口，您可以在此处执行此操作：

您可以在此处查看一些示例：Demos

<p><a href="http://www.yahoo.com" title="yahoo.com" class="example1demo">open popup</a></p> 
<script type="text/javascript"> 
$('.example1demo').popupWindow({ 
height:500, 
width:800, 
top:50, 
left:50 
}); 
</script>

谷歌地图标记弹出Jquery

2 个答案: