传单地图上未显示标记

Question

我正在处理一项任务，我必须显示来自 API 的坐标。 目前我能够成功地获取数据。但是当我在地图上显示它时，标记是不可见的。 当我查看控制台时，会出现以下错误：-

Uncaught (in promise) TypeError: Cannot read property 'data' of undefined at eval

我已经单独尝试通过定期放置 console.log("done") 来查明错误的来源，并且异常发生在我的代码中的以下行之后： this.map.addLayer(this.markers); 我在代码中使用注释标记了这一行。

这是我在我的 html 中输入的内容

<div id="mapApp">
    <div class="container-fluid" style="padding: 0px; position: 
        relative; min-height: 90vh">
    <div id="map" class="map"></div>
    </div>
</div>

这是我的完整 JavaScript 文件

import Vue from 'vue'
import axios from 'axios'
import L from 'leaflet'
import googleMutant from 'leaflet.gridlayer.googlemutant'
import markercluster from 'leaflet.markercluster'


const baseUrl = 'http://127.0.0.1:8000/';

const vm = new Vue({
el: '#mapApp',
data: {
    map: null,
    tileLayer: null,
    layers: [],
    properties: [],
    panState: 'closed',
    foodIconUnselected: null,
    foodIconSelected:null,
    realEstateIconUnselected:null,
    realEstateIconSelected:null,
    zoomlevel:8,
    firstLatitude:null,
    firstLongitude:null,
    roadMutant:null,
    markers:null,
    allPropertyLayer:null,
    mcdPropertyLayer:null,
    subwayPropertyLayer:null,
    burgerkingPropertyLayer:null,
    chickeriaPropertyLayer:null,
    starbucksPropertyLayer:null,
    kfcPropertyLayer:null,
    spettacoloPropertyLayer:null,
    holycowPropertyLayer:null,
    query:'',
    iconLabel:null,
    labelName:null,


},

created(){
   // execute the method to fetch propertis
    let searchParams = new URLSearchParams(window.location.search);

    let search_term_value = searchParams.get("search_term")
    this.fetchPropertyData(search_term_value);


},
methods: {

    initMap() {

        this.$data.map = L.map('map').setView([this.$data.firstLatitude, this.$data.firstLongitude], this.$data.zoomlevel);
        this.$data.roadMutant = L.gridLayer.googleMutant({
            maxZoom: 24,
            type: 'roadmap',
            styles: /*removed on purpose to reduce size */,
        }).addTo(this.$data.map);

        L.control.zoom({
            position:'topright'
        }).addTo(this.$data.map);

        this.$data.markers =  L.markerClusterGroup({

                iconCreateFunction: function (cluster) {
                var markers = cluster.getAllChildMarkers();
                var html = '<div class="marker-cluster">' + markers.length + '</div>';
                return L.divIcon({html: html, className: 'mycluster', iconSize: L.point(40, 40)});
            },
            spiderfyOnMaxZoom: false, showCoverageOnHover: false, zoomToBoundsOnClick: true,

            });
        this.$data.allPropertyLayer = new L.FeatureGroup();
        this.$data.mcdPropertyLayer = new L.FeatureGroup();
        this.$data.subwayPropertyLayer = new L.FeatureGroup();
        this.$data.burgerkingPropertyLayer = new L.FeatureGroup();
        this.$data.chickeriaPropertyLayer = new L.FeatureGroup();
        this.$data.starbucksPropertyLayer = new L.FeatureGroup();
        this.$data.kfcPropertyLayer = new L.FeatureGroup();
        this.$data.spettacoloPropertyLayer = new L.FeatureGroup();
        this.$data.holycowPropertyLayer = new L.FeatureGroup();
        console.log("Done Till Here");
        this.fillDataInMap();
    },
    fillFirstData(){
      this.$data.firstLatitude = this.$data.properties[0].latitude;
      this.$data.firstLongitude = this.$data.properties[0].longitude;
    },
    fetchPropertyData(search_term_value){

        const self = this;
        axios.get(baseUrl + 'api/search/property', {
            params:{
                'search_term': search_term_value
            }
        }).then(function (response) {
            self.$data.properties = response.data.search_results.data;
            self.fillFirstData();
            self.initMap();

        }).catch(function (error) {
            alert(error.response.data);
            console.log(error);
        })
    },

    fillDataInMap(){


        for(let i =0;i<this.$data.properties.length;i++){

            this.$data.iconLabel = this.getPropertyIconLabelUnSelected(this.$data.properties[i]);
            this.$data.labelName = this.getPropertyLabelName(this.$data.properties[i]);


            let marker = L.marker(new L.LatLng(this.$data.properties[i].latitude, this.$data.properties[i].longitude), {icon: this.$data.iconlabel, id: i+1});

            marker.bindTooltip(this.$data.labelName, {permanent: true, direction: 'auto', className: 'map-icon-label',});
            marker.bindPopup(this.$data.properties[i].address);

            marker.title = this.$data.properties[i].id;

            marker.on('click', function (e) {
                //showDetails(e, e.target.title);
                //changeMarkerIconOnClick(e);

            });
            marker.on('mouseover',function (e) {
                e.target.openPopup();

            });
            marker.on('mouseout',function (e) {
                e.target.closePopup();
            });
            this.$data.allPropertyLayer.addLayer(marker);
            this.addMarkerToRespectiveLayer(this.$data.properties[i].property_sub_type,marker);

      }

        this.$data.markers.addLayer(this.$data.allPropertyLayer);

下一行抛出异常

        this.map.addLayer(this.markers);

    },
    searchWithQuery(){
        this.fetchPropertyData(this.$data.query)
    },

    showPropertyDetails(id) {
        alert('property id is: ' + id)
    },
  }
});

Answer 1

我找到了导致异常的原因。我为自定义标记声明了变量，但不知何故忘记了初始化它们。删除自定义标记后，标记会显示在地图上，但我无法与地图交互。它像图像一样保持静止。