Google 地图标记仅在特定字段中显示标记

Question

我在编写程序方面是个新手。所以我的任务是在 google 地图卡片中绘制标记。现在这只是我在 java 脚本中完成的 2 个标记，这没问题，但是关于这个程序的未来，我需要在 java 程序中使用它来完成它的任务绘制 2 个标记，但我必须在 ma 卡中限制一个矩形形状，在这种形状下，它应该只有一个标记，另一个标记在场地外，不应该可见！！！！这一切都应该写在 java 程序而不是 java 脚本中。背景是，这将在不久的将来成为一个类似飞行跟踪器的跟踪器，在 xml 文件中保存多个标记的坐标，并且该坐标应该像真实的实时飞行跟踪器一样自动刷新。对于下一步，我还通过 websockets 将 java 脚本与我的 java 程序连接起来。

但起初我需要帮助来编写这个 java 程序以及如何将它与我显示 google 地图卡片的 java 脚本连接。

感谢您的帮助！！！

这是我的 java 脚本的代码，带有 2 个点和新的 java 程序，我只想在澳大利亚显示标记！！！我在这个例子中展示的两品脱来自 XML 文件，这没关系，但是这一切应该发生在 java 程序中而不是在 java 脚本中。

java脚本代码：

<!DOCTYPE html >
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>tracker</title>
    <style>

      #map {
        height: 100%;
      }

      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>

  </head>

  <body>
       <div id="map"></div>


    <script>

        function initMap() {                   
        var map = new google.maps.Map(document.getElementById('map'), {
          center: new google.maps.LatLng(52.556603, 30.244127),            
          zoom: 2           //Zoom-Stufe der Karte beim Laden der Seite
        });



        var infoWindow = new google.maps.InfoWindow;           


          downloadUrl("vesselxml4.xml", function(data) {          
            var xml = data.responseXML;                           
            var markers = xml.documentElement.getElementsByTagName('marker'); 
            Array.prototype.forEach.call(markers, function(markerElem) {       
             var name = markerElem.getAttribute('name');               
              var address = markerElem.getAttribute('address');         
              var point = new google.maps.LatLng(                       
                  parseFloat(markerElem.getAttribute('lat')),
                  parseFloat(markerElem.getAttribute('lng')));

              var infowincontent = document.createElement('div');       
              var strong = document.createElement('strong');            // 
              strong.textContent = name                                 
              infowincontent.appendChild(strong);
              infowincontent.appendChild(document.createElement('br'));

              var text = document.createElement('text');               
              text.textContent = address                                
              infowincontent.appendChild(text);


              var marker = new google.maps.Marker({                     
                map: map,
                position: point,
                //icon: {                                                 
                    //path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
                    //scale: 3
                //}
                //

                });



              marker.addListener('click', function() {                 
                infoWindow.setContent(infowincontent);
                infoWindow.open(map, marker);
              });
            });
          });
        }



      function downloadUrl(url, callback) {                        
        var request = window.ActiveXObject ?
            new ActiveXObject('Microsoft.XMLHTTP') :
            new XMLHttpRequest;

        request.onreadystatechange = function() {                          

          if (request.readyState == 4) {
            request.onreadystatechange = doNothing;
            callback(request, request.status);
          }
        };

        request.open('GET', url, true);
        request.send(null);
      }

      function doNothing() {}

      </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDuZVG0Z9Ei7ubm5bkAfPsYUI-Wm8C_c-0&callback=initMap">
    </script>
  </body>
</html>

xml 文件：

<markers>
<marker id="1"   lng="131.044"  lat="-25.363"   name="JUN XING 1"   />
<marker id="2"   lng="101.786155"  lat="26.200722"   name="NO PLANS"   />
</markers>

Answer 1

如何在 Google 地图 API v3 中设置标记：

var marker1 = new google.maps.Marker({
  position: {lat: -25.363, lng: 131.044},
  map: map,
  title: 'JUN XING 1'
});


var marker2 = new google.maps.Marker({
  position: {lat: 26.200722, lng: 101.786155},
  map: map,
  title: 'NO PLANS'
});

在分配 map 后，将其插入底部的函数 initMap() 中。

Google 地图标记仅在特定字段中显示标记

Google Maps marker only show marker in specific field

javascript

google-maps-api-3

google-maps-markers