Question

我正在使用LeafletJS，但我无法弄清楚如何改变标记起源的位置。

目前，标记的起源（它们被“胶合”到地图上的虚点）位于左上角。

我需要它是左下角，因为我的标记HTML看起来有点像旗帜。

var html = '<div class="tag_main_pedestrian">' + content + '</div><div class="triangle_pedestrian"></div>';
var icon = L.divIcon({html: html, className: 'tag_icon_pedestrian'});
        this.markers[beacon] = L.marker(this.pedestrians[index].geotag,
        {icon: icon});
this.markers[beacon].addTo(this.map);

有没有办法用LeafletJS做到这一点？

或者我需要做一些非常复杂的CSS吗？（标记根据其内容垂直和水平扩展。）

更新：我正在创建标记：

type User struct {
        ID                   int    `json:"id"`
        Email                string `json:"email"`
        Password             string `json:"password"`
        ConfirmationPassword string `json:"confirmationPassword"`
        passwordDigest       string `json:"-"`
        CreatedAt            time.Time `json:"createdAt,omitempty"`
        ModifiedAt           time.Time `json:"modifiedAt,omitempty"`
}

//UserStore is the interface for all User functions that interact with the database
type UserStore interface {
        GetUserByEmailAndPassword(email, password string) (User, error)
        UpdatePassword(u UserAction, previousPassword, password, confirmationPassword string) error
        UserExists(email string) (bool, error)
        CreateUser(u UserAction) error
}

// I am going against design Principles by having GetID, GetEmail, since JSON unmarshalling needs the struct fields to be capitalized, which is already a warning sign for me

type UserAction interface {
        GetID() int
        GetEmail() string
        Timestamps() (time.Time, time.Time)
        SetID(id int)
        SetTimestamps()
        SetPassword(password, confirmation string)
        SetDigest(digest string)
        CreateDigest() (string, error)
        VerifyPassword() error
        ComparePassword(password string) error
}

// Example of UserActions
func (u *User) CreateDigest() (string, error) {
        var digest string
        if err := u.VerifyPassword(); err != nil {
                return digest, err
        }

        passwordByte, err := bcrypt.GenerateFromPassword([]byte(u.Password), bcrypt.DefaultCost)
        if err != nil {
                return digest, err
        }

        digest = string(passwordByte)
        return digest, nil
}

func (u *User) VerifyPassword() error {
        if len(u.Password) < 6 {
                return &modelError{"Password", "must be at least 6 characters long"}
        }

        if u.Password != u.ConfirmationPassword {
                return &modelError{"ConfirmationPassword", "does not match Password"}
        }

        return nil
}

// Example of DB Action
func (db *DB) CreateUser(ua UserAction) error {
        if exists, err := db.UserExists(ua.GetEmail()); err != nil {
                return err
        } else if exists {
                return &modelError{"Email", "already exists in the system"}
        }

        // set password
        digest, err := ua.CreateDigest()
        if  err != nil {
                return err
        }

        ua.SetDigest(digest)
        ua.SetTimestamps()

        createdAt, modifiedAt := ua.Timestamps()

        rows, err := db.Query(`
                INSERT INTO users (email, password_digest, created_at, modified_at)
                        VALUES ($1, $2, $3, $4)
                        RETURNING id
                `, ua.GetEmail(), digest, createdAt, modifiedAt)

        if err != nil {
                return err
        }

        defer rows.Close()

        var id int
        for rows.Next() {
                if err := rows.Scan(&id); err != nil {
                        return err
                }
        }

        ua.SetID(id)

        return nil
}

Answer 1

试试这个CSS代码：

position: fixed;
bottom: 0;
left: 0;

有人已经在这里询问了与此有关的事情：

CSS - Placement of a div in the lower left-hand corner

希望对你有所帮助。

Answer 2

确实你需要使用自己的CSS来向上移动你的图标，但它不应该是“非常复杂的”。

通常使用CSS变换应该可以解决问题：

var paris = [48.86, 2.35];
var map = L.map('map').setView(paris, 11);

var myHtml = '<div class="iconContent" id="content"></div>';

var myIcon = L.divIcon({
  html: myHtml,
  className: 'tag_icon_pedestrian',
  iconSize: null,
});

L.marker(paris, {
  icon: myIcon,
}).addTo(map);

var inputEl = document.getElementById('input');
var contentEl = document.getElementById('content');
inputEl.addEventListener('input', updateContent);
updateContent();

function updateContent() {
  contentEl.innerHTML = inputEl.value;
}

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

.tag_icon_pedestrian {
  height: 0; /* Avoid a "ghost" clickable area */
}

.iconContent {
  background-color: yellow;
  border: 1px solid black;
  transform: translateY(-100%); /* Move your icon its full content height */
}

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>

<input value="Lorem ipsum" id="input" />
<div id="map" style="height: 160px"></div>

Answer 3

我解决此问题的方法是让L.DivIcon包含零大小，相对定位<div>，并在其中包含另一个<div>。内部<div>绝对定位（与最近的祖先相关，具有明确的position CSS样式，这是外部的。）

代码如下所示。注意我添加一些边框只是为了查看每个<div>的位置：

var html = `
<div style="position: relative; width: 0; height: 0; border: 3px black solid">
  <div style="position: absolute; bottom: 0; border:2px red solid; background:white">
    Null Island
  </div>
</div>
`;

var icon = L.divIcon({html: html});

L.marker([0, 0], {icon: icon}).addTo(map);

看起来像这样（或try it yourself）：

其他答案有效，但与position: absolute处理的恕我直言比position: fixed和!important CSS规则更为清晰。

Answer 4

解决方案是使用以下方法将传单标记图标缩小到一点：

  onSelectionChange() {
        if (this.contactFormGroup.controls['contactType'].value === 'phone') {
          this.contactFormGroup.controls['phone'].setValidators([Validators.required]);
          this.contactFormGroup.controls['email'].setValidators([]);
          setTimeout(() => {
            this.contactFormGroup.controls['phone'].updateValueAndValidity();
            this.contactFormGroup.controls['email'].updateValueAndValidity();
          }, 0);
        } else {
            this.contactFormGroup.controls['phone'].setValidators([]);
          this.contactFormGroup.controls['email'].setValidators([Validators.required]);
          setTimeout(() => {
            this.contactFormGroup.controls['phone'].updateValueAndValidity();
            this.contactFormGroup.controls['email'].updateValueAndValidity();
          }, 0);
        }
      }

并插入另一个div：

div.tag_icon_pedestrian {
    margin-left: 0px !important;
    margin-top: 0px !important;
    width: 0px !important;
    height: 0px !important;
}

如何让标记的起源位于左下角？

4 个答案: