前端 百度地图 javascript 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')
                        })