只更新折线而不是整个地图

Question

我正在尝试创建一个 ASP.NET 页面，在该页面中可以使用 Google 地图 API 跟踪当前用户的路线。问题是每当我使用间隔绘制折线时整个 Google 地图刷新导致页面闪烁。

这是我的代码：

 <script>
    //declare variables
    var interval;
    var coordinates = [];
    var x = document.getElementById("exception");

    //Get current position and loop this
    function getLocation() {
        //Check if the user has a geolocation
        if (navigator.geolocation) {
            interval = setInterval(function () { navigator.geolocation.getCurrentPosition(showPosition); }, 500);
        } else {
            x.innerHTML = "Geolocation is not supported by this browser.";
        }
    }

    //Get the latitude and longitude and draw a polylin
    function showPosition(position) {
        console.log(position.coords.latitude + " " + position.coords.longitude);

        //Map options for the Google map and center the current position
        var mapOptions = {
            zoom: 15,
            center: new google.maps.LatLng(position.coords.latitude, position.coords.longitude)
        }

        //Add the options to the google map and display it
        var map = new google.maps.Map(document.getElementById("mapDiv"), mapOptions);

        //Create a marker for the current position
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
            title: "Current position!"
        });

        // To add the marker to the map, call setMap();
        marker.setMap(map);

        //Add the current coordinates to the array
        coordinates.push(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));

        //Create a polyline with the coordinates array
        var flightPath = new google.maps.Polyline({
            path: coordinates,
            geodesic: true,
            strokeColor: '#FF0000',
            strokeOpacity: 1.0,
            strokeWeight: 2
        });

        //To add the polylin to the map, call setMap();
        flightPath.setMap(map);
    }

    //Stop the interval
    $("#stop").click(function () {
        clearInterval(interval);
        coordinates = [];
    });
</script>

提前致谢，布伦特

Answer 1

地图闪烁是因为您每次运行 showPosition 时都在重新创建它。您应该使您的地图变量成为全局变量，并且只在页面加载时设置一次。同样，您应该将标记和飞行路径变量设置为全局变量，并确保在使用 marker.setMap(null) 和 flightPath.setMap(null) 重新创建它们之前将它们从地图中删除，或者甚至更好地更新它们有了新的位置信息。

只更新折线而不是整个地图

Only update polyline not the whole map

javascript

c#

asp.net-mvc

google-maps

setinterval