JSFiddle - React, Tailwind, and code Playground
by liyuanqiu
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<style type="text/css">
body,
html,
#container {
height: 100%;
margin: 0px;
font: 12px Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', Arial;
}
.info-title {
color: white;
font-size: 14px;
background-color: rgba(0, 155, 255, 0.8);
line-height: 26px;
padding: 0px 0 0 6px;
font-weight: lighter;
letter-spacing: 1px
}
.info-content {
padding: 4px;
color: #666666;
line-height: 23px;
}
.info-content img {
float: left;
margin: 3px;
}
</style>
<title>快速入门</title>
</head>
<body>
<div id="container" tabindex="0"></div>
<div id='panel'></div>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.2&key=b5aba1e13e62d619458d2678d86b4adf"></script>
<script type="text/javascript">
const gpggaList = [
[3113.44247, 12120.96357],
[3113.44257, 12120.96342],
[3113.44266, 12120.9633],
[3113.44233, 12120.96369],
[3113.44228, 12120.96392],
[3113.4422, 12120.96422],
[3113.4421, 12120.96442],
[3113.44197, 12120.96465],
[3113.442, 12120.96472],
[3113.44204, 12120.96478],
[3113.44205, 12120.96484],
[3113.4421, 12120.96492],
[3113.44203, 12120.96502],
[3113.44197, 12120.96507],
[3113.44192, 12120.96513],
[3113.44192, 12120.96518],
[3113.44192, 12120.96521],
[3113.44191, 12120.96522],
[3113.44187, 12120.96524],
[3113.44185, 12120.96523],
[3113.44182, 12120.96524],
[3113.44146, 12120.96529],
[3113.44129, 12120.96525],
[3113.44122,...