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

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()在不安全的来源上禁用它。本地主机应该可以工作，因为它被认为是“安全的”

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