vue+leaflet实现图像缩放标注位置提示效果代码-html代码-BFW代码库

vue+leaflet实现图像缩放标注位置提示效果代码

代码语言：html

所属分类：弹出层

代码描述：vue+leaflet实现图像缩放标注位置提示效果代码，可放大缩小。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1-dev.js"></script>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/leaflet.1.3.1.css">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/leaflet.1.3.1.js"></script>

    <style>
        #map { 
          width: 100%;
          height: 800px;
        }
    </style>



</head>

<body>
    <div id="app">
        <div id="map"></div>
    </div>


    <script>
        new Vue({
          el: '#app',
          data: {
            map: null,
            bounds: [[0, 0], [600,800]],
            url: '//repo.bfw.wiki/bfwrepo/image/625e10c281dc9.png',
            itens: [],
            markers: [] },
        
          methods: {
            // Simulando um HTTP GET na API, por exemplo
            getItens: function () {
              this.itens = [
              { id: '1', description: '位置11', latLng: [314, 405], status: Math.floor(Math.random() * 2 + 1) },
              { id: '2', description: '位置2', latLng: [345, 140], status: Math.floor(Math.random() * 2 + 1) },
              { id: '3', description: '位置3', latLng: [134, 460], status: Math.floor(Math.random() * 2 + 1) }];
        
            },
            drawMap: function () {
              var vi = this;
              // Inicializa o mapa, utilizando o sistema de coordenadas simples
              vi.map = L.map('map', { crs: L.CRS.Simple, maxZoom: 2, minZoom: -1 });
              // Carrega a imagem do mapa, com seus limites
              L.imageOverlay(vi.url, vi.bounds).addTo(vi.map);
              vi.map.fitBounds(vi.bounds);
              vi.map.setMaxBounds(vi.bounds);
              // Carrega os .........完整代码请登录后点击上方下载按钮下载查看