Question

我想问你一个解决这个问题的方法。我有一个带有变量的JS，它由JAVA应用程序（即JAVA编写器加入线程）更新，之后我从该变量中获取坐标，然后为我的谷歌地图创建一个新的对象Marker。 问题是标记不会改变位置，只有当我刷新整个页面时它才会改变（我不想这样做）。

这里的代码更清晰。 inputData.js，其中变量由java应用程序写入

var newMarker = {'latitude':38.25705300000004,'longitude': 140.83760400000006};

用于显示地图的html页面

<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <title>Simple markers</title>
        <style>
            html, body, #map-canvas {
                height: 100%;
                margin: 0px;
                padding: 0px
            }
        </style>
        <script type="text/javascript"
                src="https://maps.googleapis.com/maps/api/js?key=MYKEY">
        </script>   
        <script type="text/javascript" src="inputData.js"></script>
        <script>
                    var map;
                    var sendai = new google.maps.LatLng(38.259535, 140.846816);
                    var lastPosition;
                    var image = 'images/circle-16.png';

                    function initialize() {
                        var mapOptions = {
                            zoom: 12,
                            center: sendai,
                            mapTypeId: google.maps.MapTypeId.ROADMAP};

                        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
                    }

                    setInterval(refreshData, 2000);

                    function refreshData() {
                        var marker = new google.maps.Marker({
                            map: map,
                            icon: image,
                            draggable: false
                        });
                        marker.setPosition(new google.maps.LatLng(newMarker.latitude, newMarker.longitude));
                        map.setCenter(new google.maps.LatLng(newMarker.latitude, newMarker.longitude));
                        map.setZoom(18);
                    }

                    google.maps.event.addDomListener(window, 'load', initialize);

        </script>
    </head>
    <body>
        <div id="map-canvas"></div>
    </body>
</html>

如果我这样打开我的页面一切正常，但是当我更改脚本“inputData.js”时，标记不会改变位置。另一方面，方法setCenter似乎正常工作。

请帮帮我！

Answer 1

您不需要每次都创建新的标记实例。用这个更新你的代码并尝试：

var map;
var sendai = new google.maps.LatLng(38.259535, 140.846816);
var lastPosition;
var image = 'images/circle-16.png';

function initialize() {
    var mapOptions = {
        zoom: 12,
        center: sendai,
        mapTypeId: google.maps.MapTypeId.ROADMAP};

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}

var marker;
marker = new google.maps.Marker({
      map: map,
      icon: image,
      draggable: false
});
marker.setPosition(new google.maps.LatLng(newMarker.latitude, newMarker.longitude));
map.setCenter(new google.maps.LatLng(newMarker.latitude, newMarker.longitude));
map.setZoom(18);

setInterval(refreshData, 2000);
function refreshData() {
     marker.setPosition(new google.maps.LatLng(newMarker.latitude, newMarker.longitude));
     map.setCenter(new google.maps.LatLng(newMarker.latitude, newMarker.longitude));
     map.setZoom(18);
}

google.maps.event.addDomListener(window, 'load', initialize);

Answer 2

您需要重新加载更新的脚本才能获得更新的位置：

function initialize() {
    var mapOptions = {
          zoom: 18,
          center: sendai,
          mapTypeId: google.maps.MapTypeId.ROADMAP},
        map = new google.maps.Map(document.getElementById('map-canvas'), 
                                  mapOptions),
        //we will store the LatLng here
        pos = new google.maps.MVCObject(),
        //use a single marker with updated position
        marker  = new google.maps.Marker();

    //set the latLng of the MVCObject
    pos.set('latLng',new google.maps.LatLng(newMarker.latitude,
                                            newMarker.longitude));
    //bind the markers position to the latLng of the MVCObject
    marker.bindTo('position',pos,'latLng');

    marker.setMap(map);

    setInterval(function(){
          //the currently loaded script
      var script=document.querySelector('script[src^="inputData.js"]'),
          //the updated script
          update=document.createElement('script');
          //load-handler for the updated script
          google.maps.event.addDomListenerOnce(update,'load',function(){
            pos.set('latLng',new google.maps.LatLng(newMarker.latitude,
                                                    newMarker.longitude));
            map.setCenter(pos.get('latLng'));
            map.setZoom(18);
          });
          //replace current script with updated script 
          script.parentNode.replaceChild(update,script);
          //load update
          update.src='inputData.js?'+new Date().getTime();
    },2000);

}

来自JS的Google Map API标记更新

2 个答案: