Question

我从themeforest.com购买了this template，每件事都很棒。但有一点。每次点击标记时，信息框都会显示相同的内容。它没有改变它的位置和信息。

我希望它在点击时显示标记信息。我可以为abc 10 CS xyz 20 Maths制作数组，但不能为locations制作数组。这是我的代码：

myOptions

的Javascript

<div id="map"></div>

Answer 1

您可以创建InfoBox的单个实例，然后在点击标记后设置信息窗口的内容/位置，而不是为每个标记创建InfoBox个实例演示如下：

＆＃13;

function loadMap() {
    var locations = new Array(['Phuket',7.877285, 98.392099],['Wat Chalong Temple',7.845826, 98.328928],['nn+Patong+Beach+Hotel',7.8739695,98.343519,13]);
    var markers = new Array();
    var mapOptions = {
        center: new google.maps.LatLng(7.866062, 98.365492),
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scrollwheel: false
    };

    var infoBoxOptions = {
            disableAutoPan: false,
            maxWidth: 0,
            pixelOffset: new google.maps.Size(-146, -130),
            zIndex: null,
            closeBoxURL: "",
            infoBoxClearance: new google.maps.Size(1, 1),
            isHidden: false,
            pane: "floatPane",
            enableEventPropagation: false,
            closeBoxMargin: "10px 2px 2px 2px",
			closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
    };
    var infoBox = new InfoBox(infoBoxOptions);

    var map = new google.maps.Map(document.getElementById('map'), mapOptions);

    $.each(locations, function(index, location) {
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(location[1], location[2]),
            map: map,
        });

    
        google.maps.event.addListener(marker, "click", function (e) {
            var curMarker = this;

            map.panTo(curMarker.getPosition());
            //infoBox.setPosition(curMarker.getPosition());
            infoBox.setContent('<div class="infobox"><h2>Some information for ' + location[0] + ' goes here</h2></div>');
            infoBox.open(map, this);            
        });
    });
}


google.maps.event.addDomListener(window, 'load', loadMap);

＆＃13;

#map {
    width: 100%;
    height: 400px;
}

.infobox {
    display: inline-block;
    zoom: 1;
    background-color: #fff;
    padding: 10px;
    position: relative;
    width: 270px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
 <script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<div id="map"></div>

＆＃13;

如何分别在信息框内显示标记信息？

1 个答案: