前端 百度地图 javascript api 在线地图, 离线地图
- 在线地图
-
- 离线地图 (瓦片地图)
-
- 一些常用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')
})
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)