Javascript Girl
  1. Javascript Girl
  3. Carte Jvector, comment se concentrer sur un marqueur?
Intereting Posts
Est-il possible de passer par valeur par référence en JavaScript? JavaScript mailto function loading issue L'utilisation du fichier index.ts pour exporter la classe provoque un indéfini dans un constructeur injecté Window.postMessage – difficultés pour le faire fonctionner Concepteur d'objets Javascript versus objet littéral Obtenez le document mis à jour dans MongoDB Renvoi des valeurs des fonctions imbriquées en Javascript Retour des données de la requête jquery ajax Ajouter une lecture automatique pour une vidéo en carrousel lisse Opérations de charge à longue durée à durandal Javascript / Jquery pour changer la classe onclick? Événement de chargement de l'application Java FX ContentEditable Alternative JSON.parse string avec des citations Liste des structures de données en JavaScript

Carte Jvector, comment se concentrer sur un marqueur?

Un autre problème frustrant que j'ai avec Jvectormap, je souhaite me concentrer sur un Marker sur la charge de page / carte via lngLat, comment ferais-je cela? Idéalement, il serait bon de se concentrer sur ce marqueur ou de se concentrer sur le démarrage. Je afficherai seulement 1 marqueur par carte, mais je ne connaîtrai jamais le code lngLat ou éventuellement countrycode. Il pourrait y avoir un moyen plus simple de faire cela afin que les suggestions soient les bienvenues. Merci de votre aide en avance 

var markers = [ {latLng: [47.774099, -52.793427], name: "loc 1", label: "This blahblah"}] $(function(){ $('#map1').vectorMap({ map: 'world_mill_en', scale: ['#C8EEFF', '#0071A4'], normalizeFunction: 'polynomial', hoverOpacity: 0.7, hoverColor: false, markerStyle: { initial: { fill: '#F8E23B', stroke: '#383f47' } }, backgroundColor: '#383f47', markers: markers, focusOn:{ latLng: [47.774099, -52.793427], scale: 5 }, onMarkerLabelShow: function(event, label, index) { label.html( ''+markers[index].label+''); } }); });

J'ai eu la même chose que vous et j'ai rencontré votre question sans réponse. C'est le code que j'ai écrit (slash copié, collé et modifié de la source jVectorMap) pour résoudre le problème pour moi-même. J'espère que vous et d'autres vous l'auront aidé.

Il suffit de passer l'échelle, la longitude et la latitude pour configurerFocusLatLng.

Je peux tenter d'obtenir ceci ou quelque chose de similaire accepté dans le projet jVectorMap sur GitHub, donc il peut y avoir une meilleure façon de le faire plus tard.

Avertissement: Les points au bord de la carte ne seront pas centrés. Ils devraient cependant être dans la vue.

EDIT: Comme demandé, voici tout sur jsfiddle: http://jsfiddle.net/BryanTheScott/rs7H5/

EDIT: A également ajouté le reste des JS ci-dessous: 

 $(function(){ var smallMap = $('#my_map_container').vectorMap({ map: 'world_mill_en', zoomOnScroll: true, zoomMax:5, zoomMin:5, regionStyle: { initial: { fill: '#222222', "fill-opacity": 1, stroke: '#444444', "stroke-width": 1, "stroke-opacity": 0.7 }, hover: { "fill-opacity": 0.8, fill: '#333333' } }, markerStyle: { initial: { fill: "#000000", "stroke": "#7FC556", "stroke-width": 2, r: 3 } }, markers: [[37.770172,-122.422771]] }); var mapObj = $('#my_map_container').vectorMap('get', 'mapObject'); mapObj.setFocusLatLng = function(scale, lat, lng){ var point, proj = jvm.WorldMap.maps[this.params.map].projection, centralMeridian = proj.centralMeridian, width = this.width - this.baseTransX * 2 * this.baseScale, height = this.height - this.baseTransY * 2 * this.baseScale, inset, bbox, scaleFactor = this.scale / this.baseScale, centerX, centerY; if (lng < (-180 + centralMeridian)) { lng += 360; } point = jvm.Proj[proj.type](lat, lng, centralMeridian); inset = this.getInsetForPoint(point.x, point.y); if (inset) { bbox = inset.bbox; centerX = (point.x - bbox[0].x) / (bbox[1].x - bbox[0].x); centerY = (point.y - bbox[0].y) / (bbox[1].y - bbox[0].y); this.setFocus(scale, centerX, centerY); } } mapObj.setFocusLatLng(5, 37.770172,-122.422771); });