Google Map One Infobox Open

时间:2013-09-20 20:41:49

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

我正在构建一个目录,在这个例子中,它是医生的目录。我创建了一个名为“locations”的javascript数组。访问者可以查看地图上的复选框,以选择应该显示哪种医生。

这是在for循环中循环的位置数组的示例

var locations = [
    [0, 'Total Care', 1, 0, 0, 0, 0, 0, 'Lake Elsinore', '92530', 'CA', 33.6603, -117.3830, '(951) 674-8779', 1],
    ... etc
    ];

这解释了每个键

locations[i][0] = business claimed or not (0 = unclaimed and 1 is claimed)  
locations[i][1] = name  
locations[i][2] = if general practitioner = 1, else = 0  
locations[i][3] = if surgeon = 1, else = 0  
locations[i][4] = if cardiologist = 1, else = 0  
locations[i][5] = if urologist = 1, else = 0    
locations[i][6] = if gynecologist = 1, else = 0  
locations[i][7] = if pulmonologist = 1, else = 0  
locations[i][8] = city  
locations[i][9] = zip code  
locations[i][10] = state  
locations[i][11] = latitude  
locations[i][12] = longitude  
locations[i][13] = phone number  
locations[i][14] = z-index

一切正常。我有一个搜索功能,所以访问者可以按名称搜索。在下面的谷歌地图代码中,我想找到一种方法,在搜索功能中输入的医生标记上打开infoBox,例如
if(locations [i] [1] ==“doctor name”){
代码在这里}

我一直试图找到过去三天的解决方案而找不到它,所以我真的很感激一些帮助。这是Google地图代码:

var infoBox = null;  
function initialize()  
    {  
    var centerMap = new google.maps.LatLng(33.6603, -117.3830);  
    var mapOptions = {zoom: 11,center: centerMap,mapTypeId: google.maps.MapTypeId.ROADMAP}  
    var map = new google.maps.Map(document.getElementById('googleMap'), mapOptions);  
    setMarkers(map, locations);  
    }

function setMarkers(map, markers)  
    {  
    var image = {url: 'images/marker.png',size: new google.maps.Size(17, 23),origin: new google.maps.Point(0,0),anchor: new google.maps.Point(8, 23)};  
    gpr = $('#check1').is(':checked') ? 1 : 0; // general practitioner  
    srg = $('#check2').is(':checked') ? 1 : 0; // surgeon  
    car = $('#check3').is(':checked') ? 1 : 0; // cardiologist  
    uro = $('#check4').is(':checked') ? 1 : 0; // urologist  
    gyn = $('#check5').is(':checked') ? 1 : 0; // gynecologist  
    pul = $('#check6').is(':checked') ? 1 : 0; // pulmonologist

    for (var i = 0; i < markers.length; i ++)  
        {  
        var locations = markers[i];  
        var siteLatLng = new google.maps.LatLng(locations[11], locations[12]);  
        var boxText = document.createElement('div');  
        boxText.style.cssText = 'some styling';  
        link = locations[1].replace(' ','_');
        link = link.toLowerCase();  

        // find out if this genre of doctor was searched for  
        setMarker = 0;  
        if (gpr == 1){if (locations[2] == 1){setMarker = 1;}}  
        if (srg == 1){if (locations[3] == 1){setMarker = 1;}}  
        if (car == 1){if (locations[4] == 1){setMarker = 1;}}  
        if (uro == 1){if (locations[5] == 1){setMarker = 1;}}  
        if (gyn == 1){if (locations[6] == 1){setMarker = 1;}}  
        if (pul == 1){if (locations[7] == 1){setMarker = 1;}}  

        // if one of the checkboxes was checked  
        if (setMarker == 1)  
            {
            if (locations[0])
                {  
                boxText.innerHTML = 'some html with link'; // claimed business  
                }  
            else  
                {  
                boxText.innerHTML = 'some html without link'; // unclaimed business  
                }  
            var infoBoxOptions = {content: boxText,disableAutoPan: false,maxWidth: 0,pixelOffset: new google.maps.Size(5, -80),zIndex: locations[14],boxStyle: {background: "url('images/tip.png') no-repeat",opacity: 0.9,width: "405px",height: "75px",border: '0px solid #900'},closeBoxMargin: "13px 5px 5px 5px",closeBoxURL: "images/close.gif",infoBoxClearance: new google.maps.Size(1, 1),isHidden: false,pane: "floatPane",enableEventPropagation: false};
            var marker = new google.maps.Marker({position: siteLatLng,map: map,title: locations[1],zIndex: locations[14],icon: image,html: boxText});  
            google.maps.event.addListener(marker, 'click', function (e) {infoBox.setContent(this.html);infoBox.open(map, this);});  
            var infoBox = new InfoBox(infoBoxOptions);  
            }  
        }  
    }  

非常感谢您的帮助。谢谢。

1 个答案:

答案 0 :(得分:0)

除非我误解,否则您可以循环浏览标记,直到标题与搜索文本匹配,然后打开该标记上的相应信息框。类似的东西:

$('#searchButton').click(function() {
    var searchText = $('#searchBox').val();
    for (var i = 0; i < markers.length; i++) {
        if (markers[i].title.indexOf(searchText) > -1)
            infoBoxes[i].open(map, markers[i]);
    }
});

此示例假设您有两个现有的并行标记数组及其相应的信息框。