[英]Google maps api V3 with rounded corner
我正在使用適用於JavaScript的Google Maps API v3。 我正在嘗試使地圖顯示為圓角。 我能找到的唯一方法就是幾年前的黑客攻擊,涉及將信息窗口更改為信息框。
現在有沒有更好的方法可以使用CSS執行此操作?
創建一個包含google map javascrip,google map3和最新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.setContent(data); 其中信息氣泡的數據將是html,您需要根據需要進行設置。
這個例子怎么樣? http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/examples/example.html
實際上,如果您想創建自己的InfoWindow設計,則可以輕松完成。 參考: 自定義信息窗口
我也嘗試過弄圓角,並找到了這種解決方案-也許會對您有所幫助? http://search.missouristate.edu/map/mobile/examples/corners.htm
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.