小贝子编程

JavaScript映射不起作用



我认为这是一个非常简单的东西，我错过了，我以前让它工作过，但由于某种原因，它现在不工作了。我想我把一些错误联系起来了。（摘自amcharts）。div id正确地位于body标记中。

var map = AmCharts.makeChart("chartdiv", {
  type: "map",
  "theme": "none",
  path: "http://www.amcharts.com/lib/3/",
  imagesSettings: {
    rollOverColor: "#089282",
    rollOverScale: 3,
    selectedScale: 3,
    selectedColor: "#089282",
    color: "#13564e"
  },
  areasSettings: {
    unlistedAreasColor: "#15A892"
  },
  dataProvider: {
    map: "worldLow",
    images: [{
      zoomLevel: 5,
      scale: 0.5,
      title: "Brussels",
      latitude: 50.8371,
      longitude: 4.3676
    }, {
      zoomLevel: 5,
      scale: 0.5,
      title: "Copenhagen",
      latitude: 55.6763,
      longitude: 12.5681
    }, {
      zoomLevel: 5,
      scale: 0.5,
      title: "Paris",
      latitude: 48.8567,
      longitude: 2.3510
    }, {
      zoomLevel: 5,
      scale: 0.5,
      title: "Reykjavik",
      latitude: 64.1353,
      longitude: -21.8952
    }, {
      zoomLevel: 5,
      scale: 0.5,
      title: "Moscow",
      latitude: 55.7558,
      longitude: 37.6176
    }, {
      zoomLevel: 5,
      scale: 0.5,
      title: "Madrid",
      latitude: 40.4167,
      longitude: -3.7033
    }, {
      zoomLevel: 5,
      scale: 0.5,
      title: "London",
      latitude: 51.5002,
      longitude: -0.1262,
      url: "http://www.google.co.uk"
    }, {
      zoomLevel: 5,
      scale: 0.5,
      title: "Peking",
      latitude: 39.9056,
      longitude: 116.3958
    }, {
      zoomLevel: 5,
      scale: 0.5,
      title: "New Delhi",
      latitude: 28.6353,
      longitude: 77.2250
    }, {
      zoomLevel: 5,
      scale: 0.5,
      title: "Tokyo",
      latitude: 35.6785,
      longitude: 139.6823,
      url: "http://www.google.co.jp"
    }, {
      zoomLevel: 5,
      scale: 0.5,
      title: "Ankara",
      latitude: 39.9439,
      longitude: 32.8560
    }, {
      zoomLevel: 5,
      scale: 0.5,
      title: "Buenos Aires",
      latitude: -34.6118,
      longitude: -58.4173
    }, {
      zoomLevel: 5,
      scale: 0.5,
      title: "Brasilia",
      latitude: -15.7801,
      longitude: -47.9292
    }, {
      zoomLevel: 5,
      scale: 0.5,
      title: "Ottawa",
      latitude: 45.4235,
      longitude: -75.6979
    }, {
      zoomLevel: 5,
      scale: 0.5,
      title: "Washington",
      latitude: 38.8921,
      longitude: -77.0241
    }, {
      zoomLevel: 5,
      scale: 0.5,
      title: "Kinshasa",
      latitude: -4.3369,
      longitude: 15.3271
    }, {
      zoomLevel: 5,
      scale: 0.5,
      title: "Cairo",
      latitude: 30.0571,
      longitude: 31.2272
    }, {
      zoomLevel: 5,
      scale: 0.5,
      title: "Pretoria",
      latitude: -25.7463,
      longitude: 28.1876
    }]
  }
});
function updateCustomMarkers(event) {
  var map = event.chart;
  for (var x in map.dataProvider.images) {
    var image = map.dataProvider.images[x];
    if ('undefined' == typeof image.externalElement)
      image.externalElement = createCustomMarker(image);
    image.externalElement.style.top = map.latitudeToY(image.latitude) +
      'px';
    image.externalElement.style.left = map.longitudeToX(image.longitude) +
      'px';
  }
}
function createCustomMarker(image) {
  var holder = document.createElement('div');
  holder.className = 'map-marker';
  holder.title = image.title;
  holder.style.position = 'absolute';
  if (undefined != image.url) {
    holder.onclick = function() {
      window.location.href = image.url;
    };
    holder.className += ' map-clickable';
  }
  var dot = document.createElement('div');
  dot.className = 'dot';
  holder.appendChild(dot);
  var pulse = document.createElement('div');
  pulse.className = 'pulse';
  holder.appendChild(pulse);
  image.chart.chartDiv.appendChild(holder);
  return holder;
}
#chartdiv {
  width: 100%;
  height: 500px;
}
.map-marker {
  /* adjusting for the marker dimensions 
  so that it is centered on coordinates */
  margin-left: -8px;
  margin-top: -8px;
}
.map-marker.map-clickable {
  cursor: pointer;
}
.pulse {
  width: 10px;
  height: 10px;
  border: 5px solid #f7f14c;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  background-color: #716f42;
  z-index: 10;
  position: absolute;
}
.map-marker .dot {
  border: 10px solid #fff601;
  background: transparent;
  -webkit-border-radius: 60px;
  -moz-border-radius: 60px;
  border-radius: 60px;
  height: 50px;
  width: 50px;
  -webkit-animation: pulse 3s ease-out;
  -moz-animation: pulse 3s ease-out;
  animation: pulse 3s ease-out;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  position: absolute;
  top: -25px;
  left: -25px;
  z-index: 1;
  opacity: 0;
}
@-moz-keyframes pulse {
  0% {
    -moz-transform: scale(0);
    opacity: 0.0;
  }
  25% {
    -moz-transform: scale(0);
    opacity: 0.1;
  }
  50% {
    -moz-transform: scale(0.1);
    opacity: 0.3;
  }
  75% {
    -moz-transform: scale(0.5);
    opacity: 0.5;
  }
  100% {
    -moz-transform: scale(1);
    opacity: 0.0;
  }
}
@-webkit-keyframes "pulse" {
  0% {
    -webkit-transform: scale(0);
    opacity: 0.0;
  }
  25% {
    -webkit-transform: scale(0);
    opacity: 0.1;
  }
  50% {
    -webkit-transform: scale(0.1);
    opacity: 0.3;
  }
  75% {
    -webkit-transform: scale(0.5);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: scale(1);
    opacity: 0.0;
  }
}
<link href="/CSS/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/js/map.js"></script>
<script src="https://www.amcharts.com/lib/3/ammap.js"></script>
<script src="https://www.amcharts.com/lib/3/maps/js/worldLow.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/none.js"></script>
<div id="chartdiv"></div>

当地图本身显示时，使用您的代码，我假设您缺少的是应该显示在地图上的自定义标记。

为此，你错过了一个重要的部分。本应创建这些标记的updateCustomMarkers函数从未被调用。

您可以使用map的"init"事件来调用它。只需在您的map代码后添加以下行：

map.addListener("init", updateCustomMarkers);

以下是完整的更新代码：

var map = AmCharts.makeChart("chartdiv", {
  type: "map",
  "theme": "none",
  path: "http://www.amcharts.com/lib/3/",
  imagesSettings: {
    rollOverColor: "#089282",
    rollOverScale: 3,
    selectedScale: 3,
    selectedColor: "#089282",
    color: "#13564e"
  },
  areasSettings: {
    unlistedAreasColor: "#15A892"
  },
  dataProvider: {
    map: "worldLow",
    images: [{
      zoomLevel: 5,
      scale: 0.5,
      title: "Brussels",
      latitude: 50.8371,
      longitude: 4.3676
    }, {
      zoomLevel: 5,
      scale: 0.5,
      title: "Copenhagen",
      latitude: 55.6763,
      longitude: 12.5681
    }, {
      zoomLevel: 5,
      scale: 0.5,
      title: "Paris",
      latitude: 48.8567,
      longitude: 2.3510
    }, {
      zoomLevel: 5,
      scale: 0.5,
      title: "Reykjavik",
      latitude: 64.1353,
      longitude: -21.8952
    }, {
      zoomLevel: 5,
      scale: 0.5,
      title: "Moscow",
      latitude: 55.7558,
      longitude: 37.6176
    }, {
      zoomLevel: 5,
      scale: 0.5,
      title: "Madrid",
      latitude: 40.4167,
      longitude: -3.7033
    }, {
      zoomLevel: 5,
      scale: 0.5,
      title: "London",
      latitude: 51.5002,
      longitude: -0.1262,
      url: "http://www.google.co.uk"
    }, {
      zoomLevel: 5,
      scale: 0.5,
      title: "Peking",
      latitude: 39.9056,
      longitude: 116.3958
    }, {
      zoomLevel: 5,
      scale: 0.5,
      title: "New Delhi",
      latitude: 28.6353,
      longitude: 77.2250
    }, {
      zoomLevel: 5,
      scale: 0.5,
      title: "Tokyo",
      latitude: 35.6785,
      longitude: 139.6823,
      url: "http://www.google.co.jp"
    }, {
      zoomLevel: 5,
      scale: 0.5,
      title: "Ankara",
      latitude: 39.9439,
      longitude: 32.8560
    }, {
      zoomLevel: 5,
      scale: 0.5,
      title: "Buenos Aires",
      latitude: -34.6118,
      longitude: -58.4173
    }, {
      zoomLevel: 5,
      scale: 0.5,
      title: "Brasilia",
      latitude: -15.7801,
      longitude: -47.9292
    }, {
      zoomLevel: 5,
      scale: 0.5,
      title: "Ottawa",
      latitude: 45.4235,
      longitude: -75.6979
    }, {
      zoomLevel: 5,
      scale: 0.5,
      title: "Washington",
      latitude: 38.8921,
      longitude: -77.0241
    }, {
      zoomLevel: 5,
      scale: 0.5,
      title: "Kinshasa",
      latitude: -4.3369,
      longitude: 15.3271
    }, {
      zoomLevel: 5,
      scale: 0.5,
      title: "Cairo",
      latitude: 30.0571,
      longitude: 31.2272
    }, {
      zoomLevel: 5,
      scale: 0.5,
      title: "Pretoria",
      latitude: -25.7463,
      longitude: 28.1876
    }]
  }
});
map.addListener("init", updateCustomMarkers);
function updateCustomMarkers(event) {
  var map = event.chart;
  for (var x in map.dataProvider.images) {
    var image = map.dataProvider.images[x];
    if ('undefined' == typeof image.externalElement)
      image.externalElement = createCustomMarker(image);
    image.externalElement.style.top = map.latitudeToY(image.latitude) +
      'px';
    image.externalElement.style.left = map.longitudeToX(image.longitude) +
      'px';
  }
}
function createCustomMarker(image) {
  var holder = document.createElement('div');
  holder.className = 'map-marker';
  holder.title = image.title;
  holder.style.position = 'absolute';
  if (undefined != image.url) {
    holder.onclick = function() {
      window.location.href = image.url;
    };
    holder.className += ' map-clickable';
  }
  var dot = document.createElement('div');
  dot.className = 'dot';
  holder.appendChild(dot);
  var pulse = document.createElement('div');
  pulse.className = 'pulse';
  holder.appendChild(pulse);
  image.chart.chartDiv.appendChild(holder);
  return holder;
}
#chartdiv {
width   : 100%;
height  : 500px;
}
.map-marker {
/* adjusting for the marker dimensions 
so that it is centered on coordinates */
margin-left: -8px;
margin-top: -8px;}
 .map-marker.map-clickable {
cursor: pointer;}
 .pulse {
    width: 10px;
    height: 10px;
    border: 5px solid #f7f14c;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    background-color: #716f42;
    z-index: 10;
    position: absolute;
}
.map-marker .dot {
    border: 10px solid #fff601;
    background: transparent;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    border-radius: 60px;
    height: 50px;
    width: 50px;
    -webkit-animation: pulse 3s ease-out;
    -moz-animation: pulse 3s ease-out;
    animation: pulse 3s ease-out;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    position: absolute;
    top: -25px;
    left: -25px;
    z-index: 1;
    opacity: 0;
}
@-moz-keyframes pulse {
 0% {
    -moz-transform: scale(0);
    opacity: 0.0;
 }
 25% {
    -moz-transform: scale(0);
    opacity: 0.1;
 }
 50% {
    -moz-transform: scale(0.1);
    opacity: 0.3;
 }
 75% {
    -moz-transform: scale(0.5);
    opacity: 0.5;
 }
 100% {
    -moz-transform: scale(1);
    opacity: 0.0;
 }
}
@-webkit-keyframes "pulse" {
 0% {
    -webkit-transform: scale(0);
    opacity: 0.0;
 }
 25% {
    -webkit-transform: scale(0);
    opacity: 0.1;
 }
 50% {
    -webkit-transform: scale(0.1);
    opacity: 0.3;
 }
 75% {
    -webkit-transform: scale(0.5);
    opacity: 0.5;
 }
 100% {
    -webkit-transform: scale(1);
    opacity: 0.0;
 }
}   
<script src="https://www.amcharts.com/lib/3/ammap.js"></script>
<script src="https://www.amcharts.com/lib/3/maps/js/worldLow.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/none.js"></script>
<div id="chartdiv"></div>

相关内容

  • 没有找到相关文章

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium