JS的Google Map API標記更新

Question

我想問你一個解決這個問題的方法。 我有一個JS，其中包含一個變量，該變量由JAVA應用程序（即JAVA writer寫入線程）隨時間更新，之后，我從該變量中獲取坐標，並為我的Google地圖創建了一個新對象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 個解決方案

解決方案1
0 2014-10-29 08:11:10

解決方案2
0 已采納 2014-10-29 09:18:42

JS的Google Map API標記更新

問題描述

2 個解決方案

解決方案1 0 2014-10-29 08:11:10

解決方案2 0 已采納 2014-10-29 09:18:42

解決方案1
0 2014-10-29 08:11:10

解決方案2
0 已采納 2014-10-29 09:18:42