我想跟踪我的位置,并在同一张地图上标记一个固定的位置

时间:2015-10-25 03:56:36

标签: html5 geolocation marker

我正在尝试构建一个简单的页面,显示用户相对于地图上固定位置的位置。我已经能够复制和修改一些代码来跟踪用户的位置,但我不确定如何在同一个地图上的固定位置(比如-38.100 + 145.500)添加标记。任何帮助将不胜感激。

到目前为止,我有以下内容......

<!DOCTYPE html>
<html>
<head>
    <style>
        #map { width:100%; height:150px; }
    </style>
    <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body>
    <div id="map"></div>
    <script>
        var marker;
        if (navigator.geolocation) {
            var timeoutVal = 10 * 1000 * 1000;
            navigator.geolocation.watchPosition(
                displayPosition, 
                displayError,
                { enableHighAccuracy: true, timeout: timeoutVal, maximumAge: 0 }
            );
        }
        else {
            alert("Geolocation is not supported by this browser");
        }
        function displayPosition(position) {            
            var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
            var options = {
                zoom: 18,
                center: pos,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map"), options);
            // Remove the current marker, if there is one
            if (typeof(marker) != "undefined") marker.setMap(null);
            marker = new google.maps.Marker({
                position: pos,
                map: map,
                icon: 'https://upload.wikimedia.org/wikipedia/commons/a/ae/Bluedot.png',
                title: "User location"
            });

        }
        function displayError(error) {
            var errors = { 
                1: 'Permission denied',
                2: 'Position unavailable',
                3: 'Request timeout'
            };
            alert("Error: " + errors[error.code]);
        }
    </script>
</body>
</html>

亲切的问候

1 个答案:

答案 0 :(得分:0)

您已经有代码在那里添加标记 -

设定职位

            marker = new google.maps.Marker({
            position: pos,
            map: map,
            icon: 'https://upload.wikimedia.org/wikipedia/commons/a/ae/Bluedot.png',
            title: "User location"
        });

设置标记

simple_form

如果你给pos变量赋予不同的纬度和经度 - 那么标记会出现在不同的位置......