Javascript 谷歌地图显示你自己的位置,也显示多个标记

Javascript 谷歌地图显示你自己的位置,也显示多个标记,javascript,google-maps,google-maps-api-3,google-maps-markers,google-geolocation,Javascript,Google Maps,Google Maps Api 3,Google Maps Markers,Google Geolocation,我已经在互联网上查过了,我尝试过一些解决方案,但似乎无法找到如何结合自己的位置,同时在地图上显示一些标记 我用这段代码来显示多个标记,效果很好,但是我如何用谷歌地图来调用我自己的位置呢? 我知道有关于如何添加您自己的位置的文档,但没有结合这两个选项 编辑有关重复项的信息: 在stackoverflow上没有类似的问题,因此没有重复,因为在组合多个标记并显示您自己的位置标记方面没有问题。 这是我现在得到的代码: <script> function initi

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

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

编辑有关重复项的信息:

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

函数初始化(){
var映射;
var bounds=new google.maps.LatLngBounds();
变量映射选项={
mapTypeId:“路线图”
};
map=new google.maps.map(document.getElementById(“map_canvas”),mapOptions);
地图.设置倾斜(45);
变量标记=[
[“城市的一些地点”,52.35475,19.532567],
[“城市的一些地点”,52.35475,19.532567],
[“城市的一些地点”,52.35475,19.532567],
[“城市的一些地点”,52.35475,19.532567],
[“城市的一些地点”,52.35475,19.532567],
[“城市的一些地点”,52.35475,19.532567],
[“城市的一些地点”,52.35475,19.532567]
];
var infoWindowContent=[
['' +
“伦敦眼”+
“伦敦眼是一个巨大的摩天轮,位于泰晤士河岸边。整个结构高135米(443英尺),车轮直径120米(394英尺)。

”+“, ['' + “威斯敏斯特宫”+ “威斯敏斯特宫是英国议会两院下议院和上议院的会址。通常以其租户而称为议会大厦。

”+ ''] ]; var infoWindow=new google.maps.infoWindow(),marker,i; //这里我们有自己的位置 var showPosition=功能(位置){ var userLatLng=new google.maps.LatLng(position.coords.latitude,position.coords.longitude); var marker=new google.maps.marker({ 职位:userLatLng, 标题:“你的位置”, 地图:地图 }); } //显示所有标记并显示我自己的位置。显示我自己的位置无效。 对于(i=0;i
在您的
var标记声明下方添加以下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()来阻止使用getCurrentPosition()。Localhost应该可以工作,因为它被认为是“安全的”

通过使用geocodezips回答:

没有标记,但通过Roberrrt以前提供的一些代码自己添加了标记。 以下是JSFIDLE:


可能是重复的不是重复的。。。那一个也不显示它自己的位置。啊,你不能把你自己的位置作为一个数组推到数组中吗?不幸的是,我不知道如何。。。像这样的?['some locations,city',52.35475,19.532567],(position.coords.latitude,position.coords.longitude)]代码中似乎未定义变量位置。控制台中有一条错误消息。我想你应该用。看看这个。嗯,你真是太好了,但是你能证实它是有效的吗?我的ampps localhost不显示我自己的位置/标记,但它要求显示。这是代码笔,与我在本地主机中的代码相同:你必须允许浏览器获取你的C位置。它要求我的位置,我也允许。嗯,在safari和firefox上试过了。我感谢你的帮助:)
['Helooo',40, 30 ,0] , ['Helooo',41.04564,28.97862 ,1], ['Your location',position.coords.latitude, position.coords.longitude] , ];