0%

mapbox popup and vue

Posted on

一个完整的版本

https://ouyangresume.github.io/2019/12/19/mapbox%E7%9A%84Popup%E4%B8%8EVue%E6%A1%86%E6%9E%B6%E8%9E%8D%E5%90%88%E4%BD%BF%E7%94%A8/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import StarRating from 'vue-star-rating'

// ...

var starRating = new Vue({
  ...StarRating,
  parent: this,
  propsData: { /* pass props here*/ }
}).$mount()

starRating.$on('someEvent', (value) => {
  // listen to events emitted from the component
})
var popup = new mapboxgl.Popup()
      .setDOMContent(startRating.$el)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import InfoWindowContent from '../InfoWindowContent.vue'

L.popup({maxWidth: 600,
  className: 'leaflet-info-window'})
  .setLatLng(latlng)
  .setContent('<div id="info-window"></div>')
  .openOn(this.map)
const InfoWindow = Vue.extend(InfoWindowContent)
const infoWindow = new InfoWindow({
  propsData: {
    windowData: this.infoWindowData,
    windowType: this.infoWindowType
  },
  store: this.$store
})
infoWindow.$mount("#info-window")
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// 添加Popup对象
const popup = new mapboxgl.Popup({
  anchor: "bottom",
  offset: offset || [1, -15],
  className: "popup"
});
popup.on("close", function(p) {
  if (p && p.target && p.target._vue) {
    p.target._vue.$destroy();
  }
});
const dom = document.createElement("div");
dom.className = "popup-content-wrapper";

popup.setLngLat(coordinates).setDOMContent(dom).addTo(map);
 // 渲染局部Vue组件（mappopupwrapper）
 popup._vue = new Vue({
   render: h =>
     h(MapPopupWrapper, {
      props: {
        width: "700px",
        type: "resource",
        target: {
          feature
        }
      }
    })
}).$mount(dom);