Question

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

未捕获（已承诺）TypeError：无法在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

我找到了导致异常的原因。我为自定义标记声明了变量，但是以某种方式忘记初始化它们。删除“自定义”标记后，标记将显示在地图上，但随后我无法与地图进行交互。它像图像一样保持静态。

标记未显示在传单地图上

1 个答案: