BIGEMPA Js API示例中心
<!DOCTYPE html> <html> <head> <meta charset='UTF-8'/> <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/> <!-- 以下CSS地址请在安装软件了替换成本地的地址 CSS地址请使用: http://localhost:9000/bigemap.js/v2.1.0/bigemap.css 软件下载地址 http://www.bigemap.com/reader/download/detail201802017.html --> <link href='http://www.bigemap.com:9000/bigemap.js/v2.1.0/bigemap.css' rel='stylesheet'/> <link href="http://www.bigemap.com/Public/css/button.min.css" rel="stylesheet"> <script src="http://www.bigemap.com/Public/common/js/jquery.min.js"></script> <!-- JS地址请使用: http://localhost:9000/bigemap.js/v2.1.0/bigemap.js --> <script src='http://www.bigemap.com:9000/bigemap.js/v2.1.0/bigemap.js'></script> <style> html, body, #map { margin: 0; padding: 0; height: 100%; width: 100% } #info { width: 340px; position: absolute; top: 100px; left: 50%; z-index: 10; margin-left: -170px; color: #155724; background-color: #d4edda; padding: .75rem 1.25rem; margin-bottom: 1rem; border: 1px solid transparent; border-radius: .25rem; font-size: 14px; } li{ list-style: none; display: flex; } .tips{ position: absolute; top: 30px; left: 50%; transform: translate(-50%,0); background: white; padding: 10px; color: red; } </style> </head> <body> <div id='map'></div> <div class="tips">点击地图 获取对应的信息</div> <div id="info"> </div> <script type="text/javascript">// 软件配置信息地址,软件安装完成之后使用本地地址,如:http://localhost:9000 BM.Config.HTTP_URL = 'http://www.bigemap.com:9000'; // 在ID为map的元素中实例化一个地图,并设置地图的ID号为 bigemap.baidu-map,ID号程序自动生成,无需手动配置,并设置地图的投影为百度地图 ,中心点,默认的级别和显示级别控件 var map = BM.map('map', 'bigemap.zhongkexingtu', { center: [30, 104], zoom: 3, attributionControl: false, zoomControl: true }); map.on("click", e => { console.log(e.latlng) axiosUrl(`${e.latlng.lng},${e.latlng.lat}`) }) // btk如果失效 请向Bigemap技术获取 // 地址:http://101.43.10.122:3481/geocoding/v2/place/<search>.json?&btk=huyNGxMO3Ot2sAZgIWiaV2VQ4aFkqvlYmNxT4jGhKhE%3D // // 文档地址: https://apifox.com/apidoc/shared-3dfbc77d-76ca-4190-8391-c1baf5e9c66b/doc-3485616 var infoDom = document.getElementById("info") function axiosUrl(latlng) { var infoarr = [] $.get(`http://101.43.10.122:3481/geocoding/v2/place/${latlng}.json?&btk=huyNGxMO3Ot2sAZgIWiaV2VQ4aFkqvlYmNxT4jGhKhE%3D`).then(res => { console.log(res) //返回的结果 res.features.forEach(v => { infoarr.push({ test: v.text, center: v.center, place_name: v.place_name, place_type: v.place_type[0] }) }) console.log(infoarr) addDiv(infoarr) }) } function addDiv(arr) { var tdiv = document.createElement("div") var t = `<div>` arr.forEach(a => { t += `<li> <p>${a.place_type}:</p> <p>${a.place_name}</p> </li>` }) t+="</div>" infoDom.innerHTML = t } </script> </body> </html>