Fatal编程技术网
  • javascript/
  • Javascript 来自JS的Google地图API标记更新

Javascript 来自JS的Google地图API标记更新

javascript html google-maps google-maps-api-3

Javascript 来自JS的Google地图API标记更新,javascript,html,google-maps,google-maps-api-3,google-maps-markers,Javascript,Html,Google Maps,Google Maps Api 3,Google Maps Markers,我想问你这个问题的解决办法。 我有一个JS，里面有一个变量，由JAVA应用程序（即JAVA writer进入线程）超时更新，之后我从该变量获取坐标，并为我的google地图创建一个新的对象标记问题是标记不会改变位置，只有在刷新整个页面时才会改变（我不想这样做）。 这里的代码更清楚。 inputData.js，其中变量由java应用程序写入 var newMarker = {'latitude':38.25705300000004,'longitude': 140.83760400000006};

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

这里的代码更清楚。 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>


简单标记
html，正文，#地图画布{
身高：100%；
边际：0px；
填充：0px
}
var映射；
var sendai=new google.maps.LatLng（38.259535140.846816）；
最后位置；
var image='images/circle-16.png'；
函数初始化（）{
变量映射选项={
缩放：12，
中心：仙台，
mapTypeId:google.maps.mapTypeId.ROADMAP}；
map=new google.maps.map（document.getElementById（'map-canvas'），mapOptions）；
}
设置间隔（刷新数据，2000年）；
函数refreshData（）{
var marker=new google.maps.marker({
地图：地图，
图标：图像，
可拖动：错误
});
marker.setPosition（新的google.maps.LatLng（newMarker.latitude，newMarker.longitude））；
map.setCenter（新的google.maps.LatLng（newMarker.latitude，newMarker.longitude））；
map.setZoom（18）；
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
如果我像这样打开我的页面，所有东西都可以工作，但是当我更改脚本“inputData.js”时，标记不会改变位置。 另一方面，setCenter方法似乎工作正常

请帮帮我

您不需要每次都创建新的marker实例。使用此更新您的代码，然后尝试：

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);
您需要重新加载更新的脚本以获得更新的位置：

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

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