Google Maps Pan to - PullRequest
Новая
       20

Google Maps Pan to

5 голосов
/ 26 марта 2012

Весь день боролся с настройкой панорамирования на Google Maps из текстовой ссылки.Похоже, что идентификатор самой карты не передается в функцию, но я попробовал несколько вещей без радости. 

<script type="text/javascript">
    var home = new google.maps.LatLng(4.915833, 10.195313);
    function initialize() {
        var myOptions = {
            zoom: 2,
            center: home,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControl: false,
            panControl: true,
            panControlOptions: {
                position: google.maps.ControlPosition.LEFT_CENTER
            },
            zoomControl: true,
            zoomControlOptions: {
                style: google.maps.ZoomControlStyle.LARGE,
                position: google.maps.ControlPosition.LEFT_CENTER
            },
            scaleControl: false,
            streetViewControl: true,
            streetViewControlOptions: {
                position: google.maps.ControlPosition.LEFT_CENTER
            }
        }
        var map = new google.maps.Map(document.getElementById("map"), myOptions);
        setMarkers(map, destinations);
        clickroute(map);
    }
    var destinations = [
        ['Marbella', 36.509937, -4.886352],
        ['Algarve', 37.016945, -7.928728],
        ['London', 51.508129, -0.128005],
        ['Istanbul', 41.00527, 28.97696],
        ['Whistler', 50.116168, -122.959423]
    ];
    function setMarkers(map, locations) {
        var image = new google.maps.MarkerImage('img/marker.png',
        new google.maps.Size(41, 63),
        new google.maps.Point(0,0));
        for (var i = 0; i < locations.length; i++) {
            var destination = locations[i];
            var myLatLng = new google.maps.LatLng(destination[1], destination[2]);
            var marker = new google.maps.Marker({
                position: myLatLng,
                map: map,
                icon: image,
                title: destination[0]
            });
        }
    }
    function clickroute(lati, long) {
        var latLng = new google.maps.LatLng(51.433373, -0.712251);
        map.panTo(latLng);
    }
</script> 

<li onclick="clickroute()">test</li>

Любые возможные идеи о том, что может вызвать проблему?Я получаю JS ошибку с 

Uncaught TypeError: Object #<HTMLDivElement> has no method 'panTo'

Спасибо

Ричард

Ответы [ 2 ]

15 голосов
/ 27 марта 2012

@ onemach правильный.

1.Вы должны объявить map как глобальную переменную в начале JavaScript.Просто сделайте объявление var map; сразу после тега <script type="text/javascript">.

2.И в то же время инициализация вашей карты должна быть изменена на 

map = new google.maps.Map(document.getElementById("map"), myOptions); // without the 'var'

3.Ваш звонок clickroute() onClick <li> без параметров.Поэтому измените определение clickroute() следующим образом: 

function clickroute() { //just omit the 'lati' and 'long'
    var latLng = new google.maps.LatLng(51.433373, -0.712251);
    map.panTo(latLng);
}

Теперь, нажав на test <li>, ваша карта переместится в точку (51.433373, -0.712251)

4 голосов
/ 26 марта 2012

clickroute(map); несовместимо с определением 

function clickroute(lati, long) {
    var latLng = new google.maps.LatLng(51.433373, -0.712251);
    map.panTo(latLng);
}

Я думаю, что вы хотите 

function clickroute(map) {
    var latLng = new google.maps.LatLng(51.433373, -0.712251);
    map.panTo(latLng);
}

UPDATE:

Я запутался, что именно ты хочешь.

onclick=clickroute() не передает никакие аргументы функции.

Также в clickroute нет глобального map.

...