【问题标题】:Google Map One Infobox OpenGoogle Map One 信息框打开
【发布时间】:2013-09-20 20:41:49
【问题描述】:

我正在建立一个目录,在这个例子中它是一个医生的目录。我创建了一个名为“位置”的 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

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

过去三天我一直在寻找解决方案,但找不到,所以我非常感谢一些帮助。这是谷歌地图代码:

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

您的帮助将不胜感激。谢谢。

【问题讨论】:

  • 你检查过控制台是否有任何 JS 错误吗?另外,根据您的调试,实际上是什么部分不起作用-是点击,变量初始化......等等?
  • 一切正常 Gautam Bhutani。我希望在搜索功能中输入的医生姓名/诊所的标记上默认“仅”打开信息框,而所有其他信息框仅在单击相应的标记时才显示(这已经在工作)。感谢您的回复。

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


【解决方案1】:

除非我有误解,否则您可以遍历标记,直到标题与搜索文本匹配,然后在该标记上打开相应的信息框。比如:

$('#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]);
    }
});

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

【讨论】:

  • 感谢乔希的回复。打开信息框不是问题,它是在谷歌地图上设置所有的标记,所有信息框都被隐藏,只有在点击相应的标记时才显示,而“只有一个”信息框是打开的,信息框对应的名称在搜索功能中输入的医生/诊所。
  • 嗨拉胡罗伊。我不记得了。已经一年多了。抱歉,我帮不上忙。
猜你喜欢
  • 2018-04-06
  • 2013-01-07
  • 1970-01-01
  • 2017-09-10
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-03-29
  • 1970-01-01
相关资源
最近更新 更多