2011-01-02 8 views
8

संभव डुप्लिकेट:
Transparent rounded corners on Google Mapक्या Google मानचित्र पर गोलाकार कोनों को रखने की कोई चाल है?

मैं विशिष्ट ब्राउज़र के लिए हमेशा की तरह शैली पत्रक गुण का उपयोग कर की कोशिश की है, लेकिन कोई भी काम करने के लिए लग रहे हैं। क्या ऐसा करने के लिए कोई चाल है? मुझे पता है कि मैंने इसे जंगली में देखा है, लेकिन उसे याद नहीं किया जा सकता है।

+0

शायद दस्तावेज़ तैयार होने के बाद शैली जोड़ने के बाद शायद – Breezer

+0

काम कर सकता है! इस उत्तर का प्रयास करें: http://stackoverflow.com/questions/16292026/css3-rounded-corner-with-google-map/30523342#30523342 – teradyl

उत्तर

10

this thread में इस विषय पर चर्चा करते हुए, this page का एक लिंक है, जिसमें आप जो भी खोज रहे हैं उसका एक उदाहरण है।

रणनीति गोलाकार कोने छवियों के साथ मानचित्र को ओवरले करना प्रतीत होता है।

संपादित करें: यहां नमूना कोड है।

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Rounded Map Corners - Google Maps Javascript API v3</title> 
<style> 
    html, body {height: 100%; margin: 0;} 
    #Container {position:relative;width:400px;margin:20px;} 
    .TopLeft, .TopRight, .BottomLeft, .BottomRight {position:absolute;z-index:1000;background-image: url(corners.png);width:20px;height:20px;} 
    .TopLeft {left: 0; top: 0;} 
    .TopRight {right: 0; top: 0; background-position: top right;} 
    .BottomRight {right: 0; bottom: 0; background-position: bottom right;} 
    .BottomLeft {left: 0; bottom: 0; background-position: bottom left;} 
    #map_canvas {width: 400px; height: 400px;} 
</style> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
var map; 
function Initialize() { 
    var MapOptions = { 
     zoom: 15, 
     center: new google.maps.LatLng(37.20084, -93.28121), 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     sensor: false 
}; 
map = new google.maps.Map(document.getElementById("map_canvas"), MapOptions); 
} 
</script> 
</head> 
<body onload="Initialize()"> 
<div id="Container"> 
    <div class="TopLeft"></div> 
    <div class="TopRight"></div> 
    <div id="map_canvas"></div> 
    <div class="BottomLeft"></div> 
    <div class="BottomRight"></div> 
</div> 
</body></html> 
+0

अब मुझे यह क्यों नहीं मिला। धन्यवाद! –

+0

हे भगवान के लिए ओह, कृपया स्टैक ओवरफ्लो प्रश्नों के लिए वास्तविक समाधान दें! –

+0

@jb। मुझे लगता है कि लिंक के साथ जवाब देने पर मेटा पोस्ट के साथ मेरा जवाब कम या कम है। मैंने मूल रणनीति दी और एक उदाहरण से जुड़ा हुआ। http://meta.stackexchange.com/a/13370 – goric

संबंधित मुद्दे