인라인 SVG에서 jvectormap으로

Question

지도를 jvector 맵에서 사용하도록 사용자 정의해야합니다. 그래서 인라인 SVG을 사용하여지도를 만듭니다. 지도는 완벽하게 보이지만 jvectormap을 사용하여지도를 조작 할 수는 없습니다. 나는 jvectormap에서 초보자 일 뿐이므로 내 코드가 약간 잘못되었다. 제발 아이디어가 있으면 대답을 받아들입니다.

미리 감사드립니다. 그 안에 markers 배열로 오작동이 형성되어

<div id="pantsun" > 
<svg title="well" width="500" height="300" style="border: 1px solid #000;background-color: lightgreen;" > 
    <rect x="200" y="0" width="30" height="300" style="fill:white;" /> 
    <rect x="0" y="50" width="500" height="30" style="fill:white;" /> 
    <rect x="0" y="150" width="500" height="30" style="fill:white;" /> 
    <rect x="10" y="18" width="30" height="30" style="fill:darkgrey;" /> 
    <rect x="45" y="18" width="30" height="30" style="fill:darkgrey;" /> 
    Sorry, your browser does not support inline SVG. 
    </svg> 
</div> 

<script> 

$(function(){ 
$('#pantsun').vectorMap({ 
    map: 'well', 
    backgroundColor: 'transparent', 
    markers: [{ 
    coords: [0, 50], 
    name: 'well 1', 
    style: {fill: 'white'} 
    },{ 
    coords: [0, 150], 
    name: 'well 2', 
    style: {fill: 'white'} 
}}}; 

</script> 

난 할 노력하고있어 것은이 link.

Answer 1

목적은 vectorMap에 전달하는이고 : 여기 어쨌든 내 코드의

대괄호 및 클로저가 누락되었습니다. 코드 들여 쓰기를 구성하면 이런 종류의 것을 쉽게 발견 할 수 있습니다.

설명서 및 예제가 좋지 않습니다. 여기에 how to solve the jvm is not defined error 코드를 테스트하는 동안 발견 된 (그리고 그 샘플 파일 중 하나에서 발생).

또한 Mall example that you cite에는 load a mall-map.js (귀하의 경우에는 well-map.js)까지 언급 할 필요가 없습니다. 그것은 당신의 코드에서이 오류가 발생합니다 : ... 내가 mall-map.js 테스트로 맵이 의미 아무것도 렌더링하지 않습니다, 여기

Uncaught Error: Attempt to use map which was not loaded: well

내가 테스트 코드,하지만 thrwon 인 더 JS 오류가 없습니다

<script src="assets/jquery-1.8.2.js"></script> 
<script src="../jquery-jvectormap-1.2.2.min.js"></script> 
<script src="../jquery-jvectormap.js"></script> 
<script src="mall-map.js"></script> 
<script> 
$(function(){ 
    $('#pantsun').vectorMap({ 
     map: 'mall', 
     backgroundColor: 'transparent', 
     markers: [ 
      { coords: [0, 50], name: 'well 1', style: {fill: 'white'} }, 
      { coords: [0, 150], name: 'well 2', style: {fill: 'white'} } 
     ] // <-- missing 
    }); // <-- mal formed 
});  // <-- mal formed 
</script>