leaflet 在地图上创建marker标记 

<!DOCTYPE html>
<html>
<head>

    <title>Layers Control Tutorial - 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.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>


    <style>
        html, body {
            height: 100%;
            margin: 0;
        }
        #map {
            width: 1000px;
            height: 700px;
        }
    </style>


</head>
<body>

<div id='map'></div>

<script>

    var grayscaleLayer= L.tileLayer('http://124.163.214.106:18065/arcgis/rest/services/shenjie_bg/MapServer/tile/{z}/{y}/{x}',
        {id: 'map11'});

    var map = L.map('map', {
        minZoom: 5,
        maxZoom: 12,
        center: [39.73, -104.99],
        zoom: 8,
        zoomDelta: 0.5,//点击+-按钮的放缩刻度尺度，默认值1
        zoomSnap: 0.5,//地图能放缩的zoom的最小刻度尺度，默认值1
        fullscreenControl: false,//全屏控件，不显示
        zoomControl: false,//放大缩小控件，不显示
        attributionControl: false//右下角属性控件，不显示
    });
    map.addLayer(grayscaleLayer);



    var markers=[];

    //系统默认的marker,有一个蓝色图标
    var marker1 =L.marker([39.61, -107.02]);

    //自定义的circleMarker
    var marker2 = L.circleMarker([39.61, -106.02], {
        stroke: true,
        color: '#aaaaaa',
        weight: 1,
        opacity: 1,
        fillColor: '#00e400',
        fillOpacity: 1,
        radius: 10
    });

    //用html的div来创建icon，但是有缺陷
    var icon3 = L.divIcon({
        html: "<div style='width: 15px;height:15px;border-radius: 50%;background-color:#00e400 ;'></div>",
        iconAnchor: [1, 1]});
    var marker3 =L.marker([39.61, -105.02], { icon: icon3 });


    //用html的div的样式来创建marker的icon，注意需要加className属性，否则会出现marker1的问题
    var icon4 = L.divIcon({
        html: "<div style='width:24px;height:24px;border-radius:4px;background-color:#00e400 ;'></div>",
        className: 'ss',});
    var marker4 =L.marker([39.61, -104.02], { icon: icon4 });



    markers.push(marker1);
    markers.push(marker2);
    markers.push(marker3);
    markers.push(marker4);

    var citiesLayer = L.layerGroup(markers);

    map.addLayer(citiesLayer);


</script>



</body>
</html>

注意mark清理和切换的方法如下：

if (this.graphicLayer)
{
  if (map.hasLayer(this.graphicLayer))
  {
    map.removeLayer(this.graphicLayer);
  }
}
posted @ 2020-02-17 12:53  JackGIS  阅读(6177)  评论(0)  编辑  收藏  举报