Question

我有一张工作地图，其中包含一张谷歌地图画布和地图一侧的2个链接，点击后，它会将用户带到存储的latlong位置和一个信息窗口。我的下一步是设置标记（已经成功）和infoWindows。

为了设置infoWindows的风格，我使用了InfoBox插件，但是我不知道如何将这个插件用于两个不同的infoWindows。风格将保持不变，但内容会发生变化。目前，infoBox正在运行，但当用户点击第二个链接时，infoBox中的内容保持不变。

工作链接：http://jsfiddle.net/charliebee/363ea/3/

CODE

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?&sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>

var side_bar_html = ""; 
var gmarkers = []; 
var map = null;
var infobox;


function initialize() {
  var myOptions = {
    zoom: 12,
    styles: styles,
    center: new google.maps.LatLng(54.97962549875775,-1.5975022315979004),
    mapTypeControl: true,
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
    navigationControl: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP

  }
  map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
  google.maps.event.addListener(map, 'click', function() {
});

  var point = new google.maps.LatLng(lat,long);
  var marker = createMarker(point,"City 1")

  var point = new google.maps.LatLng(lat,long);
  var marker = createMarker(point,"City 2")

  document.getElementById("marker_list").innerHTML = side_bar_html;
}

function myclick(i) {
  map.setCenter(gmarkers[i].getPosition());
  google.maps.event.trigger(gmarkers[i], "click");
}

function createMarker(latlng, name, html) {

    var contentString = html;
    var image = 'images/mapIcon.png';

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

     infobox = new InfoBox({
         content: document.getElementById("infobox","infobox2"),
         disableAutoPan: true,
         maxWidth: 280,
         pixelOffset: new google.maps.Size(0, 0),
         zIndex: null,
         boxStyle: {
         backgroundURL:"images/bg.png",
         opacity: 0.89,
         width: "280px"
        },
        closeBoxMargin: "20px 20px 20px 20px",
        closeBoxURL: "images/close.png",
        infoBoxClearance: new google.maps.Size(1, 1),
    enableEventPropagation: false
    });
    google.maps.event.addListener(marker, 'click', function() {
    infobox.open(map, this);
        map.panTo(loc);
        infobox.setContent(contentString); 
        infobox.open(map,marker);
        });

       gmarkers.push(marker);

    side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>';
}

<div class="infobox-wrapper">
    <div id="infobox">
    Content 1
    </div>
    <div id="infobox2">
    Content 2
    </div>
</div

有人能够给我建议吗？我已经尝试使用两个infoBox选项或标记名称来修改内容，但还没有成功。除样式表外，这是我的所有代码。

Answer 1

问题在于图标：

http://jsfiddle.net/z9Apy/1/

如果我改变了这个：

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

要：

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

显示标记。

<强>更新

内容的问题是这一行：

content: document.getElementById("infobox","infobox2")

一次只能返回一个元素。一种选择是更改createMarker函数以获取要使用的id元素的id。

function createMarker(latlng, name, elId) {
    var image = 'images/mapIcon.png';

    var marker = new google.maps.Marker({
        position:latlng,
        map: map /*,
        icon: image */
        });

        infobox = new InfoBox({
         content: document.getElementById(elId),
         disableAutoPan: true,
         maxWidth: 280,
         pixelOffset: new google.maps.Size(60, -150),
         zIndex: null,
         boxStyle: {
         opacity: 0.89,
         width: "280px"
        },
        closeBoxMargin: "20px",
        closeBoxURL: "images/cross.png",
        infoBoxClearance: new google.maps.Size(1, 1),
        enableEventPropagation: false
    });

    google.maps.event.addListener(marker, 'click', function() {
        infobox.open(map, this);
        map.panTo(latlng);
        infobox.setContent(document.getElementById(elId)); 
        });

    gmarkers.push(marker);

    side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>';
}

example

Googlemaps API V3：InfoBox插件和侧边栏链接

1 个答案: