Question

每次点击我的标记时，我都会尝试创建类似弹出窗口的内容;弹出窗口将在当前窗口内，但窗口的其余部分完全正常工作。

从这开始： http://imgur.com/pvU4zoz 如果我单击标记我想实现这样的事情： http://imgur.com/kX3aEIc

这是我的代码：

<!DOCTYPE html>
<html style="height:100%;">
<body style="height:100%;margin:0;padding:0;">
    <div id="googleMap" style="width:100%;height:100%;"></div>
    <script>
    var map;
        function myMap() {
            var mapProp= {
                center:new google.maps.LatLng(51.508742,-0.120850),
                zoom:5,
            };
            map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

        }
    </script>
    <script type="text/javascript">
        function TCPConnection()
        {

            var connection = new WebSocket('ws://127.0.0.1:8001');
            // When the connection is open, send some data to the server
            connection.onopen = function () {
                connection.send('Ping'); // Send the message 'Ping' to the server
            };

            // Log errors
            connection.onerror = function (error) {
                console.log('WebSocket Error ' + error);
            };
            var contentString = '<p><b>TEST</b></p>'
            var infoWindow = new google.maps.InfoWindow({
                content: contentString
            });

            // Log messages from the server
            connection.onmessage = function (e) {
                var marker = new google.maps.Marker({
                    position: {lat: 51.508742, lng:-0.120850},
                    map: map,
                    title: 'Test marker',
                    label: 'A'
                });
                marker.addListener('click',function(){
                    infoWindow.open(map,marker);
                    alert("Test\nTest?");

                });
                console.log('Server: ' + e.data);

            };
        }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=[MYKEY]&callback=myMap"></script>
    <script> TCPConnection();</script>
</body>

Answer 1

使用css和一点点javascript（如果需要），您的问题很容易解决。

HTML

<div id="myPopUp">
    TEST
</div>

CSS

#myPopUp {
  display: none;
  position: absolute;
  transform: translateX(-50%);
  background-color: #FFF;
  border: 1px solid #DEDEDE;
  border-radius: 3px;
  z-index: 99;
}

的Javascript

function showPopUp(x, y, text, duration) {
  var myPopUp = document.getElementById("myPopUp");
  myPopUp.style.display = 'block';
  myPopUp.style.left = x + 'px';
  myPopUp.style.top = y + 'px';
  myPopUp.innerHTML = text;
  if (duration) { // duration in ms *optionnal
    window.setTimeout(hidePopUp, duration);
  }
}

function hidePopUp() {
  var myPopUp = document.getElementById("myPopUp");
  myPopUp.style.display = 'none';
}

当您在标记上添加点击事件时，您可以在回调参数中添加一个事件。点击（或标记）的位置应该在其中。

marker.addListener('click',function(event){
 infoWindow.open(map,marker);
 console.log(event); // look in the console to find the position you need
 showPopUp(100,100, 'I m here :D', 5000);
 // then call the function showPopUp with the good args
});

动画

您可以在弹出窗口中添加漂亮的动画，如下所示：

#myPopUp {
  top: -100vh,
  position: absolute;
  transform: translateX(-50%);
  background-color: #FFF;
  border: 1px solid #DEDEDE;
  border-radius: 3px;
  transition: top 0.3s;
  z-index: 99;
}

现在在showPopUp和hidePopUp中删除显示分配行。然后你添加hidePopUp：

myPopUp.style.top = '-100vh';

您可以使用left属性或更改top / left样式的默认值来更改动画的方向。您还可以使用不透明度或变换来播放高级动画。

固态窗口内的HTML JS弹出窗口

1 个答案: