谷歌地图不以标记为中心



以下代码在页面上查找 memberId 并呈现地图并成功放置标记,但它没有将地图居中放在标记上。 地图最终以可能为默认位置(索马里(为中心。

我做错了什么?

function initialize() {
    var memberId = $('#member-section').data("member-id");
    if (typeof memberId === "undefined") {
        memberId = 0;
    }
    var latitude = $('#member-section').data("latitude");
    if (typeof latitude === "undefined") {
        latitude = 51.21921589999999;
    }
    var longitude = $('#member-section').data("longitude");
    if (typeof longitude === "undefined") {
        longitude = 4.402881799999932;
    }
    var mapCentreLatlng;
    mapCentreLatlng = new google.maps.LatLng(latitude, longitude);
    buildMap(memberId, mapCentreLatlng);
}
function buildMap(memberId, mapCentreLatlng) {
    google.maps.visualRefresh = true;
    var infowindow = null;
    var mapOptions = {
        zoom: 5,
        center: mapCentreLatlng,
        mapTypeControlOptions: {
            mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
        }
    };
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    // Create a custom marker
    var markerImage = '/img/map-flag-alt.png';
    // Get json data and loop to create markers for map
    $.getJSON("/Umbraco/Api/searchmembers/GetMembers?memberId=" + memberId, function (data) {
        $.each(data, function (members, member) {
            // Add marker
            var marker;
            var memLatLng = new google.maps.LatLng(member.Latitude, member.Longitude);
            marker = new google.maps.Marker({
                    position: memLatLng,
                    map: map,
                    title: member.MemberName,
                    icon: markerImage
                });
            //  Add click event for marker
            google.maps.event.addListener(marker, 'click', function () {
                if (infowindow) {
                    infowindow.close();
                }
                // Create info window and create content
                var contentString =
                    '<h2 id="firstHeading">' + member.MemberName + '</h2>' +
                    '<div id="bodyContent">' +
                    '<p>' + member.Address + '</p>' +
                    '<p><a href="' + member.Url + '">View Company Profile</a></p>' +
                    '</div>';
                infowindow = new google.maps.InfoWindow({
                        content: contentString
                    });
                infowindow.open(map, marker);
            });
        });
    });
}

也许您的function initialize()在文档加载完成之前被调用,因此您的 vars 定义找不到#member-section .尝试在 DOM 完全加载$(document).ready(function initialize(){...});时调用该函数,或者根据 Titus 注释添加一个map.setCenter(memLatLng)以重新居中您的地图。

最新更新