如何将kml图层复选框添加到自定义控制面板

时间:2013-10-02 10:39:30

标签: google-maps-api-3 jquery-gmap3

有一些问题。我尝试将复选框添加到自定义控制面板,但kml图层不活动?我做错了什么?

我的代码示例jsfiddle.net/Gv2bN /

1 个答案:

答案 0 :(得分:0)

var map_search =    "<div id='map-search'>"+
                // "<input type='text' style='width: 140px' id='search' placeholder='search'/>"+
                "<label><input type='checkbox' value='indoor' id='indoor'  checked/> Indoor </label>"+
                "<br/>"+
                "<label><input type='checkbox' value='outdoor' id='outdoor'  checked/>  Outdoor </label>"+
                "</div>";

function SearchControl(controlDiv, map) {

  // Set CSS styles for the DIV containing the control
  // Setting padding to 5 px will offset the control
// from the edge of the map
controlDiv.style.padding = '5px';

// Set CSS for the control border
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = '#333';
controlUI.style.borderStyle = 'solid';
controlUI.style.borderWidth = '2px';
controlUI.style.width = '150px';
controlUI.style.cursor = 'pointer';
controlDiv.appendChild(controlUI);

// Set CSS for the control interior
var controlText = document.createElement('div');
controlText.style.fontFamily = 'Arial,sans-serif';
controlText.style.color = 'white';
controlText.style.fontSize = '12px';
controlText.style.paddingLeft = '4px';
controlText.style.paddingRight = '4px';
controlText.innerHTML = map_search;
controlUI.appendChild(controlText);

}
$(function({... 
//your map call here
    var map = $("#map-canvas").gmap3({
        get: {
            name:"map",
        }
    });    

var searchControlDiv = document.createElement('div');
var searchControl = new SearchControl(searchControlDiv, map);
searchControlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(searchControlDiv);
});

您可以获得自定义控件。