google 地图显示您自己的位置，还显示多个标记

Question

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

我得到了显示多个标记的代码，效果很好，但我如何使用 google 地图调用我自己的位置？我知道有关于如何添加您自己的位置但不组合这两个选项的文档。

关于重复项的编辑：

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

这是我现在得到的代码：

     <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] , ];

google 地图显示您自己的位置，还显示多个标记

google maps show your own location and also show multiple markers

javascript

google-maps

google-maps-api-3

google-maps-markers

google-geolocation