1

私はグーグルマップのGPS位置表示に取り組みました。ここで問題になるのは、Google マークが初回のみ表示される (Google マーカー部分を設定する) ことです。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>

ご協力ありがとうございました。

4

1 に答える 1