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

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变量后，实际上已初始化的变量位于initialize函数的本地，请删除其前面的“ 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);

工作小提琴

代码段：

 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>