Карты Google показывают ваше собственное местоположение, а также показывают несколько маркеров

Я перерыл весь Интернет и попробовал несколько решений, но не могу найти, как совместить свое собственное местоположение и в то же время показать некоторые маркеры на карте.

Я получил этот код для отображения нескольких маркеров, и он отлично работает, но как мне также назвать свое собственное местоположение с помощью карт Google? Я знаю, что есть документация о том, как добавить свое собственное местоположение, но не о том, как объединить эти два параметра.

Изменить в отношении дубликатов:

В 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>

person Adam Norbäcker    schedule 21.09.2016    source источник
comment
Это не дубликат... Он тоже не показывает свое местоположение.   -  person Adam Norbäcker    schedule 21.09.2016
comment
Ах, разве вы не можете просто указать свое местоположение в массиве как массив?   -  person roberrrt-s    schedule 21.09.2016
comment
К сожалению, я понятия не имею, как... что-то вроде этого? ['некоторые местоположения, город', 52.35475,19.532567], [(position.coords.latitude, position.coords.longitude)]   -  person Adam Norbäcker    schedule 21.09.2016
comment
Спасибо, но из-за этого карта становится серой. У меня есть codepen здесь: codepen.io/Adamnorbacker/pen/xERzLR   -  person Adam Norbäcker    schedule 21.09.2016
comment
Отчасти это связано с тем, что вы используете незащищенное происхождение. Я отвечаю на ваш вопрос ниже, и этот код должен работать на локальном хосте или https.   -  person roberrrt-s    schedule 21.09.2016
comment
Похоже, переменная position не определена в вашем коде. В консоли есть сообщение об ошибке. Я думаю, вам следует использовать HTML5 API геолокации. Также ознакомьтесь с этой статьей.   -  person xomena    schedule 21.09.2016
comment
Спасибо, xomena, пока не могу заставить его работать.   -  person Adam Norbäcker    schedule 21.09.2016
comment
Зачем минусовать? Вопрос сформулирован четко, а также четко указано, что это не дубликат.   -  person Adam Norbäcker    schedule 21.09.2016
comment
comment
О, не видел этого, однако, он не показывает маркер того, где вы находитесь. Только увеличивает местоположение.   -  person Adam Norbäcker    schedule 21.09.2016
comment
См. консоль javascript: getCurrentPosition() и watchPosition() больше не работают с небезопасными источниками. Чтобы использовать эту функцию, вам следует подумать о переключении вашего приложения на безопасный источник, такой как HTTPS. См. сайты. .google.com/a/chromium.org/dev/Home/chromium-security/ для получения дополнительной информации.   -  person geocodezip    schedule 21.09.2016
comment
Собственно, мне удалось это решить геокодированием. По-видимому, это сработало в вашем коде. Вот код/скрипта, который вы предоставили с некоторыми правками: jsfiddle.net/k4kqg1gw/10 Я бы повысил это если бы у меня было достаточно повторений, но кажется, что я не могу достичь предела повторений по каким-то странным причинам. Кроме того, и codepen, и jsfiddle имеют домен https.   -  person Adam Norbäcker    schedule 21.09.2016


Ответы (2)


Добавьте следующий код JavaScript под объявлением var markers.

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 должен работать, так как он считается «безопасным».

person roberrrt-s    schedule 21.09.2016
comment
Хм, очень мило с вашей стороны, но можете ли вы проверить, что это работает? my ampps localhost не показывает мое собственное местоположение/маркер, но запрашивает его. вот codepen, тот же код, что и у меня на локальном хосте: codepen.io/Adamnorbacker/pen/xERzLR - person Adam Norbäcker; 21.09.2016
comment
Вам нужно будет разрешить браузеру определять ваше местоположение. - person roberrrt-s; 21.09.2016
comment
Он запрашивает мое местоположение, и я тоже разрешаю. хм, пробовал на сафари и фаерфоксе. Я ценю вашу помощь :) - person Adam Norbäcker; 21.09.2016

Сделано это с помощью ответа geocodezips на: Google отображает несколько маркеров с помощью кнопки геолокации

У меня не было маркера, но мне удалось добавить его самостоятельно с помощью кода, предоставленного Роберрртом ранее. Вот jsfiddle: https://jsfiddle.net/k4kqg1gw/27/

['Helooo',40, 30 ,0] , ['Helooo',41.04564,28.97862 ,1], ['Your location',position.coords.latitude, position.coords.longitude] , ];
person Adam Norbäcker    schedule 21.09.2016