Question

我试图使用重叠标记spidifier，我按照我在这里找到的代码： functioning code of oms

但是当我创建OverlappingMarkerSpiderfier对象时，我收到错误： Uncaught TypeError：无法读取属性＆＃39; __ e3 _＆＃39;未定义的。产生此错误的行是：

oms = new OverlappingMarkerSpiderfier(map);

我将以前链接的示例代码与我的代码集成在一起。但是我坚持这个错误。

我改编的代码介于// ---- spyderfy ----＆gt;＆gt;之间其余的是我以前的代码，有一些变化：

    '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);
    }
};

我试图通过一个片段轻松查看我的错误：

＆＃13;

'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);
  }

};

＆＃13;

<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>

＆＃13;

Answer 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...?")
      }
    });
  };

overlapmarkerspidifier：无法读取属性＆＃39; __ e3 _＆＃39;未定义的

1 个答案: