前端百度地图 javascript api 在线地图, 离线地图_lxw_powerfulCat_js 离线地图

未知 02-07 1123

前端百度地图 javascript api 在线地图, 离线地图在线地图登录百度api获取key注册为个人开发者后, 创建应用离线地图 (瓦片地图)下载离线瓦片地图二, 下载api.js 一些常用api难找见的api

在线地图

在线地图, 百度地图 api + echarts 优: 方便快捷, 示例丰富, 简单上手, 可在线编辑, 直接下载, 随后稍微修改就可缺: 商用要花钱, 老板不高兴百度地图api: https://lbsyun.baidu.com/jsdemo.htm#webgl0_1 百度地图获取key: https://lbs.baidu.com/index.php?title=jspopularGL/guide/getkey echarts-api: https://echarts.apache.org/examples/zh/index.html 可能会用到的网址: 省市区县乡镇行政区划数据, 可到四级街道(没有经纬度坐标, 只有联动) : https://xiangyuecn.gitee.io/areacity-jsspider-statsgov/ 获取城市边界线经纬度坐标(到区): http://datav.aliyun.com/portal/school/atlas/area_selector

登录百度api获取key

我于20220308发布这篇文章, 我获取的是个人key, 获取就能用

注册为个人开发者后, 创建应用

有应用的点击设置, 没应用的点创建注: 如果提示弹窗检查应用类型设置和referer白名单设置, referer设置不生效, 可以直接输一个 * 试试然后打开百度地图或者 echarts 的 api 直接调试就行, 调试好了, 换下key, echarts 需要把注释的script拿出来

离线地图 (瓦片地图)

优: 免费, 老板高兴缺, 版权问题, 步骤略微复杂( 需安装软件 )

下载离线瓦片地图

安装软件 MapTileDownloader https://blog.csdn.net/dyxcome/article/details/84193533

注意: 不用百度api也可以, 但用一家地图的api, 就要下载这家地图的瓦片, 用其他瓦片地图下载器也可以

二, 下载api.js

基本任何一家的地图api都是先加载地图, 再效验key, 把加载地图的key save as, 然后引入即可, 这里不做过多解释, 自行实验, 不要责怪小编, 小编没有这段代码的分享权力.

完成之后差不多这样

一些常用api难找见的api var map = new BMap.Map("allmap", { minZoom: 12, maxZoom: 15 });// 创建地图并设置最大最小缩放倍数 map.centerAndZoom(new BMap.Point("116.678642", "39.958"), 12);// 设置地图中心点 map.enableScrollWheelZoom(true);// 是否可以放大缩小 // 渲染 $.each(other_layer, function (index, name) { var tileLayer = new BMap.TileLayer({ isTransparentPng: true }); tileLayer.getTilesUrl = function (tileCoord, zoom) { return '../map/' + name + '/' + zoom + '/' + (tileCoord.x + "").replace(/-/gi, "M") + '/' + (tileCoord.y + "").replace(/-/gi, "M") + '.png'; } map.addTileLayer(tileLayer); }) // 限制拖拽范围 var strictBounds = map.getBounds(); map.addEventListener("dragend", function () { if (strictBounds.containsPoint(map.getCenter())) return; var c = map.getCenter(); x = c.lng, y = c.lat, maxX = strictBounds.getNorthEast().lng, maxY = strictBounds.getNorthEast().lat, minX = strictBounds.getSouthWest().lng, minY = strictBounds.getSouthWest().lat; if (x < minX) x = minX; if (x > maxX) x = maxX; if (y < minY) y = minY; if (y > maxY) y = maxY; map.centerAndZoom(new BMap.Point(116.678642, 39.958), 12); }) // 鼠标点击获取经纬度 map.addEventListener("click", function(e){ var pt = e.point; console.log(pt.lng,pt.lat) });

注意: 如果 mouseover 和 mouseout 不能很好的检测, map.add的时候最好不用循环, 且监听函数改为

$("path").hover(()=>{ $('path').attr('fill','#6f6cd8') },()=>{ $('path').attr('fill','#fff') })