3

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

为了设置 infoWindows 的样式，我使用了已经设置样式的 InfoBox 插件，但是我不确定如何将这个插件用于两个不同的 infoWindows。样式将保持不变，但内容会发生变化。目前 infoBox 正在工作，但是当用户单击第二个链接时，infoBox 中的内容保持不变。

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

代码

<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 选项或标记名称来修改内容，但没有成功。这是我除了样式表之外的所有代码。

4

1 回答 1

0

问题出在图标上：

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>';
}

例子

于 2013-01-21T17:28:32.443 回答