在地图上查看按钮:热以激活控件?

时间:2014-06-19 07:42:26

标签: javascript html google-maps google-maps-api-3

我在谷歌地图中激活控件时遇到问题,我的目标是当我点击控件时我希望它放大地图中的某个标记并显示相关的信息窗。

这是我的.html文件

<div id="DetailsPanel">
    <div id="AdamsonDetails">
        <div id="ADUimages">
            <img src="img/doodle1.jpg"/>
            <img src="img/doodle2.jpg"/>
            <img src="img/doodle3.jpg"/>
        </div>
        <div id="InfoTab">
            <div id="ViewOnMap" onclick="ViewADU()">VIEW ON MAP</div>
        </div>
    </div>
    <div id="SICDetails">
        <div id="SICImages">
            <img src="img/sic1.jpg"/>
            <img src="img/sic2.jpg"/>
            <img src="img/sic3.jpg"/>
        </div>
    </div>
    <div id="HomeDetails">
        <div id="HomeImages">
            <img src="img/home1.jpg"/>
            <img src="img/home2.jpg"/>
            <img src="img/home3.jpg"/>
        </div>
    </div>                  
</div>

这是生成标记

的javascript
for (var i = 0; i < ManilaPlaces.length; i++) {
    var place = ManilaPlaces[i];
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(place[1], place[2]),
        map: map,
        icon: PlaceMarker,
        title: place[0],
        zIndex: place[4]
    });
    // Add marker to array
    ManilaMarkers.push(marker);
}

这个产生信​​息窗

function ADUInfo() {
    var contentString = '<div id="content">' +
        '<div id="siteNotice">' +
        '</div>' +
        '<h1 id="firstHeading" class="firstHeading"><img src="lodging.png"> ADU</h1>' +
        '<div id="bodyContent">' +
        '<p>text here ' +
        'text here</p>' +
        '</div>' +
        '</div>';
    ManilaInfoWindows[0] = new google.maps.InfoWindow({
        content: contentString
    });
    var ADUmarker = ManilaMarkers[0];
    //Marker Zoom and Closing of other infowindow
    ADUmarker.setMap(map);
    google.maps.event.addListener(ADUmarker, 'click', function () {
        map.setZoom(17);
        map.setCenter(ADUmarker.getPosition());
        ManilaInfoWindows[0].open(map, ADUmarker);

    });
}

下面的函数是我的代码不起作用注意ShowMap()执行一个函数,它在屏幕上显示它成功完成的地图,包括map.setZoom(17),但它不执行第三个行代码

function ViewADU() {
    ShowMap();
    map.setZoom(17);
    map.setCenter(ADUmarker.getPosition());
}

代码中的所有内容都起作用,除了那个之外,一直试图弄明白但没有任何作用。

0 个答案:

没有答案