我正在使用谷歌地圖api v3的JavaScript。我正在嘗試使圓角地圖顯示。我能找到的唯一方法就是從幾年前開始將infowindow變成信息框。谷歌地圖api V3與圓角
有沒有更好的方式來做到這一點,現在與CSS?
我正在使用谷歌地圖api v3的JavaScript。我正在嘗試使圓角地圖顯示。我能找到的唯一方法就是從幾年前開始將infowindow變成信息框。谷歌地圖api V3與圓角
有沒有更好的方式來做到這一點,現在與CSS?
創建一個包含谷歌地圖javascrip,谷歌地圖3和最新的jQuery的HTML。
不要忘記添加infobubble js將要做的伎倆。
添加下面的jQuery代碼到HTML文件
$('#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顯示添加樣式表。 infoBubble.setContent(data);其中數據將是您需要根據需要設置的infobubble的html。
這個例子呢? http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/examples/example.html
實際上,如果你想創建自己的InfoWindow設計,你可以輕鬆做到。 參考:Customizing an InfoWindow
我也試圖做出圓角,並發現這種解決方案 - 也許它會幫助你? http://search.missouristate.edu/map/mobile/examples/corners.htm
請勿發佈僅限鏈接的答案。鏈接消失了。 – MrUpsidown
但我想實際的地圖有圓角。 –
我明白了,我在想... – wf9a5m75
對不起。我嘗試了幾種方法,但我放棄了。 – wf9a5m75