0

Google マップで 2 つのカスタム ボタンを作成してマーカーを作成しました。ボタン 1 をクリックすると 1 つのアイコンでマーカーが作成され、ボタン 2 をクリックすると別のアイコンでボタンが作成されますが、最初にボタンをクリックすると作成されます。マーカーを別のボタンに配置し、別のマーカーを作成すると、2 つのボタンが上下に作成されます。理由はわかりませんが、これは私のコードです：

これは私の例です 

var map, ren, ser;

var marker;
var infowindow;
var doMark = false ;
var doMark2 = false;



//Função de Inicio

function goma()
{
    if (doMark == 0)
    {
        doNothing();
    }
    var mapDiv = document.getElementById('mappy');

    var mapOptions = {
    zoom: 12, 

    center: new google.maps.LatLng(-23.563594, -46.654239),
    mapTypeId : google.maps.MapTypeId.ROADMAP
    }

    map = new google.maps.Map( mapDiv, mapOptions );


    var teste = document.createElement('DIV');
    teste.style.padding = '1px';
    teste.style.border = '1px solid #000';
    teste.style.backgroundColor = 'white';
    teste.style.cursor = 'pointer';
    teste.innerHTML = '<img src="http://i47.tinypic.com/2dlp2fc.jpg" border="0" alt="Image and video hosting by TinyPic">';
    teste.index = 1;


    map.controls[google.maps.ControlPosition.TOP_RIGHT].push(teste);

        var rest = document.createElement('DIV2');
    rest.style.padding = '1px';
    rest.style.border = '1px solid #000';
    rest.style.backgroundColor = 'white';
    rest.style.cursor = 'pointer';
    rest.innerHTML = '<img src="http://i45.tinypic.com/2yua8ns.png" border="0">';
    rest.index = 1;
    map.controls[google.maps.ControlPosition.TOP_RIGHT].push(rest);

    google.maps.event.addDomListener(teste, 'click', function() 
    {
        doMark = true;
        doMark2 = false;
        markNow();
    });
    google.maps.event.addDomListener(rest, 'click', function() 
    {

        doMark = false;
        doMark2 = true;
        markNow2();
    });

}   

var string = JSON.stringify(data2)

function downloadUrl(url, callback) 
{
    var request = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
    request.open('POST',url);
    request.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    request.send('command=save&marker='+string)
    request.onreadystatechange = function()
    { 
        if(request.readyState==4) 
        {
            if(request.responseText.indexOf('bien')+1)
            {
                alert('Mapa Atualizado !');
            }
            else
            {
                alert(request.responseText);
            }
        }
    }
}

function markNow()
{
    //doMark2 = true;
    if (doMark == true)
    {

        google.maps.event.addListener(map, "click", function(event) 
        {

            marker = new google.maps.Marker({ position: event.latLng, map: map});
            if (doMark ==1)
            google.maps.event.addListener(marker, "click", function() 
            {
                infowindow.open(map, marker);
            });
        });
        var html = "<table>" +
           "<tr><td>Nome:</td> <td><input type='text' id='name'/> </td> </tr>" +
           "<tr><td>Endereco:</td> <td><input type='text' id='address'/></td> </tr>" +
           "<tr><td>Tipo:</td> <td><select id='type'>" +
           "<option value='oficina' SELECTED>oficina</option>" +
           "<option value='restaurante'>restaurante</option>" +
           "</select> </td></tr>" +
           "<tr><td></td><td><input type='button' value='Salvar' onclick='saveData()'/></td></tr>";

infowindow = new google.maps.InfoWindow({content: html});
    }
}

function markNow2()
{

    if (doMark2 == true)
    {

        google.maps.event.addListener(map, "click", function(event) 
        {
            doMark = 0
            marker = new google.maps.Marker({ position: event.latLng, map: map, icon: 'http://i45.tinypic.com/2yua8ns.png' });
            google.maps.event.addListener(marker, "click", function() 
            {
                infowindow.open(map, marker);
            });
        });
        var html = "<table>" +
           "<tr><td>Nome:</td> <td><input type='text' id='name'/> </td> </tr>" +
           "<tr><td>Endereco:</td> <td><input type='text' id='address'/></td> </tr>" +
           "<tr><td>Tipo:</td> <td><select id='type'>" +
           "<option value='oficina' SELECTED>restaurante</option>" +
           "<option value='restaurante'>oficina</option>" +
           "</select> </td></tr>" +
           "<tr><td></td><td><input type='button' value='Salvar' onclick='saveData()'/></td></tr>";

infowindow = new google.maps.InfoWindow({content: html});
    }

}
4

1 に答える 1

1

You have 2 functions markNow() and markNow2() which together create one marker on top of the other. In markNow() the marker should be chosen within the function.The rest of the code is equivalent in both functions.

Delete markNow2() and change markNow() to 

function markNow(){   

    google.maps.event.addListener(map, "click", function(event) 
    {
        if (doMark == true){
        alert("Marker 1 Chosen");
        marker = new google.maps.Marker({ position: event.latLng, map: map});
        }
        if (doMark2 == true){
        alert("Marker 2 Chosen");
        marker = new google.maps.Marker({ position: event.latLng, map: map, icon: 'http://i45.tinypic.com/2yua8ns.png' });
        }
        //if (doMark ==1)
        google.maps.event.addListener(marker, "click", function() 
        {
            infowindow.open(map, marker);
        }
        );
    }
    );
    var html = "<table>" +
       "<tr><td>Nome:</td> <td><input type='text' id='name'/> </td> </tr>" +
       "<tr><td>Endereco:</td> <td><input type='text' id='address'/></td> </tr>" +
       "<tr><td>Tipo:</td> <td><select id='type'>" +
       "<option value='oficina' SELECTED>oficina</option>" +
       "<option value='restaurante'>restaurante</option>" +
       "</select> </td></tr>" +
       "<tr><td></td><td><input type='button' value='Salvar' onclick='saveData()'/>     </td></tr>";

  infowindow = new google.maps.InfoWindow({content: html});


}

This allows only 1 marker.

In function goma() Change last from markNow2(); to markNow();

于 2012-09-11T19:39:49.653 に答える