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

时间:2017-04-21 11:34:42

标签: javascript google-maps-api-3 google-maps-markers

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

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

感谢您的帮助!!!

以下是我的java脚本的代码,包含2个点和新的java程序,我只想在澳大利亚显示标记! 我在这个例子中展示的两个品脱来自XML文件,这没关系,但是这个应该发生在java程序中,而不是在javascript中。

javascript代码:

<!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>

1 个答案:

答案 0 :(得分:0)

如何在Google Maps 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()中。