JS的Google Map API标记更新

Question

I would like to ask you a solution for this problem. 我想问你一个解决这个问题的方法。 I have a JS with a variable inside that is updated overtime by a JAVA application (ie JAVA writer into a thread), after that I take the coordinates from that variable and I create a new object Marker for my google maps. 我有一个JS，其中包含一个变量，该变量由JAVA应用程序（即JAVA writer写入线程）随时间更新，之后，我从该变量中获取坐标，并为我的Google地图创建了一个新对象Marker。 The problem is that the marker does not changes position, it changes only if I refresh the whole page (I dont want to do this). 问题是标记不会改变位置，只有当我刷新整个页面时才改变（我不想这样做）。

Here's the code to be more clear. 这是更清楚的代码。 The inputData.js where the variable is written by the java application inputData.js，其中变量是由Java应用程序编写的

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

my html page used to display the map 我的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>

If I open my page like this everything work but when I change the script "inputData.js" the marker does not changes position. 如果我像这样打开页面，一切正常，但是当我更改脚本“ inputData.js”时，标记不会更改位置。 The method setCenter on the other hand seems to work properly. 另一方面，方法setCenter似乎可以正常工作。

Help me please! 请帮帮我！

Answer 1

You don't need to create new instance of marker every time. 您无需每次都创建标记的新实例。 Update your code with this and try: 以此更新您的代码，然后尝试：

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

You'll need to reload the updated script to get the updated position: 您需要重新加载更新的脚本以获取更新的位置：

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