Кнопка в Google Maps со ссылкой

Извините за мой английский. В свободное время я работаю над какой-то системой, которая интегрирована с Google Maps.

У меня проблема с кнопкой на моей карте Google. https://www.w3schools.com/code/tryit.asp?filename=FRFH8RVD00NH Не могу вставить в кнопку ссылку с Широтой и Долготой от маркера. Я пробовал вставить, но доза работала некорректно. Я хочу, чтобы эта кнопка была ссылкой на index.php:

/index.php?newlat=xx.xxxx&newlng=xx.xxxx

Пожалуйста, дайте мне совет.

У вас есть событие щелчка на карте. Я щелкаю карту, и информационные окна показывают содержимое в том виде, в каком оно задумано. Событие щелчка отсутствует на маркере. В чем вопрос? Вы действительно хотите ссылку вместо кнопки? Или вы хотите, чтобы кнопка ссылалась на клик? Если позже, вы можете захотеть использовать тег скрипта или сделать то, что я сделал бы ... изучите DOM и напишите JavaScript отдельно, убедившись, что вы прикрепляете событие после того, как элемент существует.

StackSlave 18.05.2018 08:47
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
1
211
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Это то, что вы ищете Code Pen: https://codepen.io/anon/pen/MGzZzE

   <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'      
    'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>      
<html xmlns = "http://www.w3.org/1999/xhtml">      
    <head>      
        <meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" />      
        <style type = "text/css" media = "all">@import "/style/Przyklad.css";</style>
        <title>Przykład</title>      
        <style>
        .button {
    display: block;
    width: 115px;
    height: 25px;
    background: #4E9CAF;
    padding: 10px;
    text-align: center;
    border-radius: 5px;
    color: white;
    font-weight: bold;
}
</style>


        <script src = "https://maps.google.com/maps/api/js?sensor=false" type = "text/javascript"></script>    
            <script type = "text/javascript">   

            var mapa; // obiekt globalny
            var dymek = new google.maps.InfoWindow();

            function mapaStart()  
            {  
                var wspolrzedne = new google.maps.LatLng(52.240893, 21.022241);
                var opcjeMapy = {
                    zoom: 15,
                    center: wspolrzedne,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    disableDefaultUI: true
                };
                mapa = new google.maps.Map(document.getElementById("mapka"), opcjeMapy);            

                google.maps.event.addListener(mapa,'click',function(zdarzenie)
                {
                    if (zdarzenie.latLng)    
                    {
                    var linkvalue ='/index.php?newlat=' + zdarzenie.latLng.lat()+'&newlng='+zdarzenie.latLng.lng();
                    var link = '<a class = "button" href ='+ linkvalue + '>Link To</a>';
                    dymek.setContent(link);
                    dymek.setPosition(zdarzenie.latLng);  
                    dymek.open(mapa); 
                    }
                });

                google.maps.eve
            }  

            function dodajMarker(wspolrzedne)
            {
                var marker = new google.maps.Marker({
                    position: wspolrzedne,
                    map: mapa
                });
                google.maps.event.addListener(marker,'click',function(zdarzenie)
                {
                    dymek.setContent('To jest Twoje<br />Współrzędne GPS markera:<br />'+marker.getPosition());  
                    dymek.setPosition(marker.getPosition());  
                    dymek.open(mapa);
                });
            }

        </script>   
    </head>      
    <body onload = "mapaStart()">    



        <div id = "mapka" style = "width: 700px; height: 500px; border: 1px solid black; background: gray;">   

        </div>   
        <p id = "info">
            <!-- menu -->
        </p>
    </body>      
</html>  

Дай мне знать.

Почти! Но я не могу сделать такой код: <button OnClick = "location.href = index.php? Newlat = '+ zdarzenie.latLng.lat () +' & ne‌ wlng = '+ zdarzenie.lat‌ Lng. lng () '"> LinkTo </button> в этом JS.

Suchyman 18.05.2018 08:59

Обновил ручку. Теперь ваша кнопка указывает на нужный файл php. codepen.io/anon/pen/MGzZzE

VikDev 18.05.2018 09:15

Я обновил свой ответ. Пожалуйста, загляните в этот код.

VikDev 18.05.2018 09:19

Ты мой герой! Спасибо! Спасибо! Спасибо!

Suchyman 18.05.2018 09:56

Другие вопросы по теме