如何在缩放/获取当前缩放值JVectorMap时使标记变大 [英] How to make the markers get bigger on zoom/getting current zoom value JVectorMap
问题描述
所以我希望标记在放大多少之后变得更大。我想我可以弄清楚如何使标记大小取决于缩放值，但我不知道如何获得缩放值。
So I want the markers to get bigger after how much it is zoomed in. I guess I could figure out how to make the marker size depend on the zoom value, but I dont know how to obtain zoom value.
我试图找到一些关于此的文档，但似乎没有。
I have tried to find some documentation on this but it seems like there is none.
所以我希望你们中的一个聪明人知道：）
So i hope one of you intelligent people know :)
所有帮助表示赞赏
编辑：
edit:
所以我制作地图div：
So i make the map div:
<div id="world-map" style="vertical-align: middle; width: 100%; height: 460px;"></div>
为了制作地图脚本，我有一个php文件，通过一个文件夹查找其他相应位置的文件夹里面的名称和坐标文件（这个系统的原因是，当你按下标记时，我可以打印文件夹内的图片，你可以看到地方的图片）
To make the map script i have a php file that goes trough a folder finding other folders with corresponding place names and coordinate files inside(reason for this system is so i can print the pictures inside the folders when you press the marker you can see the pictures from the place)
php脚本回应了这个：
The php script echoes this:
$(function(){
$("#world-map").vectorMap({
map: "world_mill",
scaleColors: ["#C8EEFF", "#0071A4"],
normalizeFunction: "polynomial",
zoomMax: 1000,
hoverOpacity: 0.7,
onMarkerClick: function(e, code){
var mapObj = $("#world-map").vectorMap("get", "mapObject");
var idx = code; // optional
var name = mapObj.markers[idx].config.name;
var latitude = mapObj.markers[idx].config.latLng[0];
var longitude = mapObj.markers[idx].config.latLng[1];
namePlace = name;
$.ajax({
url: "updatePlace.php",
type: "GET", // performing a POST request
data : {
data1 : name // will be accessible in $_POST["data1"]
},
dataType: "json",
success: function(data)
{
placesArray = data;
newPlace();
}
});
},
hoverColor: false,
markerStyle: {
initial: {
r: 2,
fill: "#188a9a",
stroke: "#383f47"
}
},
backgroundColor: "#383f47",
//this will be done for each folder
markers: [{latLng: [" . $long . ", " . $lati ."], name: '" . $placeFolder[$i] ."'}];
] });
});
使用cookie在php代码中打印php echo。无论我在php中回应什么，都会像在html文件中的脚本中编写它一样。
The php echo is printed inside the html code by using cookies. Whatever i echo in the php will be the same as writing it in script inside the html file.
推荐答案
假设您使用的是jVectorMap的标准内置标记，则无法使用CSS来增加jVectorMap的宽度标记，因为 radius 是SVG属性。
Assuming you are using the standard built-in markers of jVectorMap, you can't use CSS to increase the width of the markers, because the radius is a SVG attribute.
以下是如何增加大小的示例通过直接设置 radius 属性，jVectorMap的标准圆形SVG标记。放大，你会看到标记在扩大。
Here is an example of how to increase the size of the standard round SVG markers of jVectorMap by setting directly the radius attribute. Zoom in and you will see the markers expanding.
$(document).ready(function () {
$("#map").vectorMap({
map: "world_mill",
backgroundColor: "aliceblue",
zoomOnScroll: true,
regionStyle: {
initial: { fill: "lightgrey" }
},
markerStyle: {
initial: { fill: '#F8E23B', stroke: '#383f47' }
},
markers: [
{latLng: [40.372338, 49.85211], name: 'BAKU'},
{latLng: [1.291432, 103.86391], name: 'MARINA BAY'},
{latLng: [47.581711, 19.250611], name: 'HUNGARORING'}
],
onViewportChange: function(event, scaleFactor){
var map = $("#map").vectorMap("get", "mapObject");
if(map) {
var markers = map.markers,
min = 5,
max = 18,
r = ~~Math.min(Math.max(min * scaleFactor, min), max);
for(var m in markers) {
var el = markers[m].element,
style = el.config.style;
el.shape.node.setAttribute('r', r);
style.initial.r = r;
style.hover.r = r;
}
}
}
});
});
<html>
<head>
<link rel="stylesheet" href="http://jvectormap.com/css/jquery-jvectormap-2.0.3.css" type="text/css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://jvectormap.com/js/jquery-jvectormap-2.0.3.min.js"></script>
<script src="http://jvectormap.com/js/jquery-jvectormap-world-mill.js"></script>
</head>
<body>
<div id="map" style="width: 600px; height: 400px"></div>
</body>
</html>
由于您未在问题中指明如何定义标记，以及您需要的尺寸，您可以使用此适应它的例子（但我认为这是一个很好的起点）。
As you haven't specified in your question how you are defining the markers, and which size you need, You may play with this example to adapt it (but, i believe is is a good starting point).
这篇关于如何在缩放/获取当前缩放值JVectorMap时使标记变大的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
