3D地图上添加的markPoint能否添加点击事件响应?

发布于 2021-11-26 03:23:16 字数 5533 浏览 897 评论 1

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



但是打印出来永远都是"-",也就是说点不了markpoint,请问这个功能是否支持?或者说我使用方式不对?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

皇甫轩 2021-11-28 12:34:35

目前 marker 都还不支持交互, 预期会在 0.2 版本中加入

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文