@xuehongbo/map-craft-js
Version:
MapCraftJS 是一个功能强大且灵活的开源 JavaScript 库，旨在简化互动地图的创建和操作。使用 MapCraftJS，开发者可以轻松地将动态地图功能集成到应用程序中，为用户提供根据自定义配置查看、注释和互动的地图体验。(开发中！！！)
94 lines (86 loc) • 2.6 kB
HTML
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Map-Craft Example</title>
<style>
html,
body,
#map {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.content {
position: absolute;
top: 10px;
left: 10px;
z-index: 1000;
}
#map-select {
padding: 5px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #fff;
color: #333;
font-size: 16px;
cursor: pointer;
}
.upload-container {
position: absolute;
top: 10px;
right: 10px;
z-index: 1000;
}
.upload-button {
padding: 5px 10px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #fff;
color: #333;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="content">
<select id="map-select" onchange="mapChange()">
<option value="egis">思极地图</option>
<option value="bmap">百度地图</option>
<option value="amap">高德地图</option>
</select>
</div>
<div class="upload-container">
<button class="upload-button" onclick="uploadXML()">上传CIM模型</button>
<input type="file" id="xml-file" accept=".xml" style="display: none;" onchange="parseXML()">
</div>
<div id="map"></div>
<!-- 引入 index.js 文件 -->
<script src="./example.js" type="module"></script>
<script type="text/javascript">
function mapChange() {
var type = document.getElementById("map-select").value;
initMap(type);
}
function uploadXML() {
document.getElementById('xml-file').click();
}
function parseXML() {
const fileInput = document.getElementById('xml-file');
const file = fileInput.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
const xmlString = e.target.result;
// 这里可以调用解析XML的函数
console.log('XML内容:', xmlString);
};
reader.readAsText(file);
}
}
</script>
</body>
</html>