Question

当我点击一个按钮时，它会为我提供数据库中的标记并用它们绘制一条线。我需要的是一个显示该行的按钮，当我再次点击它删除该行。有人能帮助我吗？

按钮：

function buttonLinhaBigDest(buttonLinhaBigDestDiv, map_canvas) {

// Control border
var buttonLinhaBigDestUI = document.createElement('div');
buttonLinhaBigDestUI.style.backgroundColor = '#fff';
buttonLinhaBigDestUI.style.border = '1px solid #717B87';
buttonLinhaBigDestUI.style.borderRadius = '3px';
buttonLinhaBigDestUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
buttonLinhaBigDestUI.style.cursor = 'pointer';
buttonLinhaBigDestUI.style.marginBottom = '5px';
buttonLinhaBigDestUI.style.textAlign = 'center';
buttonLinhaBigDestUI.title = 'markers';
buttonLinhaBigDestDiv.appendChild(buttonLinhaBigDestUI);

// Control interior
var buttonLinhaBigDestText = document.createElement('div');
buttonLinhaBigDestUI.style.color = 'rgb(25,25,25)';
buttonLinhaBigDestUI.style.fontFamily = 'Roboto,Arial,sans-serif';
buttonLinhaBigDestUI.style.fontSize = '13px';
buttonLinhaBigDestUI.style.lineHeight = '38px';
buttonLinhaBigDestUI.style.paddingLeft = '5px';
buttonLinhaBigDestUI.style.paddingRight = '5px';
buttonLinhaBigDestUI.innerHTML = 'markers';
buttonLinhaBigDestUI.appendChild(buttonLinhaBigDestText);

var listener = google.maps.event.addDomListener(buttonLinhaBigDestUI, 'click', function() {
  $.getJSON('/markers/', function(data) {
      var line_lat_lon = [];
        $.each( data.markers, function(i, line) {
                line_lat_lon.push(new google.maps.LatLng(line.latitude, line.longitude));
                var line = new google.maps.Polyline({
                    path: line_lat_lon,
                    strokeColor: "#0000FF",
                    strokeOpacity: 0.5,
                    strokeWeight: 2,
                    map: map_canvas,
            });         
        });
      });

的index.html：

var map_canvas;
var santaCatarina = new google.maps.LatLng(-27.666885236556496, -51.15083105000002);

function initialize(url) {       
var myOptions = {
        zoom: 3,
        center: santaCatarina,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };    
var map_canvas = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

var buttonLinhaBigDestDiv = document.createElement('div');
var l_big_dest = new buttonLinhaBigDest(buttonLinhaBigDestDiv, map_canvas);

buttonLinhaBigDestDiv.index = 1;
map_canvas.controls[google.maps.ControlPosition.TOP_RIGHT].push(buttonLinhaBigDestDiv);


 } 
 google.maps.event.addDomListener(window, 'load', initialize);

JSON文件：

{"markers": [{"nome": "Passo Fundo", "longitude": "-52.71871618", "latitude": "-27.48408601", "sigla": "PFU", "nome_concessionaria": "ELETROSUL"}, {"nome": "Pato Branco", "longitude": "-52.67245134", "latitude": "-26.21026458", "sigla": "PTO", "nome_concessionaria": "COPEL"}, {"nome": "Porto Velho", "longitude": "-63.81863187", "latitude": "-8.797357069", "sigla": "PV", "nome_concessionaria": "ELETRONORTE"}, {"nome": "Santa Cruz1", "longitude": "-52.41756156", "latitude": "-29.75061037", "sigla": "SCR1", "nome_concessionaria": "CEEE"}

Answer 1

要切换该行，请创建一个全局变量来保存引用，然后将其map属性设置为null（如果它尚未为null）：

var line;
var listener = google.maps.event.addDomListener(buttonLinhaBigDestUI, 'click', function () {
    if (line && line.setMap) { // toggle it
        if (line.getMap() != null) line.setMap(null);
        else line.setMap(map_canvas);
    } else { // make the line
        $.getJSON('/markers/', function (data) {
          var data = jsonData;
          var line_lat_lon = [];
          $.each(data.markers, function (i, line) {
            line_lat_lon.push(new google.maps.LatLng(line.latitude, line.longitude));
          });
          line = new google.maps.Polyline({
            path: line_lat_lon,
            strokeColor: "#0000FF",
            strokeOpacity: 0.5,
            strokeWeight: 2,
            map: map_canvas
          });
        });
    }
});

proof of concept fiddle

代码段：

function buttonLinhaBigDest(buttonLinhaBigDestDiv, map_canvas) {

    // Control border
    var buttonLinhaBigDestUI = document.createElement('div');
    buttonLinhaBigDestUI.style.backgroundColor = '#fff';
    buttonLinhaBigDestUI.style.border = '1px solid #717B87';
    buttonLinhaBigDestUI.style.borderRadius = '3px';
    buttonLinhaBigDestUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
    buttonLinhaBigDestUI.style.cursor = 'pointer';
    buttonLinhaBigDestUI.style.marginBottom = '5px';
    buttonLinhaBigDestUI.style.textAlign = 'center';
    buttonLinhaBigDestUI.title = 'markers';
    buttonLinhaBigDestDiv.appendChild(buttonLinhaBigDestUI);

    // Control interior
    var buttonLinhaBigDestText = document.createElement('div');
    buttonLinhaBigDestUI.style.color = 'rgb(25,25,25)';
    buttonLinhaBigDestUI.style.fontFamily = 'Roboto,Arial,sans-serif';
    buttonLinhaBigDestUI.style.fontSize = '13px';
    buttonLinhaBigDestUI.style.lineHeight = '38px';
    buttonLinhaBigDestUI.style.paddingLeft = '5px';
    buttonLinhaBigDestUI.style.paddingRight = '5px';
    buttonLinhaBigDestUI.innerHTML = 'markers';
    buttonLinhaBigDestUI.appendChild(buttonLinhaBigDestText);

    var listener = google.maps.event.addDomListener(buttonLinhaBigDestUI, 'click', function () {
        if (line && line.setMap) { // toggle it
            if (line.getMap() != null) line.setMap(null);
            else line.setMap(map_canvas);
        } else { // make the line
            //$.getJSON('/markers/', function (data) {
            var data = jsonData;
            var line_lat_lon = [];
            $.each(data.markers, function (i, line) {
                line_lat_lon.push(new google.maps.LatLng(line.latitude, line.longitude));
            });
            line = new google.maps.Polyline({
                path: line_lat_lon,
                strokeColor: "#0000FF",
                strokeOpacity: 0.5,
                strokeWeight: 2,
                map: map_canvas
            });
            // });
        }
    });
}
var jsonData = {
    "markers": [{
        "nome": "Passo Fundo",
            "longitude": "-52.71871618",
            "latitude": "-27.48408601",
            "sigla": "PFU",
            "nome_concessionaria": "ELETROSUL"
    }, {
        "nome": "Pato Branco",
            "longitude": "-52.67245134",
            "latitude": "-26.21026458",
            "sigla": "PTO",
            "nome_concessionaria": "COPEL"
    }, {
        "nome": "Porto Velho",
            "longitude": "-63.81863187",
            "latitude": "-8.797357069",
            "sigla": "PV",
            "nome_concessionaria": "ELETRONORTE"
    }, {
        "nome": "Santa Cruz1",
            "longitude": "-52.41756156",
            "latitude": "-29.75061037",
            "sigla": "SCR1",
            "nome_concessionaria": "CEEE"
    }]
};


var map_canvas;
var line;
var santaCatarina = new google.maps.LatLng(-27.666885236556496, -51.15083105000002);

function initialize(url) {
    var myOptions = {
        zoom: 3,
        center: santaCatarina,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map_canvas = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var buttonLinhaBigDestDiv = document.createElement('div');
    var l_big_dest = new buttonLinhaBigDest(buttonLinhaBigDestDiv, map_canvas);

    buttonLinhaBigDestDiv.index = 1;
    map_canvas.controls[google.maps.ControlPosition.TOP_RIGHT].push(buttonLinhaBigDestDiv);


}
google.maps.event.addDomListener(window, 'load', initialize);

html, body, #map_canvas {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>

在同一按钮中显示/隐藏标记

1 个答案: