来自 JS 的 Google Map API 标记更新答案

【问题标题】：Google Map API marker update from JS来自 JS 的 Google Map API 标记更新
【发布时间】：2014-12-24 20:12:59
【问题描述】：

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

这里的代码更清楚。 java应用程序写入变量的inputData.js

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 方法似乎工作正常。

请帮帮我！

【问题讨论】：

标签： javascript html google-maps google-maps-api-3 google-maps-markers

【解决方案1】：

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

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);

}

【讨论】：

【解决方案2】：

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

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);

【讨论】：

谢谢，但您的代码在变量映射上给了我一个错误。此外，如果我修复它，问题也是一样的，为了更新标记位置，我必须更新整个页面。
好的，现在我明白你的意思了，所以问题是；您正在通过 JAVA 更新文件，但实际上这永远不会在运行时更新浏览器中的变量，因为每当我们加载页面时，浏览器都会加载文件并解释 JavaScript 并在内存中创建变量，直到窗口关闭或刷新相同然后重复该过程。在上面的 Dr.Molle 回答中，他正在按时间间隔重新加载 js 文件以解决此问题。
是的，很抱歉，我可能没有足够清楚地解释我的问题。顺便说一句，谢谢。