javascript - 将标记添加到谷歌地图，引用 map 但不重新实例化它

Question

尝试添加标记时， map 变为灰屏。我已将其范围缩小到 var map = new google.maps.Map(document.getElementById('map'), mapOptions); 行。我得到了一张 id 为 map 的 map ，当用户从搜索栏中选择一个位置时，该位置必须以图钉/标记的形式添加到 map 中。

function mezmerize(address, lat, lon) {

$('#myPlaceTextBox').val("");
var latlong = getLatLong(address);
var location_html = '<li class="location" data-location="'+address+'">'+
    '<span class="title">'+address+' </span>'+
    '<span class="" onclick="deleteMe()"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></span>'+
    '<input type="hidden" name="chosen_location[]" value="'+address+'">'+
    '<input type="hidden" name="latitude[]" value="'+lat+'">'+
    '<input type="hidden" name="longitude[]" value="'+lon+'">'+
    '<input type="hidden" name="address[]" value="'+address+'">'+
    '</li>';

$(".interests_wrapper").append(location_html);
console.log(address);
console.log(lat + "," + lon);
var myLatlng = new google.maps.LatLng(lat + "," + lon);
var mapOptions = {
    zoom: 10,
    center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map'), mapOptions);

var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title: address
});

var optOptions = {
    urlBase: '/codeigniter/ads2trade/',
    showRadii: true,
    currentFilterCriteria: {},
    showSearchPOIButton: true,
    showFilterButton: true,
    showLegend: false
};
var clusterOptions = {};
var spiderOptions = {};
var html2canvasOptions = {
    logging: false
};

var adsMap = new AdsMap(map, clusterOptions, spiderOptions, html2canvasOptions, optOptions);

adsMap.addMarker(marker);

}
//
function getLatLong(address){

var lattitude = "0";
var longitude = "0";

$.ajax({
    url:"https://maps.googleapis.com/maps/api/geocode/json?address="+address+"&sensor=false",
    type: "POST",
    success:function(res){
        lattitude = res.results[0].geometry.location.lat;
        longitude = res.results[0].geometry.location.lng;
        //console.log(lattitude);
        //console.log(longitude);
        return lattitude + ',' + longitude;
    },
    error: function(res) {
        console.log(res);
    }
});
}

有什么想法可以解决这个问题并添加标记吗？

Answer 1

首次创建 map 时，将其存储在全局可访问的位置(例如作为全局变量或 document.getElementById('map') 的属性)。

在mezmerize内部使用存储的 map 而不是创建新实例。

演示(通过$('#map').data()存储 map 实例):

http://jsfiddle.net/doktormolle/Lomf6v77/