Javascript 谷歌地图答案

【问题标题】：Javascript google mapsJavascript 谷歌地图
【发布时间】：2011-08-02 23:02:20
【问题描述】：

我的公司区域办事处有多个位置，每当用户点击以下位置时都必须显示每个位置：

位置1
位置2
位置3

当用户点击位置 1 时，它会在地图上显示位置 1。我的地图中也有这些位置。我以前从未使用过 Google 地图，所以我只需要一些想法即可开始。

【问题讨论】：

对不起，我不知道，现在就要开始了，谢谢队友:)

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

【解决方案1】：

当您的用户单击链接时，运行一段 javascript，在地图上调用 setCenter(latlng:LatLng) 以将地图居中到某个位置。

如果您真的不知道从哪里开始，请先阅读Google Maps API 文档。它易于阅读，并且包含大量有效的examples。

【讨论】：

感谢帮助的朋友:)

【解决方案2】：

您可以执行以下操作：（我确信可以使用 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>

写完这篇文章后，我意识到这篇文章是去年八月的。哦，好吧，可能会在某个时候帮助某人。

【讨论】：

您不需要明确地重复类似的操作。 Here's an example 使用一个函数来创建标记（和侧边栏条目，这也可能有用）。