I create a marker to place on a Google map:
var compMarker = new google.maps.Marker({
position: {lat: 33, lng: -118}
map: map,
label: {
text: "10",
color: "white",
fontWeight: "bold"
},
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 15,
fillColor: "#4E90D9",
fillOpacity: 1,
strokeWeight: 1
}
});
This is the result:
As you can see the circle is pretty choppy looking. Is there a way to create a high quality circle?
One option would be to use a custom SVG icon.
icon: {
url:'data:image/svg+xml;charset=utf-8,' + encodeURIComponent ('<svg viewBox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"><circle cx="110" cy="110" r="100" stroke="black" fill="#4E90D9" fill-opacity="1.0" stroke-width="10" /></svg>'),
size: new google.maps.Size(200,200),
scaledSize: new google.maps.Size(32,32),
anchor: new google.maps.Point(16,16),
labelOrigin: new google.maps.Point(16,16)
},
Related questions dealing with issues in IE11:
code snippet:
function initMap() { var pointA = new google.maps.LatLng(53.3163803, -6.2676661), myOptions = { zoom: 15, center: pointA }, map = new google.maps.Map(document.getElementById('map-canvas'), myOptions), markerA = new google.maps.Marker({ position: pointA, title: "SVG icon", label: { text: "10", color: "white" }, icon: { url:'data:image/svg+xml;charset=utf-8,' + encodeURIComponent('<svg viewBox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"><circle cx="110" cy="110" r="100" stroke="black" fill="#4E90D9" fill-opacity="1.0" stroke-width="10" /></svg>'), size: new google.maps.Size(200, 200), scaledSize: new google.maps.Size(32, 32), anchor: new google.maps.Point(16, 16), labelOrigin: new google.maps.Point(16, 16) }, map: map }); } google.maps.event.addDomListener(window, 'load', initMap);
html, body, #map-canvas { height: 100%; width: 100%; padding: 0px; margin: 0px; }
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script> <div id='map-canvas'></div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.