Mapbox更改标记的位置和颜色

Question

The following code shows a marker and a popup that shows the lat and long whenever I click on the map. 以下代码显示了一个标记和一个弹出窗口，该弹出窗口在我单击地图时显示纬度和经度。

I want the marker to change color from blue to red, and I want the popup to be above the marker so that it doesn't cover the marker. 我希望标记将颜色从蓝色更改为红色，并且我希望弹出窗口位于标记上方，以便不覆盖标记。 How can I do that? 我怎样才能做到这一点？ Thank you. 谢谢。

<!DOCTYPE html>
<html>
<head>
    <title>Quick Start - Leaflet</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
    <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.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
</head>
<body>
<div id="mapid" style="width: 600px; height: 400px;"></div>
<script>

    var mymap = L.map('mapid').setView([51.505, -0.09], 13);

    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
        maxZoom: 18,
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
            '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
            'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        id: 'mapbox.streets'
    }).addTo(mymap);

    L.marker([40.7127837, -74.0059413]).addTo(mymap)
        .bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();

    var popup = L.popup();

    function onMapClick(e) {
        L.marker([e.latlng.lat, e.latlng.lng]).addTo(mymap)
        popup
            .setLatLng(e.latlng)
            .setContent("You clicked the map at " + e.latlng.toString())
            .openOn(mymap);
    }

    mymap.on('click', onMapClick);

</script>
</body>
</html>

Answer 1

The marker uses an icon image to display, so you will need to create your own custom icon, with the iconUrl pointing at the image you want to use for the marker, and then tell the marker to use your custom icon when rendering. 标记使用图标图像进行显示，因此您将需要创建自己的自定义图标，使iconUrl指向要用于标记的图像，然后告诉标记在渲染时使用自定义图标。 You can also specify the popupAnchor in the icon settings to move the popup away from the icon 您还可以在图标设置中指定popupAnchor，以将弹出窗口移离图标

Example ( Leaflet docs ) 示例（传单文档）

var myIcon = L.icon({
  iconUrl: 'my-icon.png',
  iconSize: [38, 95],
  iconAnchor: [22, 94],
  popupAnchor: [-3, -76],
  shadowUrl: 'my-icon-shadow.png',
  shadowSize: [68, 95],
  shadowAnchor: [22, 94]
});

L.marker([50.505, 30.57], {icon: myIcon}).addTo(map);

Mapbox更改标记的位置和颜色

问题描述

1 个解决方案

解决方案1
0 2018-06-27 11:12:58

Mapbox更改标记的位置和颜色

问题描述

1 个解决方案

解决方案1 0 2018-06-27 11:12:58

解决方案1
0 2018-06-27 11:12:58