Leaflet _ NextJS - мое приложение странно отображает маркер и всплывающее окно - PullRequest
Новая
       10

Leaflet _ NextJS - мое приложение странно отображает маркер и всплывающее окно

0 голосов
/ 20 февраля 2019

edit: я обнаружил, что для прикрепления маркера к позиции я должен использовать одно и то же значение для iconSize и iconAnchor.Но все же ищите, как выровнять всплывающее окно на значке.

edit2: edit2 - это скорее подсказка, я думаю, что на самом деле мой компонент хорошо рендерится, но для некоторыхПричиной, когда страница вычисляет позицию всплывающего окна, является некоторая задержка, которая ставит его в неправильное положение.В качестве доказательства, если я нажму на иконку, чтобы повторно отобразить всплывающее окно, оно будет отображаться в нужной позиции, чтобы просто слегка отрегулировать.Таким образом, решение может состоять в том, чтобы найти способ перенастроить отображение всплывающего окна. Я подтверждаю эту подсказку, используя setTimeout, чтобы установить всплывающее окно для устранения проблемы, даже если оно работает на хаквее, оно работает по принципу.

Я пытаюсь построить карту листовки с помощью NextJS.В настоящее время мое приложение отображает маркер и всплывающее окно вне определения местоположения в lng и lat.Я несколько запутался, поскольку для запуска работает только CDN, а не локальные файлы.Но потом, когда я помещаю косметику в свое приложение, система просто ломается, и мое всплывающее окно приближается к океану, маркер уходит в другой город, так что же происходит?Я не могу понять, что происходит.

Один интересный элемент заключается в том, что моя иконка приближается к месту, когда я увеличиваю масштаб.Когда я уменьшаю изображение, кажется, что значок идет дальше от места, это как если бы элемент не прилипал к месту.

Вот моя песочница: https://codesandbox.io/s/yv585k880j.

Вот фотография ситуации:

enter image description here

Вот мой код response.js: 

import React, {Component, Fragment} from "react"; 
import L from "leaflet" 
import   "~/lib/leaflet/leaflet.css"
import "~/lib/leaflet/leaflet"
import styled from "styled-components"
import Head from 'next/head' 

const Wrapper= styled.div`
  width:${props => props.width};
  height:${props => props.height};
`;

export default class Map extends Component{ 
  componentDidMount(){  
    this.map= L.map("map", { 
      center:[37.8349,-122.1297],
      zoom:12,
      zoomControl:true
    })
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 19,
      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    })
    .addTo(this.map)
    var placeholder = L.icon({
      iconUrl: "/static/assets/icons/placeholder.svg",       
      iconSize:     [37, 37],           
      iconAnchor:   [37.8349, -122.1297], // [37,37] to stick icon to location
     relative to the iconAnchor
  });

    var marker = L.marker([37.8349, -122.1297],{icon: placeholder}).addTo(this.map);
    marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
  }

  render(){
    // console.log("this.map.invalidateSize: ", this.map) 
    return (
      <Fragment>
          <Head>
          <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
   integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
   crossorigin=""/> 

     <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"
   integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
   crossorigin=""></script> 


          </Head>
        <Wrapper width="100vw" height="80vh" id="map"/>
        {/* <style jsx global>{lStyle}</style> */}
      </Fragment>
    )
  }
}

Любой намек был бы хорош,спасибо

...