Question

我正在建立我的个人网站，以向未来的雇主展示我的编码示例组合。一个非常简单的项目是展示我所有旅行的方式。我想要一个静态的谷歌地图，在我去过的所有地方都有标记（台湾，日本，夏威夷，法国，美国的一些城市......等等）。

点击这些标记后，我希望弹出覆盖框出现在地图的顶部，覆盖地图的70％，居中，地图的外边缘显示为灰色。单击灰色区域中的任意位置将关闭弹出覆盖图。这些弹出窗口将包含我旅行的图片，以及简短的引用或模糊或轶事。

这听起来很简单，但我似乎无法让弹出叠加层表现我想要的样子。我在网上找到了很多关于如何添加这些标记并打开infoWindow的例子，但它们并没有按照我的要求去做：

1）infowindows在标记的顶部，左侧，右侧或底部显示为语音气球 2）这改变了我的地图 3）我不知道如何在激活弹出覆盖图

时使我的地图变灰

有人能指出我正确的方向吗？我应该只使用CSS / Javascript / jQuery来实现这一目标吗？我可以在Google Maps API中使用任何内容吗？我对Angular有一些基本知识，并希望能够更好地学习它。 Angular适用于此吗？任何帮助表示赞赏。

   <!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <title>My Travels</title>
    <style>
      html, body, #map-canvas {
        height: 375px;
        width: 600px;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
        function initialize() {
            var mapOptions = {
                zoom: 1,                                        // zoom level
                center: new google.maps.LatLng(41,0)        //center of map
            }
            var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

            var taipeiContent = 'I Love Taipei!';
            var parisContent = 'I Love Paris!';
            var newyorkContent = 'I Love New York!';


            var locations = [      
                ['taipei', 25.0333, 121.6333, taipeiContent],
                ['paris', 48.8567, 2.3508, parisContent],
                ['newyork', 40.7127, 74.0059, newyorkContent],
            ];

            //function setMarkers (map, locations) {
                var marker, i;
                var markers = new Array();
                var infoWindow = new google.maps.InfoWindow({
                    maxWidth:300
                });
                for ( i=0; i<locations.length;i++ ) {
                    var marker = new google.maps.Marker({
                        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                        map: map,
                        title: locations[i][0],
                    });
                    markers.push(marker);

                    google.maps.event.addListener(marker,'click',(function(marker, i){ 
                        return function() {

                        infoWindow.setContent(locations[i][3]);
                        infoWindow.open(map,marker);
                        map.setCenter(marker.getPosition());
                        }
                    })(marker,i));
                }
                google.maps.event.addListener(map, "click", function() {infoWindow.close();});
            //}
        }
        window.onload = initialize;
        </script>
    </head>
    <body>
        <div id="map-canvas"></div>
    </body>
</html>

- 编辑 - 我知道纽约出现在吉尔吉斯斯坦，但现在这并不重要。

Google MaPs API v3标记到map-canvas中的灯箱

0 个答案: