将标记添加到谷歌地图,参考地图但不重新实施

时间:2015-01-27 09:21:49

标签: javascript google-maps google-maps-api-3

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

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);
    }
});
}

On Create

When creating a new map

如何修复此问题并添加标记?

1 个答案:

答案 0 :(得分:1)

创建地图时,第一次将地图存储在可全局访问的地方(例如,作为全局变量或document.getElementById('map')的属性)。

mezmerize内使用存储的地图而不是创建新实例。

Demo(通过$('#map').data()存储Map-instance):

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

相关问题