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()
{
\t //--a scale value used to auto-size the symbols--
\t var scale=mymap.getZoom()/2
\t var symbols=SymbolG.childNodes
\t for(var k=0;k<symbols.length;k++)
\t {
\t \t var symbol=symbols.item(k)
\t \t //---initial lat/lng for symbol---
\t \t var lat=parseFloat(symbol.getAttribute("lat"))
\t \t var lng=parseFloat(symbol.getAttribute("lng"))
\t \t var latLng= new L.latLng(lat, lng)
\t \t var transX=mymap.latLngToLayerPoint(latLng).x
\t \t var transY=mymap.latLngToLayerPoint(latLng).y
\t \t //---trash previous transform---
\t \t symbol.setAttribute("transform","") //---required for IE
\t \t symbol.removeAttribute("transform")
\t \t var transformRequestObj=MySVG.createSVGTransform()
\t \t var animTransformList=symbol.transform
\t \t //---get baseVal to access/place object transforms
\t \t var transformList=animTransformList.baseVal
\t \t //---translate----
\t \t transformRequestObj.setTranslate(transX,transY)
\t \t transformList.appendItem(transformRequestObj)
\t \t transformList.consolidate()
\t \t //---scale---
\t \t transformRequestObj.setScale(scale,scale)
\t \t transformList.appendItem(transformRequestObj)
\t \t transformList.consolidate()
\t }
}
//--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>
沒有鏈接到你的「演示和完整的源代碼」 –
https://jsfiddle.net/youo8uht/5/這裏爵士.. – newbie
你應該隔離SVG代碼錯誤地呈現。這將有助於分析正在發生的事情。 – IvanSanchez