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 :)

All help appreciated

edit:

So i make the map div:

<div id="world-map" style="vertical-align: middle; width: 100%; height: 460px;"></div>

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)

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] ."'}]; 
] });
});

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.

回答1:

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.

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).

来源：https://stackoverflow.com/questions/45641395/how-to-make-the-markers-get-bigger-on-zoom-getting-current-zoom-value-jvectormap

标签

javascript

jquery

html

css

jvectormap