标记在谷歌地图上的setPosition后消失

时间:2013-05-19 16:33:00

标签: javascript html google-maps

我参与了Google地图上的GPS定位展示。这里的问题是谷歌标记只出现在第一次(设置谷歌标记部分)。每次调用setPosition方法后它都会消失。任何帮助将不胜感激。

<!DOCTYPE HTML>
<html>
<head>
<script src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
    var index=0;
    var latitudes = new Array(35.71434,35.715612,35.711779,35.70913,35.710646);
    var longitudes = new Array(-77.92854,-77.924076,-77.925171,-77.925943,-77.930278);
    var mapOptions;
    var coords = new google.maps.LatLng(latitudes[index],longitudes[index]);
    var marker = null;
    var map;
    var newPoint;

    function autoUpdate(){
        navigator.geolocation.getCurrentPosition(function(position){
            mapOptions = {
                zoom: 15,
                center: coords,
                mapTypeControl: true,
                navigationControlOptions: {
                    style: google.maps.NavigationControlStyle.SMALL
                },
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(
                document.getElementById("mapContainer"), mapOptions
            );
            if(marker){
                newPoint = new google.maps.LatLng(latitudes[index],longitudes[index]);
                marker.setPosition(newPoint);
            }   
            else{
                marker = new google.maps.Marker({
                    position: coords,
                    map: map,
                });
            }
            if(newPoint!=null){
                map.setCenter(newPoint);
                marker.setVisible(true);
            }
        });

        index=index+1;
        if(index==5){
            index=0;
        }
        setTimeout(autoUpdate,5000);
    }

    autoUpdate();
</script>
<style type="text/css">
#mapContainer {
    height: 500px;
    width: 800px;
    border:10px solid #eaeaea;
}
</style>
</head>
<body>
    <div id="mapContainer"></div>
</body>
</html>

感谢您的帮助。

1 个答案:

答案 0 :(得分:1)

将创建地图的代码移出autoUpdate函数,仅在页面加载时运行一次:

        mapOptions = {
            zoom: 15,
            center: coords,
            mapTypeControl: true,
            navigationControlOptions: {
                style: google.maps.NavigationControlStyle.SMALL
            },
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(
            document.getElementById("mapContainer"), mapOptions
        );

或者执行类似于标记操作的操作,只创建一次,如果已经初始化/创建,只需更改中心。