zoukankan      html  css  js  c++  java
  • leaflet 自定义弹出样式

    <!DOCTYPE html>
     
    <html>
     
    <head>
     
    <title>Leaflet Web Map</title>
     
    <!-- reference to Leaflet CSS -->
    <link rel="stylesheet" href="https://d19vzq90twjlae.cloudfront.net/leaflet-0.7.3/leaflet.css" />
     
    <!-- reference to Leaflet JavaScript -->
    <script src="https://d19vzq90twjlae.cloudfront.net/leaflet-0.7.3/leaflet.js"></script>
     
    <!-- set width and height styles for map -->
    <style>
    #map {
         960px;
        height:500px;
    }
    
    /* css to customize Leaflet default styles  */
    .custom .leaflet-popup-tip,
    .custom .leaflet-popup-content-wrapper {
        background: #e93434;
        color: #ffffff;
    }
    </style>
    
    </head>
    
    <body>
    
        <!-- place holder for map -->
        <div id="map"></div>
    
    <script>
    
        //  create map object, tell it to live in 'map' div and give initial latitude, longitude, zoom values 
        var map = L.map('map', {scrollWheelZoom:false}).setView([43.64701, -79.39425], 15);
    
        //  add base map tiles from OpenStreetMap and attribution info to 'map' div
        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);
    
        // create custom icon
        var firefoxIcon = L.icon({
            iconUrl: 'http://joshuafrazier.info/images/firefox.svg',
            iconSize: [38, 95], // size of the icon
            popupAnchor: [0,-15]
            });
    
        // create popup contents
        var customPopup = "Mozilla Toronto Offices<br/><img src='http://joshuafrazier.info/images/maptime.gif' alt='maptime logo gif' width='350px'/>";
        
        // specify popup options 
        var customOptions =
            {
            'maxWidth': '500',
            'className' : 'custom'
            }
        
        // create marker object, pass custom icon as option, pass content and options to popup, add to map
        L.marker([43.64701, -79.39425], {icon: firefoxIcon}).bindPopup(customPopup,customOptions).addTo(map);
    
    </script>
    
    </body>
    
    </html>
  • 相关阅读:
    2019/2/3从字符串中删除指定的字符
    2019/2/3求组合数
    2019/2/3统计各成绩段的学生人数
    2019/2/3摄氏一华氏温度转换表
    2019/1/29有选择的复制字符串
    2019/1/28数字的移动
    2019/1/2810个整数的数据处理
    2019/1/27从三个数中找出最大的数(函数和宏)
    2019/1/23编写函数统计字符串中字母、数字、空格和其它字符的个数
    Jenkins 执行python脚本
  • 原文地址:https://www.cnblogs.com/googlegis/p/13291425.html
Copyright © 2011-2022 走看看