vueleaflet

vue-leaflet

นี่คือส่วนประกอบ Vue สำหรับแผนที่แผ่นพับซึ่งได้รับแรงบันดาลใจจาก react-leaflet และ maps google-google

ส่วนประกอบ vue สำหรับ leaflet.js

ห้องสมุดนี้เข้ากันได้กับ Vue 3.0 และใบปลิว 1.9.x

การติดตั้ง

npm install vueleaflet vue leaflet -save

การเริ่มต้น

คุณสามารถป้อนส่วนประกอบสไตล์ Vue ในไฟล์. vue เพื่อใช้ leaflet.js เช่น layout.vue

 < l-map
  id =" map1 "
  :options =" {
    zoom: 13,
    center: { lat: 51.505, lng: -0.09 },
    minZoom: 8,
    maxZoom: 15,
    attributionControl: true,
    zoomControl: true
  } "
>
  < l-tilelayer
    urlTemplate =" https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken} "
    :options =" {
        attribution: 'vue-leaflet',
        maxZoom: 18,
        id: 'mapbox/streets-v11',
        tileSize: 512,
        zoomOffset: -1,
        accessToken: 'pk.eyJ1IjoieHdwaXNtZSIsImEiOiJ5cTlCQTlRIn0.QdV-wNUKbgs7jAlbVE747Q'
      } "
  />
  < l-marker
    :latlng =" { lat: 51.505, lng: -0.09 } "
    :options =" {
      title: 'marker1',
      opacity: 1,
      draggable: true
    } "
  >
    < l-tooltip :options =" { content: 'tooltip with marker1' } " />
  </ l-marker >
  < l-marker
    :latlng =" { lat: 51.505, lng: -0.11 } "
    :options =" {
      title: 'marker2'
    } "
  >
    < l-popup :options =" { content: 'popup with marker2' } " />
  </ l-marker >
  < l-tooltip
    :options =" { content: 'tooltip standalone' } "
    :latlng =" { lat: 51.505, lng: 0 } "
  />
  < l-popup
    :options =" { content: 'popup standalone' } "
    :latlng =" { lat: 51.505, lng: 0 } "
  />
  < l-circle
    :latlng =" [51.508, -0.11] "
    :options =" {
      color: 'red',
      fillColor: '#f03',
      fillOpacity: 0.5,
      radius: 500
    } "
  />
  < l-polygon
    :latlng =" [
      [51.509, -0.08],
      [51.503, -0.06],
      [51.51, -0.047]
    ] "
  />
</ l-map > 

สร้างการตั้งค่า

 # serve the example
npm run dev

# build the library
npm run build

# build the example
npm run build: example

มีส่วนช่วย

ยินดีต้อนรับ PR

ใบอนุญาต

มิกซ์