谷歌地图 api V3 标记

Question

我在使用谷歌地图时遇到问题，我无法在某个位置放置标记。我的想法是找到我的位置并在其上放置标记，然后在其他位置放置标记，但其他位置上的标记未显示在地图上。

function success(position) {
      var mapcanvas = document.createElement('div');
      mapcanvas.id = 'mapcontainer';
      mapcanvas.style.height = '550px';
      mapcanvas.style.width = '960px';

      document.querySelector('article').appendChild(mapcanvas);

      var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

      var options = {
          zoom: 15,
          center: coords,
          mapTypeControl: false,
          navigationControlOptions: {
              style: google.maps.NavigationControlStyle.SMALL
          },
          mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var map = new google.maps.Map(document.getElementById("mapcontainer"), options);

      var marker = new google.maps.Marker({
          position: coords,
          map: map,
          title: "Vasa lokacija"
      });
  }

  if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(success);
  } else {
      error('Geo Location is not supported');
  }
  var locations = [
      ['Banja Luka', 44.766666699999990000, 17.183333299999960000, 4],
      ['Tuzla', 44.532841000000000000, 18.670499999999947000, 5],
      ['Zenica', 44.203439200000000000, 17.907743200000027000, 3],
      ['Sarajevo', 43.850000000000000000, 18.250000000000000000, 2],
      ['Mostar', 43.333333300000000000, 17.799999999999954000, 1]
  ];
  var infowindow = new google.maps.InfoWindow();

  var marker, i;

  for (i = 0; i < locations.length; i++) {
      marker = new google.maps.Marker({
          position: new google.maps.LatLng(locations[i][1], locations[i][2]),
          map: map
      });

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

Answer 1

你的函数的主要问题是你的标记添加循环在成功函数之外，所以它永远不会被调用。您的代码末尾还有一个额外的}。这是一个完整的解决方案jsfiddle

var map;

function success(position) {

    var mapcanvas = document.createElement('div');
    mapcanvas.id = 'mapcontainer';
    mapcanvas.style.height = '550px';
    mapcanvas.style.width = '960px';

    document.querySelector('article').appendChild(mapcanvas);

    var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

    var options = {
        zoom: 15,
        center: coords,
        mapTypeControl: false,
        navigationControlOptions: {
            style: google.maps.NavigationControlStyle.SMALL
        },
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("mapcontainer"), options);

    var marker = new google.maps.Marker({
        position: coords,
        map: map,
        title: "Vasa lokacija"
    });

    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(success);
    } else {
        error('Geo Location is not supported');
    }

    var locations = [
        ['Banja Luka', 44.766666699999990000, 17.183333299999960000, 4],
        ['Tuzla', 44.532841000000000000, 18.670499999999947000, 5],
        ['Zenica', 44.203439200000000000, 17.907743200000027000, 3],
        ['Sarajevo', 43.850000000000000000, 18.250000000000000000, 2],
        ['Mostar', 43.333333300000000000, 17.799999999999954000, 1]
    ];

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

    for (i = 0; i < locations.length; i++) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map
        });

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

} //success fn ENDS

var position = {
    coords: {
        latitude: 44.766666699999990000,
        longitude: 17.183333299999960000
    }
};

success(position);

Answer 2

您的代码的主要问题是您在加载地图之前绘制标记，因为它不在您的函数success.try this:I have use static value for center 您可以根据您的代码更改它.

$(document).ready(function () {
    success(position);
});

var position = { // suppose this is your position
    coords: {
        latitude: 44.666666699999990000,
        longitude: 17.183333299999960000
    }
};

var map;
var marker, i;

var locations = [
    ['Banja Luka', 44.766666699999990000, 17.183333299999960000, 4],
    ['Tuzla', 44.532841000000000000, 18.670499999999947000, 5],
    ['Zenica', 44.203439200000000000, 17.907743200000027000, 3],
    ['Sarajevo', 43.850000000000000000, 18.250000000000000000, 2],
    ['Mostar', 43.333333300000000000, 17.799999999999954000, 1]
];

function success(position) {
    var mapcanvas = document.createElement('div');
    mapcanvas.id = 'mapcontainer';
    mapcanvas.style.height = '550px';
    mapcanvas.style.width = '960px';
    document.getElementById('article').appendChild(mapcanvas);

    var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

    var options = {
        zoom: 8,
        center: coords,
        mapTypeControl: false,
        navigationControlOptions: {
            style: google.maps.NavigationControlStyle.SMALL
        },
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("mapcontainer"), options);

    marker = new google.maps.Marker({
        position: coords,
        map: map,
        title: "Vasa lokacija"
    });

    var infowindow = new google.maps.InfoWindow();

    for (i = 0; i < locations.length; i++) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map
        });
        google.maps.event.addListener(marker, 'click', function (marker, i) {

            infowindow.setContent(locations[i][0]);
            infowindow.open(map, marker);

        });
    }
}