无法向我的 Google 地图添加多个标记

Question

我无法根据纬度和经度在我的 Google 地图上添加多个标记。我正在从本地主机对我的 JSON 进行 AJAX 调用。 这是 JavaScript 代码：

var map;
    var Latitude, Longitude;
    var markersArray = [];

    function initialize() {
        var myLatlng1 = new google.maps.LatLng(20.2700, 85.8400);

        var mapOptions = {
            zoom: 6,
            center: myLatlng1,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById('map'),
        mapOptions);

        //if (navigator.geolocation) {
        //    navigator.geolocation.getCurrentPosition(function (position) {
        //        initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
        //        map.setCenter(initialLocation);
        //    });
        //}

        initialLocation = new google.maps.LatLng(20.2700, 85.8400);
        map.setCenter(initialLocation);

        var marker = new google.maps.Marker({
            position: myLatlng1,
        });
        marker.setMap(map);
        var marker = new google.maps.Marker({ position: initialLocation, map: map, title: "You are here!" });


        getLocations();
        //PlotMarker(Latitude,Longitude);

    };

    function getLocations() {
        $.ajax({
            type: "GET",
            url: "http://localhost:44149/api/values",
            dataType: "json",
            success: function (json) {
                $.each(json, function (key, value) {

                    //console.log("Key : " +key + "  Value :  "+value.Longitude );
                    PlotMarker(value.Latitude, value.Longitude);
                });
            },
            error: function (err) {
               console.log(err);
            }
        });
    }

    function PlotMarker(Lat, Long) {
        var marker1 = new google.maps.Marker({
            position: new google.maps.LatLng(Lat, Long),
            map: map,
            draggable: false,
            animation: google.maps.Animation.DROP
        });
        markersArray.push(marker1);
    }


    //google.maps.event.addDomListener(window, "load", initialize);

注意：我的初始位置的标记正在工作，但没有添加多个标记。 你能发现错误吗？您的帮助将不胜感激。 谢谢。

Answer 1

虽然您创建了一个全局map 变量，但实际初始化的变量是初始化函数的本地变量，请删除它前面的“var”。这是不正确的：

var map; // global map variable
var Latitude, Longitude;
var markersArray = [];

function initialize() {
    var myLatlng1 = new google.maps.LatLng(20.2700, 85.8400);

    var mapOptions = {
        zoom: 6,
        center: myLatlng1,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    // local to the initialize function:
    var map = new google.maps.Map(document.getElementById('map'),
    mapOptions);

改成：

var map; // global map variable
var Latitude, Longitude;
var markersArray = [];

function initialize() {
    var myLatlng1 = new google.maps.LatLng(20.2700, 85.8400);

    var mapOptions = {
        zoom: 6,
        center: myLatlng1,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    // initialize the global version of the variable:
    map = new google.maps.Map(document.getElementById('map'),
    mapOptions);

working fiddle

代码 sn-p：

var map;
var Latitude, Longitude;
var markersArray = [];

function initialize() {
  var myLatlng1 = new google.maps.LatLng(20.2700, 85.8400);

  var mapOptions = {
    zoom: 6,
    center: myLatlng1,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  map = new google.maps.Map(document.getElementById('map'),
    mapOptions);

  initialLocation = new google.maps.LatLng(20.2700, 85.8400);
  map.setCenter(initialLocation);

  var marker = new google.maps.Marker({
    position: myLatlng1,
  });
  marker.setMap(map);
  var marker = new google.maps.Marker({
    position: initialLocation,
    map: map,
    title: "You are here!"
  });


  getLocations();
  //PlotMarker(Latitude,Longitude);

};

function getLocations() {
  /* $.ajax({
      type: "GET",
      url: "http://localhost:44149/api/values",
      dataType: "json",
      success: function (json) {
          $.each(json, function (key, value) {

              //console.log("Key : " +key + "  Value :  "+value.Longitude );
              PlotMarker(value.Latitude, value.Longitude);
          });
      },
      error: function (err) {
          console.log(err);
      }
  }); */
  PlotMarker( /* Kolkata, West Bengal, India (*/ 22.572646, 88.36389499999996);
  PlotMarker( /* Ranchi, Jharkhand, India (*/ 23.3440997, 85.30956200000003);
}

function PlotMarker(Lat, Long) {
  var marker1 = new google.maps.Marker({
    position: new google.maps.LatLng(Lat, Long),
    map: map,
    draggable: false,
    animation: google.maps.Animation.DROP
  });
  markersArray.push(marker1);
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map" style="border: 2px solid #3872ac;"></div>