Javascript Google Maps - PullRequest
Новая
       2

Javascript Google Maps

0 голосов
/ 03 августа 2011

У меня есть несколько местоположений региональных офисов моей компании, и я должен показывать каждое местоположение, когда пользователь нажимает на такие места, как:

location1LOCATION2location3

Когда пользователь нажимает на местоположение 1, оно отображает местоположение 1 на карте.У меня также есть эти места на моих картах.Я никогда раньше не работал с картами Google, поэтому мне просто нужна идея, чтобы начать работу.

Ответы [ 2 ]

1 голос
/ 03 августа 2011

Когда ваш пользователь щелкает ссылку, запускайте фрагмент javascript, который вызывает setCenter (latlng: LatLng) на карте, чтобы центрировать карту в определенном месте.

Если вы действительно не знаете, с чего начать, начните с прочтения документации API Карт Google . Его легко читать, и он содержит много рабочих примеров .

0 голосов
/ 14 мая 2012

Вы можете сделать что-то вроде этого: (Я уверен, что он может быть оптимизирован с помощью цикла for, сейчас это рано / поздно. 

  <html>
    <head>

    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">

    function initialize() { //Initalize JS after onload
    var map = new google.maps.Map(document.getElementById('map_canvas'), { 
     mapTypeId: google.maps.MapTypeId.ROADMAP,
    });


    var randomPoint1 = new google.maps.LatLng(44.6479, -63.5744); //First Location

    var marker1 = new google.maps.Marker({ //Set up marker
           position: randomPoint1,
           map: map
        });

    google.maps.event.addDomListener(document.getElementById('locationid1'), 'click', //Set up DOM listener 1
        function(){
            map.setZoom(13);
         map.setCenter(marker1.getPosition());  
        });


    var randomPoint2 = new google.maps.LatLng(45.5081, -73.5550); //Second Location

    var marker2 = new google.maps.Marker({
           position: randomPoint2,
           map: map
        });

    google.maps.event.addDomListener(document.getElementById('locationid2'), 'click',//Set up DOM listener 2
        function(){
            map.setZoom(13);
         map.setCenter(marker2.getPosition());  
        });


    var randomPoint3 = new google.maps.LatLng(43.6481, -79.4042); //Third Location

    var marker3 = new google.maps.Marker({
           position: randomPoint3,
           map: map
        });

    google.maps.event.addDomListener(document.getElementById('locationid3'), 'click', //Set up DOM listener 3
        function(){
            map.setZoom(13);
         map.setCenter(marker3.getPosition());  
        });
        map.setCenter(marker2.getPosition());
        map.setZoom(5);
    }



    </script>

    </head>
    <body onload="initialize()"> <!--Initalize JS after onload--->
        <a href="#" id="locationid1">Halifax</a>
        <a href="#" id="locationid2">Montreal</a>
        <a href="#" id="locationid3">Toronto</a>

        <div id="map_canvas" style="height:100%; width:100%"></div>

    </body>

</html>

И после того, как я напишу это, я понимаю, что сообщение былос августа прошлого года. Ну ладно, может кто-нибудь поможет в какой-то момент.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...