Question

对于Google Maps API，我是一个完整的新手。希望有人能帮忙解决一个简短的问题

下面是我的代码，首先我如何控制地图的大小，以及如何在点击标记时显示地址？

    <script>
            $(document).ready(function() {
                $('.google-maps').gmap3({
                    map:{
                        address: "PL1 3LF",
                        options:{
                            zoom: 10,
                            mapTypeId: google.maps.MapTypeId.ROADMAP,
                            mapTypeControl: false,
                            mapTypeControlOptions: {
                                style: google.maps.MapTypeControlStyle.DEFAULT
                            },
                            navigationControl: true,
                            scrollwheel: false,
                            streetViewControl: false
                        }
                    },
                    marker:{
    values:[
      {address:"PL21 0SZ"},
      {address:"PL1 3LF"}
    ]
}
                });
            });
        </script>

Answer 1

通过设置包含元素的大小来控制地图的大小。见your plugins docs

对于弹出窗口：从http://gmap3.net/en/catalog/10-overlays/marker-41获取第二个代码段，然后尝试将“mouseover”事件更改为click-event。还要编辑

行

infowindow.setContent(context.data)

以满足您的需求，例如您可以使用context.address而不是数据。

Answer 2

尝试谷歌地图而不是g3maps .. Google Maps API。地理定位，标记，动画，路径等的完整解决方案。

Answer 3

签出此simple map builder，如果要做的就是添加带弹出窗口的自定义标记，它应该可以解决问题。除非你想做更复杂的事情，否则你不需要使用API。

Answer 4

控制地图的大小非常简单。您正在将地图放入.google-maps，因此只需调整其大小：

.google-maps {
   width: 500px;
   height: 300px;
}

弹出窗口可以通过标记上的事件完成：

marker: {
    values: [{
        latLng: [48.8620722, 2.352047],
        data: "Paris !"
    }, {
        address: "86000 Poitiers, France",
        data: "Poitiers : great city !"
    }],
    options: {
        draggable: false
    },
    events: {
        click: function(marker, event, context) {
            var map = $(this).gmap3("get"),
                infowindow = $(this).gmap3({
                    get: {
                        name: "infowindow"
                    }
                });
            if (infowindow) {
                infowindow.open(map, marker);
                infowindow.setContent(context.data);
            } else {
                $(this).gmap3({
                    infowindow: {
                        anchor: marker,
                        options: {
                            content: context.data
                        }
                    }
                });
            }
        }
    }
}

谷歌地图放置弹出框和大小

4 个答案: