当 Google Chrome 读取我的 map 时，圆圈出现问题，如左图所示，而 Mozilla Firefox 可以完美读取右侧图像。
所以，我在将圆权重从1转换为7时发现了这个问题。 事实上，我一直在寻找解决方案，但没有任何帮助。 这是我的演示和完整源代码，位于
circle = L.circle([parseFloat(cordinate[0]), parseFloat(cordinate[1])], 7, {
color: markers[x].color,
opacity: 0.8,
weight: 7,
fillColor: markers[x].color,
fillOpacity: 0.8,
className:'circle-obj'
}).addTo(mymap);
https://jsfiddle.net/youo8uht/5/
如果有其他解决方案或替代方法，我很感激，谢谢:)
最佳答案
运动动画:更改描边宽度在除 FF 之外的所有浏览器中效果不佳。它尝试调整 SVG 元素的笔画，实际上它是一个标记。 我想提供一个在所有浏览器上都能很好地工作的示例。此示例使用您的数据并构建 SVG 圆圈而不是标记。 尝试一下。
var markers = [
{"state_id": 12,
"location": "2.9619, 101.7571",
"name": "Bandar Baru Bangi",
"subsribers": {
"total": 10,
"user_type": [
{
"type": "Student",
"total": 10
}
]
},
"color": "#E9D149"
},
{
"state_id": 12,
"location": "2.9725, 101.7948",
"name": "Taman Kajang Utama",
"subsribers": {
"total": 30,
"user_type": [
{
"type": "Student",
"total": 30
}
]
},
"color": "#E9D149"
},
{
"state_id": 10,
"location": "5.9804, 116.0735",
"name": "Kota Kinabalu",
"subsribers": {
"total": 20,
"user_type": [
{
"type": "Student",
"total": 20
}
]
},
"color": "#E9D149"
},
{
"state_id": 6,
"location": "3.7634, 103.2202",
"name": "Kuantan",
"subsribers": {
"total": 20,
"user_type": [
{
"type": "Student",
"total": 20
}
]
},
"color": "#E9D149"
},
{
"state_id": 14,
"location": "3.2637, 101.6538",
"name": "Selayang",
"subsribers": {
"total": 20,
"user_type": [
{
"type": "Parent",
"total": 20
}
]
},
"color": "#95D440"
},
{
"state_id": 12,
"location": "2.8123, 101.7809",
"name": "Bandar Baru Nilai",
"subsribers": {
"total": 20,
"user_type": [
{
"type": "Parent",
"total": 20
}
]
},
"color": "#95D440"
},
{
"state_id": 12,
"location": "2.9474, 101.8451",
"name": "Semenyih",
"subsribers": {
"total": 10,
"user_type": [
{
"type": "Parent",
"total": 10
}
]
},
"color": "#95D440"
},
{
"state_id": 10,
"location": "6.4657, 116.7264",
"name": "Kota Marudu",
"subsribers": {
"total": 10,
"user_type": [
{
"type": "Teacher",
"total": 10
}
]
},
"color": "#0097E2"
},
{
"state_id": 11,
"location": "1.6077, 110.3785",
"name": "Kuching",
"subsribers": {
"total": 40,
"user_type": [
{
"type": "Student",
"total": 30
},
{
"type": "Parent",
"total": 5
},
{
"type": "Teacher",
"total": 5
}
]
},
"color": "#FC3915"
}
];
var mymap;
var NS="http://www.w3.org/2000/svg"
var MySVG;
var SymbolG;
$(document).ready(function(){
var mapView = [4.2105, 101.9758];
mymap = L.map('mapid').setView(mapView, 6);
//---zooming the map---
mymap.on("viewreset", adjustSVGSymbols);
var offset = mymap.getSize().x*0.30;
mymap.panBy(new L.Point(offset, 0), {animate: false});
mymap.attributionControl.setPrefix('');
//---CREATE SVG---
mymap._initPathRoot() //---creates an svg layer---
MySVG=document.querySelector("svg") //---access svg element---
//---place symbols in here---
SymbolG=document.createElementNS(NS,"g")
MySVG.appendChild(SymbolG)
userCoordinateSVG();
});
function userCoordinateSVG(){
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
}).addTo(mymap);
var circle, cordinate;
for(var x in markers){
cordinate = markers[x].location.split(',');
var lat=parseFloat(cordinate[0])
var lng=parseFloat(cordinate[1])
circle=document.createElementNS(NS,"circle")
circle.setAttribute("class","circle-obj")
circle.setAttribute("cursor","default")
circle.setAttribute("opacity",.8)
circle.setAttribute("fill",markers[x].color)
circle.setAttribute("r",5)
for(var y in markers[x].subsribers.user_type){
user = markers[x].subsribers.user_type[y];
}
//---attach data to element--
circle.setAttribute("state",markers[x].state_id)
circle.setAttribute("subscribers",markers[x].subsribers.total)
circle.setAttribute("name",markers[x].name)
circle.setAttribute("total",user.total)
circle.setAttribute("type",user.type)
circle.setAttribute("onmouseover","showData(evt)")
circle.setAttribute("onmouseout","hideData(evt)")
//---required for sizing/reposition on zoom---
circle.setAttribute("lat",lat)
circle.setAttribute("lng",lng)
//---convert lat/lng to x,y---
var latLng= new L.latLng(lat, lng)
var transX=mymap.latLngToLayerPoint(latLng).x
var transY=mymap.latLngToLayerPoint(latLng).y
circle.setAttribute("transform","translate("+transX+" "+transY+")")
SymbolG.appendChild(circle)
}
}
//--- on map zoom - fired via map event: viewreset---
function adjustSVGSymbols()
{
//--a scale value used to auto-size the symbols--
var scale=mymap.getZoom()/2
var symbols=SymbolG.childNodes
for(var k=0;k<symbols.length;k++)
{
var symbol=symbols.item(k)
//---initial lat/lng for symbol---
var lat=parseFloat(symbol.getAttribute("lat"))
var lng=parseFloat(symbol.getAttribute("lng"))
var latLng= new L.latLng(lat, lng)
var transX=mymap.latLngToLayerPoint(latLng).x
var transY=mymap.latLngToLayerPoint(latLng).y
//---trash previous transform---
symbol.setAttribute("transform","") //---required for IE
symbol.removeAttribute("transform")
var transformRequestObj=MySVG.createSVGTransform()
var animTransformList=symbol.transform
//---get baseVal to access/place object transforms
var transformList=animTransformList.baseVal
//---translate----
transformRequestObj.setTranslate(transX,transY)
transformList.appendItem(transformRequestObj)
transformList.consolidate()
//---scale---
transformRequestObj.setScale(scale,scale)
transformList.appendItem(transformRequestObj)
transformList.consolidate()
}
}
//--show/hide data---
function showData(evt)
{
var target=evt.target
target.setAttribute("stroke","black")
target.setAttribute("stroke-width",".2")
//---locate dataDiv near cursor--
var x = evt.clientX;
var y = evt.clientY;
dataDiv.style.left=10+x+"px"
dataDiv.style.top=20+y+"px"
//---data--
var state=target.getAttribute("state")
var subscribers=target.getAttribute("subscribers")
var name=target.getAttribute("name")
var total=target.getAttribute("total")
var type=target.getAttribute("type")
//---format as desired---
var html=state+subscribers+name+total+type
dataDiv.innerHTML=html
dataDiv.style.visibility="visible"
}
function hideData(evt)
{
dataDiv.style.visibility="hidden"
var target=evt.target
target.removeAttribute("stroke")
target.removeAttribute("stroke-width")
}<!DOCTYPE HTML>
<html>
<head>
<title>Leaflet w/SVG layer</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
</head>
<body>
<div class="col-md-12" style="padding:0px;margin:0px;">
<div id="mapid" style="height: 385px" class="widget-body"></div>
</div>
<div id=dataDiv style='box-shadow: 4px 4px 4px #888888;-webkit-box-shadow:2px 3px 4px #888888;font-size:80%;z-index:20;padding:2px;position:absolute;top:0px;left:0px;visibility:hidden;background-color:linen;border: solid 1px black;border-radius:5px;'></div>
</body>
</html>关于javascript - leafletjs - 谷歌浏览器呈现的圆圈并不完美，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38040910/