Question

我已经在互联网上查了一下，我尝试了一些解决方案，但似乎无法找到如何结合自己的位置，同时在地图上显示一些标记。

我有这个代码来显示多个标记，它的效果很好，但我如何使用谷歌地图调用我自己的位置？我知道有关于如何添加自己的位置但没有结合这两个选项的文档。

关于重复项的编辑：

在stackoverflow上没有这样的问题因此没有重复，因为毫无疑问关于组合多个标记并显示您自己的位置标记。

这是我现在获得的代码：

     <script>

        function initialize() {
            var map;
            var bounds = new google.maps.LatLngBounds();
            var mapOptions = {
                mapTypeId: 'roadmap'
            };




            map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
            map.setTilt(45);


            var markers = [
    ['some locations, city', 52.35475,19.532567],
    ['some locations, city', 52.35475,19.532567],
    ['some locations, city', 52.35475,19.532567],
    ['some locations, city', 52.35475,19.532567],
    ['some locations, city', 52.35475,19.532567],
    ['some locations, city', 52.35475,19.532567],
    ['some locations, city', 52.35475,19.532567]
            ];




            var infoWindowContent = [
                ['<div class="info_content">' +
                '<h3>London Eye</h3>' +
                '<p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p>' +        '</div>'],
                ['<div class="info_content">' +
                '<h3>Palace of Westminster</h3>' +
                '<p>The Palace of Westminster is the meeting place of the House of Commons and the House of Lords, the two houses of the Parliament of the United Kingdom. Commonly known as the Houses of Parliament after its tenants.</p>' +
                '</div>']
            ];




            var infoWindow = new google.maps.InfoWindow(), marker, i;

           // Here we get our own location

    var showPosition = function (position) {
    var userLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
    var marker = new google.maps.Marker({
        position: userLatLng,
        title: 'Your Location',
        map: map
    });
}

    // Show all the markers and show my own location. Show my own location don't work.

    for( i = 0; i < markers.length; i++ ) {
        var position = new google.maps.LatLng(markers[i][1], markers[i][2], showPosition); 
        bounds.extend(position);
        marker = new google.maps.Marker({
            position: position,
            map: map,
            title: markers[i][0]
        });


                google.maps.event.addListener(marker, 'click', (function(marker, i) {
                    return function() {
                        infoWindow.setContent(infoWindowContent[i][0]);
                        infoWindow.open(map, marker);
                    }
                })(marker, i));


                map.fitBounds(bounds);
            }


            var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
                this.setZoom(11);
                google.maps.event.removeListener(boundsListener);
            });

        }
        </script>

Answer 1

在您的var markers

声明下方添加以下JavaScript代码

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(callback) {
            showPosition(callback)
        }, function(error) {
            console.log(error)
        });
    }
}

function showPosition(position) {
    markers.push(['test', position.coords.latitude, position.coords.longitude])
}

getLocation();

我们抓住用户位置，并将其推入保存标记数据的初始数组阵列中，请注意这不适用于http，因为Google不鼓励使用getCurrentPosition（）在不安全的起源上禁用它。 Localhost应该可以工作，因为它被认为是'safe-ish'

Answer 2

使用geocodezips回答：Google maps multiple markers with geolocation button

没有标记，但设法通过Roberrrt之前提供的一些代码自己添加。这是jsfiddle：https://jsfiddle.net/k4kqg1gw/27/

['Helooo',40, 30 ,0] , ['Helooo',41.04564,28.97862 ,1], ['Your location',position.coords.latitude, position.coords.longitude] , ];

谷歌地图显示您自己的位置，并显示多个标记

2 个答案: