<listing id="jrfv1"><progress id="jrfv1"></progress></listing>
<cite id="jrfv1"></cite>
<cite id="jrfv1"><video id="jrfv1"></video></cite><var id="jrfv1"><video id="jrfv1"></video></var><var id="jrfv1"></var>
<cite id="jrfv1"></cite>
<ins id="jrfv1"></ins>
<progress id="jrfv1"><var id="jrfv1"></var></progress>
<var id="jrfv1"><video id="jrfv1"></video></var>
<var id="jrfv1"></var>
<cite id="jrfv1"><span id="jrfv1"><var id="jrfv1"></var></span></cite><menuitem id="jrfv1"><video id="jrfv1"></video></menuitem>
<cite id="jrfv1"><video id="jrfv1"><var id="jrfv1"></var></video></cite>
<var id="jrfv1"><span id="jrfv1"><menuitem id="jrfv1"></menuitem></span></var>

BIGEMPA Js API示例中心

行政區域展示源代碼展示

代碼編輯區 運行 下載 還原
<!DOCTYPE html>

<html>

<head>
  <meta charset='UTF-8' />
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
  <!--
        以下CSS地址請在安裝軟件了替換成本地的地址
        CSS地址請使用:
        http://localhost:9000/bigemap.js/v2.1.0/bigemap.css
        軟件下載地址 http://www.yonnysrest.com/reader/download/detail201802017.html
    -->
  <link href='http://www.yonnysrest.com:9000/bigemap.js/v2.1.0/bigemap.css' rel='stylesheet' />
  <!--
        JS地址請使用:
        http://localhost:9000/bigemap.js/v2.1.0/bigemap.js
    -->
  <script src="http://www.yonnysrest.com/Public/common/js/jquery.min.js"></script>
  <script src='http://www.yonnysrest.com:9000/bigemap.js/v2.1.0/bigemap.js'></script>
  <style>
    .my_tooltip {
      color: #f1f1f1;
      background: transparent;
      border: none;
      text-shadow: 0 0 2px 2px red;
      font-size: 18px;
    }

    .my_tooltip::before {
      display: none;
    }

    .pulse-icon {
      display: inline-block;
      width: 20px;
      height: 20px;
      border-radius: 100%;
      background-color: #2f8;
      position: relative;
      box-shadow: 1px 1px 8px 0 rgba(0, 0, 0, 0.75);
    }

    .item {
      box-shadow: 0 0 6px 2px #2f8;
      animation: pulsate 1s ease-out;
      animation-iteration-count: infinite;
      animation-delay: 1.1s;
      -webkit-border-radius: 100%;
      border-radius: 100%;
      height: 300%;
      width: 300%;
      animation: pulsate 2s infinite;
      position: absolute;
      margin: -100% 0 0 -100%;
    }

    @keyframes pulsate {
      0% {
        transform: scale(0.1, 0.1);
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
      }

      50% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
      }

      100% {
        transform: scale(1.2, 1.2);
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
      }
    }

    body {
      margin: 0;
      padding: 0;
    }

    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
      background: url("/Public/offline/bounds/blue_bg_1.png");
      background-size: cover;
    }
  </style>
  <title>Google Map Streets</title>
</head>

<body>
  <div id='map'></div>
  <script>
    //軟件配置信息地址,軟件安裝完成之后使用本地地址,如:http://localhost:9000
    BM.Config.HTTP_URL = 'http://www.yonnysrest.com:9000';
    // 在ID為map的元素中實例化一個地圖,不要圖層,并設置地圖中心點,默認的級別和顯示級別控件
    var map = BM.map('map', null, {
      center: [30, 104],
      zoom: 6,
      zoomControl: false,
      attributionControl: false
    });
    var extremeLatlng = [{
        name: '甘肅省',
        latlng: [36.001192, 103.921635]
      },
      {
        name: '江蘇省',
        latlng: [32.062363, 118.757780]
      },
      {
        name: '內蒙古自治區',
        latlng: [40.760029, 111.831660]
      },
      {
        name: '河北省',
        latlng: [37.976436, 114.561001, ]
      },
      {
        name: '陜西省',
        latlng: [34.204455, 109.049848, ]
      },
      {
        name: '海南省',
        latlng: [20.045783, 110.196216]
      },
      {
        name: '臺灣省',
        latlng: [25.029160, 121.570812]
      },
    ]
    var all = ["#f7acbc", "#deab8a", "#817936", "#444693", "#ef5b9c", "#fedcbd", "#7f7522", "#2b4490", "#feeeed",
      "#f47920", "#80752c", "#2a5caa", "#f05b72", "#905a3d", "#87843b", "#224b8f", "#f15b6c", "#8f4b2e", "#726930",
      "#003a6c", "#f8aba6", "#87481f", "#454926", "#102b6a", "#f69c9f", "#5f3c23", "#2e3a1f", "#426ab3", "#f58f98",
      "#6b473c", "#4d4f36", "#46485f", "#ca8687", "#faa755", "#b7ba6b", "#4e72b8", "#f391a9", "#fab27b", "#b2d235",
      "#181d4b", "#bd6758", "#f58220", "#5c7a29", "#1a2933", "#d71345", "#843900", "#bed742", "#121a2a", "#d64f44",
      "#905d1d", "#7fb80e", "#0c212b", "#d93a49", "#8a5d19", "#a3cf62", "#6a6da9", "#b3424a", "#8c531b", "#769149",
      "#585eaa", "#c76968", "#826858", "#6d8346", "#494e8f", "#bb505d", "#64492b", "#78a355", "#afb4db", "#987165",
      "#ae6642", "#abc88b", "#9b95c9", "#ac6767", "#56452d", "#74905d", "#6950a1", "#973c3f", "#96582a", "#cde6c7",
      "#6f60aa", "#b22c46", "#705628", "#1d953f", "#867892", "#a7324a", "#4a3113", "#77ac98", "#918597", "#aa363d",
      "#412f1f", "#007d65", "#6f6d85", "#ed1941", "#845538", "#84bf96", "#594c6d", "#f26522", "#8e7437", "#45b97c",
      "#694d9f", "#d2553d", "#69541b", "#225a1f", "#6f599c", "#b4534b", "#d5c59f", "#367459", "#8552a1", "#ef4136",
      "#cd9a5b", "#007947", "#543044", "#c63c26", "#cd9a5b", "#40835e", "#63434f", "#f3715c", "#b36d41", "#2b6447",
      "#7d5886", "#a7573b", "#df9464", "#005831", "#401c44", "#aa2116", "#b76f40", "#006c54", "#472d56", "#b64533",
      "#ad8b3d", "#375830", "#45224a", "#b54334", "#dea32c", "#274d3d", "#411445", "#853f04", "#d1923f", "#375830",
      "#4b2f3d", "#840228", "#c88400", "#27342b", "#402e4c", "#7a1723", "#c37e00", "#65c294", "#c77eb5", "#a03939",
      "#c37e00", "#73b9a2", "#ea66a6", "#8a2e3b", "#e0861a", "#72baa7", "#f173ac", "#8e453f", "#ffce7b", "#005344",
      "#fffffb", "#8f4b4a", "#fcaf17", "#122e29", "#fffef9", "#892f1b", "#ba8448", "#293047", "#f6f5ec", "#6b2c25",
      "#896a45", "#00ae9d", "#d9d6c3", "#733a31", "#76624c", "#508a88", "#d1c7b7", "#54211d", "#6d5826", "#70a19f",
      "#f2eada", "#78331e", "#ffc20e", "#50b7c1", "#d3d7d4", "#53261f", "#fdb933", "#00a6ac", "#999d9c", "#f15a22",
      "#d3c6a6", "#78cdd1", "#a1a3a6", "#b4533c", "#c7a252", "#008792", "#9d9087", "#84331f", "#dec674", "#94d6da",
      "#8a8c8e", "#f47a55", "#b69968", "#afdfe4", "#74787c", "#f15a22", "#c1a173", "#5e7c85", "#7c8577", "#f3704b",
      "#dbce8f", "#76becc", "#72777b", "#da765b", "#ffd400", "#90d7ec", "#77787b", "#c85d44", "#ffd400", "#009ad6",
      "#4f5555", "#ae5039", "#ffe600", "#145b7d", "#6c4c49", "#6a3427", "#f0dc70", "#11264f", "#563624", "#8f4b38",
      "#fcf16e", "#7bbfea", "#3e4145", "#8e3e1f", "#decb00", "#33a3dc", "#3c3645", "#f36c21", "#cbc547", "#228fbd",
      "#464547", "#b4532a", "#6e6b41", "#2468a2", "#130c0e", "#b7704f", "#596032", "#2570a1", "#281f1d", "#de773f",
      "#525f42", "#2585a6", "#2f271d", "#c99979", "#5f5d46", "#1b315e", "#1d1626"
    ];
    $.get('/Public/offline/chad/510000.geojson', function (data) {
      data = JSON.parse(data);
      BM.geoJSON(data, {
        style: function () {
          return {
            color: '#369',
            fillColor: 'blue',
            weight: 2,
            fillOpacity: 0.4
          };
        },
        onEachFeature: function (feature, layer) {
          var myIcon = BM.divIcon({
            className: 'my-div-icon',
            html: '<div><span class="pulse-icon" style="background-color: __COLOR__"><span class="item" style="box-shadow: 0 0 6px 2px __COLOR__"></span></span></div>'
              .replace(/__COLOR__/g, all[Math.floor(Math.random() * all.length)])
          });
          var latlng = extremeLatlng.find(function (item) {
            return item.name == feature.properties.name
          })
          var m;
          if (latlng) {
            m = BM.marker(latlng.latlng, {
              icon: myIcon
            }).addTo(map);
          } else {
            m = BM.marker(layer.getBounds().getCenter(), {
              icon: myIcon
            }).addTo(map);
          }
          feature.properties && feature.properties.name && m.bindTooltip(feature.properties.name, {
            direction: 'bottom',
            className: 'my_tooltip',
            permanent: true
          })
          m.on('click', function () {
            console.log(m.getLatLng());
          })
        }
      }).on('mouseover', function (e) {
        e.layer.setStyle({
          color: 'white',
          fillColor: all[Math.floor(Math.random() * all.length)],
          weight: 1,
          fillOpacity: 0.9
        });
      }).on('mouseout', function (e) {
        e.layer.setStyle({
          color: '#369',
          fillColor: 'blue',
          weight: 2,
          fillOpacity: 0.4
        });
      }).addTo(map);
    })
  </script>
</body>

</html>