谷歌地图api V3与圆角 [英] Google maps api V3 with rounded corner

问题描述

我使用google maps api v3 for javascript。我试图使地图显示圆角。我可以找到这样做的唯一方法是从几年前的黑客，涉及更改信息窗口成一个信息框。

I'm using the google maps api v3 for javascript. I'm trying to make the map display with rounded corners. The only way I can find to do this are hacks from a couple years ago involving changing the infowindow into a infobox.

现在有一个更好的方法，现在用css ？

Is there a better way to do this now with css?

推荐答案

创建一个包含google地图javascrip，google map3和最新jquery的html。

不要忘记添加infobubble js，这将要做的伎俩。
answer将以下jquery代码添加到html文件中

Create one html which contain google map javascrip ,google map3 and latest jquery.
Do not forget to add infobubble js which will about to do trick.
Add following jquery code to html file

$('#homepage_map').gmap3
            (
                {
                    action:'init',
                    options:
                    {
                        center:[response.locations.latitude, response.locations.longitude],
                        zoom: 8,
                        mapTypeId: google.maps.MapTypeId.ROADMAP,
                        mapTypeControl: true,
                        navigationControl: true,
                        scrollwheel: true,
                        mapTypeControlOptions:
                        {
                            mapTypeIds: ['Map']
                        },
                        streetViewControl: true
                    }
                },
                {
                    action:'clear'
                },
                {
                    action: 'addMarkers',
                    markers:MarkerOBJ,
                    marker:
                    {
                        options:
                        {
                            draggable: false,
                            icon: HOST+'img/icons/google_marker.png',
                            animation: google.maps.Animation.DROP
                        },
                        events:
                        {
                            click: function(marker, event, data)
                            {
                                var map = $(this).gmap3('get');
                                infoBubble = new InfoBubble({
                                    maxWidth: 395,
                                    shadowStyle: 1,
                                    padding: 5,
                                    borderRadius: 10,
                                    arrowSize: 20,
                                    borderWidth: 5,
                                    borderColor: '#CCC',
                                    disableAutoPan: true,
                                    hideCloseButton: false,
                                    arrowPosition: 50,
                                    arrowStyle: 0
                                });
                                infoBubble.close();
                                infoBubble.setContent(data);
                                infoBubble.open(map, marker);
                            }
                        }
                    }
                }
            );

现在，您需要做的就是添加样式表信息泡显示。
infoBubble.setContent（data）; 其中数据将为html，您需要根据您的需要设置信息气泡。

now all you need to do is add stylesheet as you want to infobubble to display. infoBubble.setContent(data); where data will be html for the infobubble you need to set it as per your need.

这篇关于谷歌地图api V3与圆角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！