高级经纬度 | JShare

$(function () {
	var H = Highcharts,
		map = H.maps['countries/us/us-all'],
		chart;
	// Add series with state capital bubbles
	$.getJSON('https://data.jianshukeji.com/jsonp?filename=json/us-capitals.json&callback=?', function (json) {
		var data = [];
		$.each(json, function (ix, entry) {
			entry.z = entry.population;
			data.push(entry);
		});
		$('#container').highcharts('Map', {
			title: {
				text: '经纬度定位及获取经纬度'
			},
			tooltip: {
				formatter: function () {
					return this.point.capital + ', ' + this.point.parentState + '<br>Lat: ' + this.point.lat + ' Lon: ' + this.point.lon + '<br>Population: ' + this.point.population;
				},
				crosshairs: [{
					zIndex: 5,
					dashStyle: 'dot',
					snap: false,
					color: 'gray'
				}, {
					zIndex: 5,
					dashStyle: 'dot',
					snap: false,
					color: 'gray'
				}],
			},
			mapNavigation: {
				enabled: true
			},
			series: [{
				name: 'Basemap',
				mapData: map,
				borderColor: '#606060',
				nullColor: 'rgba(200, 200, 200, 0.2)',
				showInLegend: false
			}, {
				name: 'Separators',
				type: 'mapline',
				data: H.geojson(map, 'mapline'),
				color: '#101010',
				enableMouseTracking: false
			}, {
				type: 'mapbubble',
				dataLabels: {
					enabled: true,
					format: '{point.capital}'
				},
				name: 'Cities',
				data: data,
				maxSize: '12%',
				color: H.getOptions().colors[0]
			}]
		});
		chart = $('#container').highcharts();
	});
	// Display custom label with lat/lon next to crosshairs
	$('#container').mousemove(function (e) {
		var position;
		if (chart) {
			if (!chart.lab) {
				chart.lab = chart.renderer.text('', 0, 0)
					.attr({
					zIndex: 5
				})
					.css({
					color: '#505050'
				})
					.add();
			}
			e = chart.pointer.normalize(e);
			position = chart.fromPointToLatLon({
				x: chart.xAxis[0].toValue(e.chartX),
				y: chart.yAxis[0].toValue(e.chartY)
			});
			chart.lab.attr({
				x: e.chartX + 5,
				y: e.chartY - 22,
				text: 'Lat: ' + position.lat.toFixed(2) + '<br>Lon: ' + position.lon.toFixed(2)
			});
		}
	});
	$('#container').mouseout(function (e) {
		if (chart && chart.lab) {
			chart.lab.destroy();
			chart.lab = null;
		};
	});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.2.2/proj4.js"></script>
<!-- 所有地图数据详情见：https://img.hcharts.cn/mapdata/index.html -->
<script src="https://img.hcharts.cn/mapdata/countries/us/us-all.js"></script>
<div id="container"></div>

#container {
	height: 680px;
	min-width: 310px;
	max-width: 1500px;
	margin: 0 auto;
}
.loading {
	margin-top: 10em;
	text-align: center;
	color: gray;
}

{"doctype":0,"resouces":"1,30,7","options":"{\"editor\":{\"saveLayout\":true,\"saveFold\":false,\"autoFormat\":true},\"hcode\":{\"layoutId\":7,\"layoutOptions\":\"{\\\"0\\\":{\\\"1\\\":\\\"0\\\",\\\"2\\\":\\\"0\\\",\\\"3\\\":\\\"1\\\",\\\"t\\\":\\\"0\\\",\\\"p\\\":\\\"1\\\",\\\"blockedPopoutsThrowError\\\":\\\"0\\\",\\\"closePopoutsOnUnload\\\":\\\"0\\\",\\\"showPopoutIcon\\\":\\\"1\\\",\\\"showMaximiseIcon\\\":\\\"0\\\",\\\"showCloseIcon\\\":\\\"1\\\",\\\"responsiveMode\\\":\\\"onload\\\",\\\"tabOverlapAllowance\\\":0,\\\"reorderOnTabMenuClick\\\":\\\"0\\\",\\\"tabControlOffset\\\":10},\\\"4\\\":{\\\"5\\\":1,\\\"6\\\":100,\\\"7\\\":300,\\\"8\\\":20,\\\"9\\\":300,\\\"u\\\":15,\\\"a\\\":200},\\\"b\\\":{\\\"c\\\":\\\"6\\\",\\\"d\\\":\\\"最大化\\\",\\\"e\\\":\\\"恢复大小\\\",\\\"f\\\":\\\"9\\\",\\\"popin\\\":\\\"pop in\\\",\\\"tabDropdown\\\":\\\"additional tabs\\\"},\\\"g\\\":[{\\\"l\\\":\\\"2\\\",\\\"n\\\":\\\"0\\\",\\\"t\\\":\\\"0\\\",\\\"o\\\":\\\"\\\",\\\"g\\\":[{\\\"l\\\":\\\"3\\\",\\\"n\\\":\\\"0\\\",\\\"t\\\":\\\"0\\\",\\\"o\\\":\\\"\\\",\\\"k\\\":50,\\\"g\\\":[{\\\"l\\\":\\\"4\\\",\\\"n\\\":\\\"0\\\",\\\"m\\\":100,\\\"t\\\":\\\"0\\\",\\\"o\\\":\\\"\\\",\\\"s\\\":0,\\\"g\\\":[{\\\"l\\\":\\\"5\\\",\\\"j\\\":\\\"javascript\\\",\\\"h\\\":\\\"editor\\\",\\\"o\\\":\\\"JavaScript\\\",\\\"i\\\":{\\\"name\\\":\\\"javascript\\\"},\\\"n\\\":\\\"0\\\",\\\"t\\\":\\\"0\\\"}]}]},{\\\"l\\\":\\\"3\\\",\\\"n\\\":\\\"0\\\",\\\"t\\\":\\\"0\\\",\\\"o\\\":\\\"\\\",\\\"k\\\":50,\\\"g\\\":[{\\\"l\\\":\\\"4\\\",\\\"n\\\":\\\"0\\\",\\\"m\\\":81.85792349726776,\\\"t\\\":\\\"0\\\",\\\"o\\\":\\\"\\\",\\\"s\\\":0,\\\"g\\\":[{\\\"l\\\":\\\"5\\\",\\\"h\\\":\\\"editor\\\",\\\"o\\\":\\\"运行结果\\\",\\\"m\\\":60,\\\"j\\\":\\\"result\\\",\\\"i\\\":{\\\"name\\\":\\\"result\\\"},\\\"n\\\":\\\"0\\\",\\\"t\\\":\\\"0\\\"}]},{\\\"l\\\":\\\"4\\\",\\\"n\\\":\\\"0\\\",\\\"t\\\":\\\"0\\\",\\\"o\\\":\\\"\\\",\\\"m\\\":18.14207650273224,\\\"s\\\":0,\\\"g\\\":[{\\\"l\\\":\\\"5\\\",\\\"o\\\":\\\"HTML\\\",\\\"j\\\":\\\"html\\\",\\\"h\\\":\\\"editor\\\",\\\"i\\\":{\\\"name\\\":\\\"html\\\"},\\\"n\\\":\\\"0\\\",\\\"t\\\":\\\"0\\\"},{\\\"l\\\":\\\"5\\\",\\\"h\\\":\\\"editor\\\",\\\"o\\\":\\\"CSS\\\",\\\"j\\\":\\\"css\\\",\\\"i\\\":{\\\"name\\\":\\\"css\\\"},\\\"n\\\":\\\"0\\\",\\\"t\\\":\\\"0\\\"}]}]}]}],\\\"n\\\":\\\"0\\\",\\\"t\\\":\\\"0\\\",\\\"o\\\":\\\"\\\",\\\"q\\\":[],\\\"maximisedItemId\\\":{}}\"}}","meta":"<link rel=\"icon\" href=\"https://jscdn.com.cn/highcharts/images/favicon.ico\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">"}

高级经纬度 | JShare

模板（查看所有模板）