Question

编辑：我发现要将标记粘贴在位置上，我必须对iconSize和iconAnchor使用相同的值。但仍要寻找如何在图标上对齐弹出窗口。

edit2：edit2只是一个提示，我认为实际上我的组件呈现良好，但是由于某些原因，当页面计算弹出窗口的位置时，会有一些滞后将其置于错误的位置。为了证明这一点，如果我单击该图标以重新渲染弹出窗口，则该弹出窗口会很好地显示在原始位置，只需要稍微调整一下即可。因此，解决方案可能是找到一种方法来重新调整popUp的显示。我确认了这一提示，使用setTimeout设置popUp可以解决问题，即使它在hackway上也可以在原理。

我正在尝试使用NextJS构建传单地图。目前，我的应用程序在lng和lat确定的位置之外显示标记和弹出窗口。我有些困惑，因为只能启动CDN而不是本地文件。但是，当我将化妆品放在我的应用程序上时，系统刚刚坏了，我的弹出窗口靠近海洋，标记离开了另一个城市，所以怎么回事？我不知道发生了什么。

一个有趣的元素是缩放时我的图标靠近该位置。当我向下缩放时，图标似乎离该位置更远，就好像该元素没有固定在该位置上。

这是我的沙盒：https://codesandbox.io/s/yv585k880j。

下面是情况的照片：

这是我的react.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>
    )
  }
}

任何提示都会很棒，谢谢

传单_ NextJS-我的应用奇怪地显示标记和弹出窗口

0 个答案: