Closed xiang0723 closed 3 years ago
Finally...I give up disabling zoomin/out.
and add setting : showLabels: false,
Change to add custom <text>
label append to <svg>
//自訂地名<text>
function addText() {
//建立資料陣列
let markers = [
{"name":"基隆市","coordinate":[740,100]},
{"name":"臺北市","coordinate":[660,130]},
{"name":"新北市","coordinate":[680,180]},
{"name":"桃園市","coordinate":[550,160]},
{"name":"新竹市","coordinate":[480,220]},
{"name":"新竹縣","coordinate":[540,250]},
{"name":"宜蘭縣","coordinate":[680,300]},
{"name":"苗栗縣","coordinate":[460,320]},
{"name":"臺中市","coordinate":[460,410]},
{"name":"彰化縣","coordinate":[340,500]},
{"name":"南投縣","coordinate":[480,530]},
{"name":"雲林縣","coordinate":[320,570]},
{"name":"嘉義市","coordinate":[320,640]},
{"name":"嘉義縣","coordinate":[400,660]},
{"name":"臺南市","coordinate":[300,750]},
{"name":"高雄市","coordinate":[400,800]},
{"name":"屏東縣","coordinate":[370,930]},
{"name":"花蓮縣","coordinate":[620,530]},
{"name":"臺東縣","coordinate":[520,800]},
{"name":"連江縣","coordinate":[60,80]},
{"name":"金門縣","coordinate":[60,310]},
{"name":"澎湖縣","coordinate":[60,570]},
];
//產生<text>
$.each(markers, function (key, data) {
var myText = data.name;
var newText = document.createElementNS("http://www.w3.org/2000/svg","text");
newText.setAttributeNS(null,"x",data.coordinate[0]);
newText.setAttributeNS(null,"y",data.coordinate[1]);
// newText.setAttributeNS(null,"width","100%");
// newText.setAttributeNS(null,"height","auto");
// newText.setAttributeNS(null,"font-size","22");
newText.setAttributeNS(null,"data-type","marker");
// newText.setAttributeNS(null,"tabindex","0");
newText.setAttributeNS(null,"class","vmap_marker _pointer _noneclick");
newText.appendChild(document.createTextNode(myText));
$("#vmap").find("svg").find("g").append(newText);
});
}
addText();
If anyone search for the solution, here it is:
You have to delete or just comment out the code on the line 707, all the way down to 794.
jQuery(this.container).bind('touchmove', function (e) {
I have setted "enableZoom: False," but on Mobile / Table device, still can use two finger zoomin/zoomout. The pin position will change and cannot be matched.
This is my demo: https://xiang666.ddns.net/_case/jqmap_taiwan/
use: jquery 3.6.0 JQVMap: jQuery Vector Map Library version 1.5.1