实际代码内容也很简单：
<!DOCTYPE html> <html> <head> <style> html, body { width: 100%; height: 100%; } </style> </head> <body id="map"></body> <script> // 引入百度地图并且满窗口显示 var script = document.createElement("script"); script.src = "http://api.map.baidu.com/api?v=2.0&callback=initialize"; document.body.appendChild(script); function initialize() { setTimeout(() => { var map = new BMap.Map("map"); // 将地图显示在id为map的元素中，可以设置其它属性 var geoc = new BMap.Geocoder(); // 从父窗口的document中获取地理坐标 var positions = []; var elements = Array.from(window.parent.document.querySelectorAll("[data-node-id][custom-position]")); console.log(elements) elements.forEach( block => { var positionStr = block.getAttribute("custom-position"); var id = block.getAttribute("data-node-id") + ''; if (positionStr) { var positionArr = positionStr.split(","); var position = new BMap.Point( parseFloat(positionArr[0]), parseFloat(positionArr[1]) ); var content = block.textContent || block.innerText; var marker = new BMap.Marker(position); var label = new BMap.Label(content.substr(0, 20)); marker.setLabel(label); map.addOverlay(marker); positions.push(position); marker.id = id marker.addEventListener("click", () => { window.open(`siyuan://blocks/${id}`); // 选取data-node-id为指定值的元素 // 添加样式 const style = window.parent.document.createElement("style"); style.innerHTML = ` @keyframes remove { 0% { opacity: 1; } 100% { opacity: 0; border: none; } } div[data-node-id="${id}"] { border: 2px dashed #8ac6d0; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); } `; window.parent.document.head.appendChild(style); // 移除边框后移除style标签 setTimeout(() => { window.parent.document.head.removeChild(style); }, 1000); }); } } ) if (positions.length > 0) { map.setViewport(positions); } }, 500); } </script> </html>
一个网页搞定~~。
效果就像这样：
那么大家可以想想为啥这玩意在我那个汇总贴里面是分在人工智障驯化分类里面的了
《半自动滑稽》
如果它对你有用可以通过爱发电来请作者喝杯咖啡。
If it's useful to you, you can buy the author a cup of coffee through afdian.com.
https://afdian.net/a/leolee9086
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于