3D地图上添加的markPoint能否添加点击事件响应?
@pissang 你好,想跟你请教个问题:
我测试代码如下:
require.config({ packages: [{ name: 'echarts-x', location: 'echarts-x/src', main: 'echarts-x' }, { name: 'echarts', location: 'echarts/src', main: 'echarts' }, { name: 'zrender', location: 'zrender/src', main: 'zrender' }, { name: 'qtek', location: 'qtek/src', main: 'qtek.amd' }] }); require([ 'echarts', 'qtek/core/request', 'echarts/component/dataRange', 'echarts-x', 'echarts-x/chart/map3d' ], function (echarts, request) { var chart = echarts.init(document.getElementById('worldMap')); var option = { tooltip: { formatter: '{b}' }, series: [{ type: 'map3d', mapType: 'world', baseLayer: { backgroundColor: '', backgroundImage: 'images/earth.jpg', quality: 'high', }, surfaceLayers: [{ type: 'texture', distance: 3, image: 'images/clouds.png' }], itemStyle: { normal: { label: { show: true }, borderWidth: 1, borderColor: 'yellow', areaStyle: { color: 'rgba(0, 0, 0, 0)' } } }, markPoint: { symbol: 'image://./images/mark.png', symbolSize: 3, distance: 0, // orientation: 'normal', orientationAngle: 45, itemStyle: { normal: { label: { show: false, formatter: '{b}', textStyle: { fontSize: 12, color: 'white' } } } }, data: [{ name: '#1 Machu Picchu, Machu Picchu, Peru', geoCoord: [-72.544963, -13.163141], value : "Machu Picchu" }, { name: '#2 Angkor Wat, Siem Reap, Cambodia', geoCoord: [103.866986, 13.412469], value : "Angkor Wat" }, { name: '#3 Taj Mahal, Agra, India', geoCoord: [78.042155, 27.175015], value : "Taj Mahal" }, { name: '#4 Petra World Heritage Site, Wadi Musa, Jordan', geoCoord: [35.4428063, 30.3251545], value : "Petra World Heritage Site" }, { name: '#5 Bayon Temple, Siem Reap, Cambodia', geoCoord: [103.8616785, 13.4399061], value : "Bayon Temple, Siem Reap" }, { name: '#6 Great Cathedral and Mosque, Cordoba, Spain', geoCoord: [-4.779387, 37.878906], value : "Great Cathedral and Mosque" }, { name: '#7 Church of Our Savior on Spilled Blood, St. Petersburg, Russia', geoCoord: [30.3289, 59.9401], value : "Church of Our Savior on Spilled Blood" }, { name: '#8 St. Peter’s Basilica, Vatican City, Italy', geoCoord: [12.453937, 41.902167], value : "St. Peter’s Basilica" }, { name: '#9 Ancient City Walls, Dubrovnik, Croatia', geoCoord: [18.1064995, 42.642481], value : "Ancient City Walls" }, { name: '#10 Main Market Square (Rynek Glowny), Krakow, Poland', geoCoord: [19.936756, 50.061897], value : "Main Market Square" }, { name: '#11 Temple of Karnak, Luxor, Egypt', geoCoord: [32.65727, 25.718835], value : "Temple of Karnak" }, { name: '#12 Bellagio Fountains, Las Vegas, Nevada', geoCoord: [-115.174232, 36.112947], value : "Bellagio Fountains" }, { name: '#13 Sheikh Zayed Grand Mosque, Abu Dhabi, United Arab Emirates', geoCoord: [54.474779, 24.413679], value : "Sheikh Zayed Grand Mosque" }, { name: '#14 Alcazar, Seville, Spain', geoCoord: [-3.2225188, 39.3947303], value : "Alcazar" }, { name: '#15 Gettysburg National Military Park, Gettysburg, Pennsylvania', geoCoord: [-77.2379262, 39.8154696], value : "Gettysburg National Military Park" }, { name: '#16 The Alhambra, Granada, Spain', geoCoord: [-3.588141, 37.176078], value : "The Alhambra" }, { name: '#17 Great Wall at Mutianyu, Beijing, China', geoCoord: [116.5604055, 40.430837], value : "Great Wall at Mutianyu" }, { name: '#18 Shwedagon Pagoda, Yangon (Rangoon), Myanmar', geoCoord: [96.149198, 16.798313], value : "Shwedagon Pagoda" }, { name: '#19 USS Arizona Memorial, Honolulu, Hawaii', geoCoord: [-157.9519192, 21.364834], value : "USS Arizona Memorial" }, { name: '#20 Cristo Redentor (Statue of Christ the Redeemer), Rio de Janeiro, Brazil', geoCoord: [-43.372762, -22.9361413], value : "Cristo Redentor" }, { name: '#21 Top of the Rock Observation Deck, New York City, New York', geoCoord: [-73.9822225, 40.7560311], value : "Top of the Rock Observation Deck" }, { name: '#22 Cathedral of Santiago de Compostela, Santiago de Compostela, Spain', geoCoord: [-8.544641, 42.880596], value : "Cathedral of Santiago de Compostela" }, { name: '#23 Golden Gate Bridge, San Francisco, California', geoCoord: [-122.478255, 37.819929], value : "Golden Gate Bridge" }, { name: '#24 Cathedral of St. John the Baptist, Savannah, Georgia', geoCoord: [-81.091277, 32.073383], value : "Cathedral of St. John the Baptist" }, { name: '#25 Siena Cathedral, Siena, Italy', geoCoord: [11.328907, 43.317702], value : "Siena Cathedral" }] }, data: [{}] }] }; chart.setOption(option); chart.on('click', markPointClick); }); var markPointClick = function(param, echarts) { alert("您点中的是" + param.value); };
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
目前 marker 都还不支持交互, 预期会在 0.2 版本中加入