时间戳

首页 > 解决方案 > 谷歌地图中带有链接的按钮

javascript - 谷歌地图中带有链接的按钮

问题描述

对不起我的英语不好。在我的空闲时间，我在一些与谷歌地图集成的系统上工作。

我的 Google 地图上的按钮有问题。 https://www.w3schools.com/code/tryit.asp?filename=FRFH8RVD00NH 我无法从标记插入带有纬度和经度的按钮链接。我尝试插入但无法正常工作。我希望这个按钮是 index.php 的链接：

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

请给我一些提示。

标签： javascripthtmlgoogle-maps

解决方案

这是您正在寻找的代码笔吗：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>

让我知道。

推荐阅读