Блог

Главная - Вопросы по программированию - Диалоговое окно масштабирования и описания Google Maps работает неправильно

Диалоговое окно масштабирования и описания Google Maps работает неправильно

#javascript #google-maps-api-3

#javascript #google-maps-api-3

Вопрос:

Ну, у меня возникла пара проблем с тем, чтобы заставить Google Maps работать с использованием API v3.

Посмотрите здесь: [Удалено постером]

На самом деле обе карты работают, но уровень масштабирования кажется случайным. Масштаб устанавливается на 12 при инициализации карты. Кроме того, если вы нажмете на маркер, в окне описания отсутствуют углы, и его невозможно закрыть. Вот функции javascript, которые я использую для активации этих карт:

 var mapHash = [];
var bound = new google.maps.LatLngBounds();
finishedCoding = false;
function initMap(map_container_div,lat,lng) {
    var latlng = new google.maps.LatLng(lat,lng);
    var myOptions = {
        zoom:12,
        center:latlng,
        mapTypeId:google.maps.MapTypeId.ROADMAP,
        streetViewControl: false
    };

    var map = new google.maps.Map(document.getElementById(map_container_div), myOptions);
    if (!getMap(map_container_div)) {
        var mapInfo = {
            mapkey:'',
            map:'',
            geocoder : new google.maps.Geocoder()
        };
        mapInfo.map = map;
        mapInfo.geocoder = new google.maps.Geocoder();
        mapInfo.mapKey = map_container_div;
        mapHash.push(mapInfo);
    }
}

function placeMarker(myAddress, mapId, description, title) {
    mapIndex = getMap(mapId)
    //alert(myAddress   mapId   map)
    mapHash[mapIndex].geocoder.geocode({
        'address':myAddress
    }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            mapIndex = getMap(mapId)
            var marker = new google.maps.Marker({
                map:mapHash[mapIndex].map,
                position:results[0].geometry.location,
                title: title
            });
            bound.extend(results[0].geometry.location);
            mapHash[mapIndex].map.fitBounds(bound);

            finishedCoding = true;
            placeDesc(marker,description,mapId);

        }
    });
}

function placeDesc(marker,myDesc,mapId) {
    mapIndex = getMap(mapId);
    var infowindow = new google.maps.InfoWindow({
        content: myDesc
    });
    google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(mapHash[mapIndex],marker);
    });
}

function getMap(mapKey) {
    for (var i = 0 ; i < mapHash.length ; i  ) {
        if (mapHash[i].mapKey == mapKey) {
            return i;
        }
    }
    return false;
}

function startmap(mapidd,address,description,title,lat,lng) {
    initMap(mapidd,lat,lng)
    placeMarker(address,mapidd,description,title)
}

Ответ №1:

просто удалив

 body img {
max-width: 520px !important;
height: auto !important;}

из таблицы стилей

http://www.wppassport.com/wp-content/plugins/easyfanpagedesign/default.theme/style.css

теперь ваша проблема решена

Комментарии:

1. На самом деле это не имеет никакого значения. =/

2. На самом деле я только что отправил вам решение для «в поле описания отсутствуют углы и его невозможно закрыть». и для того, чтобы получить возможность установить параметр setZoom. если вы снова разместите эту таблицу стилей, то столкнетесь с той же проблемой с полем описания.

3. Ах, вы правы, это устраняет проблему с углами, но по какой-то причине диалоговые окна по-прежнему не закрываются при нажатии на x. Это не так уж и важно по сравнению с функцией setZoom, которая мне была нужна. Тем не менее, спасибо.

Ответ №2:

Ваши диалоговые окна не закрываются из-за ошибки javascript. Что-то не так с infowindow.open(mapHash[mapIndex],marker); внутренним прослушивателем кликов. Он отображает окно, которое заставляет вас думать, что ошибка возникает после, но я почти уверен, что это связано с самим вызовом. Когда я отлаживал, вы не совершали очевидной ошибки, но я все еще думаю, что эта строка кода является виновником.

Ответ №3:

Я сам решил эту проблему и ругаю себя за то, что не подумал об этом. 🙂

Просто нужно было добавить mapHash[mapIndex].map.setZoom(12);

И я удалил следующие 2 кода:

 bound.extend(results[0].geometry.location);
mapHash[mapIndex].map.fitBounds(bound);
Метки: