重叠标记器：无法读取未定义的属性“__e3_”答案

【问题标题】：overlappingmarkerspidifier: Cannot read property '__e3_' of undefined重叠标记器：无法读取未定义的属性“__e3_”
【发布时间】：2016-03-05 21:48:36
【问题描述】：

我正在尝试使用重叠标记 spidifier，我遵循了我在这里找到的代码： functioning code of oms

但是当我创建 OverlappingMarkerSpiderfier 对象时，我收到错误：Uncaught TypeError: Cannot read property '__e3_' of undefined。产生此错误的行是：

oms = new OverlappingMarkerSpiderfier(map);

我正在将我之前链接的示例的代码与我的代码集成。但我被这个错误困住了。

我改编的代码在 //----spyderfy---->> 之间，其余的是我之前的代码，有一些变化：

    'use strict'

window.onload = function() {
  var map;
  var oms;

  if ("geolocation" in navigator){
    navigator.geolocation.getCurrentPosition(onLocation, onError);
  }

  function onLocation(position){

    var myPosition = {
      lat: position.coords.latitude,
      lng: position.coords.longitude
    };

    createMap(myPosition);
    setupAutocomplete();
  }

  //----------------------------------spyderfy-------------------------------->>
  debugger;
  oms = new OverlappingMarkerSpiderfier(map);

    // listeners need to be registered only once
    oms.addListener('click', function(marker, event) {
      infowindow.setContent(marker.description);
      infowindow.open(map, marker);
    });

    oms.addListener('spiderfy', function(markers) {
      for(var i = 0; i < markers.length; i++) {
        // markers[i].setIcon(iconWithColor(spiderfiedColor));
        markers[i].setShadow(null);
      } 
      infowindow.close();
    });

    oms.addListener('unspiderfy', function(markers) {
      for(var i = 0; i < markers.length; i++) {
        // markers[i].setIcon(iconWithColor(usualColor));
        // markers[i].setShadow(shadow);
      }
    });

    function handleSucess(data){
      data.forEach(function(position_hash) {
        handleItem(position_hash);
      });
    };

    function handleItem(position_hash){


      debugger;
      //Info window content 
      var contentString = '<div id="content">'+
                          '<div id="siteNotice">'+
                          '</div>'+
                          '<h1 id="firstHeading" class="firstHeading">'+position_hash.title+'</h1>'+
                          '<div id="bodyContent">'+
                          '<p>'+position_hash.description+'</p>'+
                          '<p>'+ position_hash.date +'</p>'+
                          '<p>'+ position_hash.formatted_addres +'</p>'
                          '</div>'+
                          '</div>';

      var img = 'http://www.google.com/mapfiles/marker.png';
      var myLatLng = new google.maps.LatLng(position_hash.latitude, position_hash.longitude);
      var marker = new google.maps.Marker({
          position: myLatLng,
          map: map,
          icon: "https://cdn1.iconfinder.com/data/icons/Map-Markers-Icons-Demo-PNG/48/Map-Marker-Marker-Inside-Azure.png"
          });

      // to be possible in "click" show specific content
      marker.description = contentString;

      oms.addMarker(marker);

    };

//---------------------------------------spyderfy----------------------------->>


  function onError(err){
    console.log("What browser are you using? IE 7??", err);
  }

  function createMap(position){
    map = new google.maps.Map($('#map')[0], {
      center: position,
      zoom: 15,
    });
    yourPosition(position);

    $( document ).ready(function() {
      $.ajax({
        url:"http://localhost:3000/events.json",
        dataType: "json",
        success: handleSucess,
        error: handleError
      });
    });
  }

  function yourPosition(position){

    var marker = new google.maps.Marker({
      position: position,
      animation: google.maps.Animation.DROP,
      map: map,
      icon: {
      url: 'assets/your_pos.png',
      scaledSize: new google.maps.Size(60, 60), // scaled size
      origin: new google.maps.Point(0,0), // origin
      anchor: new google.maps.Point(0, 0) // anchor
      },          
      title: "You are here",
    });
  };

  function createMarker(position, position_hash) {};

    function handleError(jqXHR, status, errorThrown){
      alert("Something bad happened: "
        + status + ', ' + errorThrown);
    }
};

我正在尝试传递一个 sn-p 以轻松查看我的错误：

'use strict'

window.onload = function() {
  var map;
  var oms;

  //----------------------------------start-spyderfy-------------------------------->>
  oms = new OverlappingMarkerSpiderfier(map);

  // listeners need to be registered only once
  oms.addListener('click', function(marker, event) {
    infowindow.setContent(marker.description);
    infowindow.open(map, marker);
  });

  oms.addListener('spiderfy', function(markers) {
    for (var i = 0; i < markers.length; i++) {
      // markers[i].setIcon(iconWithColor(spiderfiedColor));
      markers[i].setShadow(null);
    }
    infowindow.close();
  });

  oms.addListener('unspiderfy', function(markers) {
    for (var i = 0; i < markers.length; i++) {
      // markers[i].setIcon(iconWithColor(usualColor));
      // markers[i].setShadow(shadow);
    }
  });

  function handleSucess(data) {
    data.forEach(function(position_hash) {
      handleItem(position_hash);
    });
  };

  function handleItem(position_hash) {
    //Info window content 
    var contentString = position_hash.title;

    var img = 'http://www.google.com/mapfiles/marker.png';
    var myLatLng = new google.maps.LatLng(position_hash.latitude, position_hash.longitude);
    var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      icon: "https://cdn1.iconfinder.com/data/icons/Map-Markers-Icons-Demo-PNG/48/Map-Marker-Marker-Inside-Azure.png"
    });

    // to be possible in "click" show specific content
    marker.description = contentString;

    oms.addMarker(marker);

  };

  //---------------------------------------end-spyderfy----------------------------->>
function createMap(position) {
    map = new google.maps.Map($('#map')[0], {
      center: {
      lat: 41.4064557,
      lng: 2.1920477
    },
      zoom: 15,
    });

  function onError(err) {
    console.log("What browser are you using? IE 7??", err);
  }

    $(document).ready(function() {
      data=[{
    "id": 26,
    "title": "Fancy event",
    "latitude": 41.4064557,
    "longitude": 2.1920477
     },
     {
    "id": 27,
    "title": "betaBeers",
    "latitude": 41.391829,
    "longitude": 2.177191,
     }]
       handleSucess(data);
  });
  }


  function handleError(jqXHR, status, errorThrown) {
    alert("Something bad happened: " + status + ', ' + errorThrown);
  }

};

<html>

<head>
  <style>
    #map {
      height: 300px;
      margin: 0px;
      padding: 300px;
    }
  </style>
  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="http://jawj.github.io/OverlappingMarkerSpiderfier/bin/oms.min.js"></script>
</head>

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

</html>

【问题讨论】：

请提供一个Minimal, Complete, Tested and Readable example 来证明这个问题。
简而言之，当我运行这一行时：“oms = new OverlappingMarkerSpiderfier(map);”我收到此错误：“TypeError：无法读取未定义的属性 '_e3'”。我正在尝试在 sn-p 中重现错误。
@geocodezip 最后我可以在 sn-p 中重新创建错误，现在我在 sn 中有相同的“Uncaught TypeError: Cannot read property '_e3' of undefined” -p 比我的项目中
对我来说似乎不是很小。我在 Chrome 中得到What browser are you using? IE 7?? PositionError，但没有地图。为什么需要地理定位来重现错误？
从您的代码看来，您为 map 创建了一个空变量，然后在创建地图之前几乎立即尝试将其与 OverlappingMarkerSpiderfier 一起使用：var map; ... oms = new OverlappingMarkerSpiderfier(map); 所以它会此时仍然为空。在创建地图对象之前不要尝试使用它。

标签： javascript google-maps google-maps-api-3 markers

【解决方案1】：

我将工作代码粘贴在这里，也许它会在未来帮助某人。代码没有缩小，和我的项目一样。

其实这很好用：

    'use strict'
  var map;
  var oms;

  //Create info window (need only one)   
  var infowindow = new google.maps.InfoWindow(); 

  if ("geolocation" in navigator){
    navigator.geolocation.getCurrentPosition(onLocation, onError);
  }

  function onLocation(position){

    var myPosition = {
      lat: position.coords.latitude,
      lng: position.coords.longitude
    };

    createMap(myPosition);
    oms = new OverlappingMarkerSpiderfier(map);
    // listeners need to be registered only once
    oms.addListener('click', function(marker, event) {
      infowindow.setContent(marker.description);
      infowindow.open(map, marker);
    });

    oms.addListener('spiderfy', function(markers) {
      for(var i = 0; i < markers.length; i++) {
        markers[i].setShadow(null);
      } 
      infowindow.close();
    });

    setupAutocomplete();
  }

  function createMap(position){
    map = new google.maps.Map($('#map')[0], {
      center: position,
      zoom: 15,
    });
    yourPosition(position);

    $( document ).ready(function() {
      $.ajax({
        url:"http://localhost:3000/events.json",
        dataType: "json",
        success: handleSucess,
        error: handleError
      });
    });
  }

    function handleSucess(data){
      data.forEach(function(position_hash) {
        if (moment(position_hash.date).isAfter(moment())) {
          handleItem(position_hash);
        };
      });
    };

    function handleItem(position_hash){
      //Info window content 
      var contentString = '<div id="content">'+
                          '<div id="siteNotice">'+
                          '</div>'+
                          '<h1 id="firstHeading" class="firstHeading">'+position_hash.title+'</h1>'+
                          '<div id="bodyContent">'+
                          '<p>'+position_hash.description+'</p>'+
                          '<p>'+ position_hash.date +'</p>'+
                          '<p>'+ position_hash.formatted_addres +'</p>'
                          '</div>'+
                          '</div>';

      var img = 'http://www.google.com/mapfiles/marker.png';
      var myLatLng = new google.maps.LatLng(position_hash.latitude, position_hash.longitude);
      var marker = new google.maps.Marker({
          position: myLatLng,
          map: map,
          icon: "https://cdn1.iconfinder.com/data/icons/Map-Markers-Icons-Demo-PNG/48/Map-Marker-Marker-Inside-Azure.png"
          });

      marker.description = contentString;

      oms.addMarker(marker);

    };


  function onError(err){
    console.log("What browser are you using? IE 7??", err);
  }

  function createMap(position){
    map = new google.maps.Map($('#map')[0], {
      center: position,
      zoom: 15,
    });
    yourPosition(position);

    $( document ).ready(function() {
      $.ajax({
        url:"http://localhost:3000/events.json",
        dataType: "json",
        success: handleSucess,
        error: handleError
      });
    });
  }

  function yourPosition(position){

    var marker = new google.maps.Marker({
      position: position,
      animation: google.maps.Animation.DROP,
      map: map,
      icon: {
      url: 'assets/your_pos.png',
      scaledSize: new google.maps.Size(60, 60), // scaled size
      origin: new google.maps.Point(0,0), // origin
      anchor: new google.maps.Point(0, 0) // anchor
      },          
      title: "You are here",
    });
  };

    function handleError(jqXHR, status, errorThrown){
      alert("Something bad happened: "
        + status + ', ' + errorThrown);
    }


  function setupAutocomplete(){
    var input = $('#location-placheholder')[0];
    var autocomplete = new google.maps.places.Autocomplete(input);
    autocomplete.addListener('place_changed', function(){
      var place = autocomplete.getPlace();
      if (place.geometry.location) {
        $("#location-longitude").val(place.geometry.location.lng().toFixed(7));
        $("#location-longitude").trigger('input');
        $("#location-latitude").val(place.geometry.location.lat().toFixed(7));
        $("#location-latitude").trigger('input');
        $(".filling").val(place.formatted_address);
        $(".filling").trigger('input');
        map.setCenter(place.geometry.location);
        //createMarker(place.geometry.location, place.formatted_address);
      } else {
        alert("The place has no location...?")
      }
    });
  };

【讨论】：