如何在谷歌离线地图上画面源代码

一键离线地图开发服务器离线地图开发主要有两部分组成：1、获取离线地图数据；因为离线地图一般都是局域网，所以需要离线地图数据放在内网中使用；2、离线地图服务器搭建以及二次开发接口提供，离线地图是一种服务，就像我们Apache提供的WEB服务器一样，他是一种准们的地图服务：提供了包括 WEB服务、TMS服务、WMTS服务等等。离线地图数据的获取：可以通过【大...

Bigemap

384人浏览 · 2020-03-12 16:10:35

Bigemap · 2020-03-12 16:10:35 发布

一键离线地图开发服务器

离线地图开发主要有两部分组成：1、获取离线地图数据；因为离线地图一般都是局域网，所以需要离线地图数据放在内网中使用；2、离线地图服务器搭建以及二次开发接口提供，离线地图是一种服务，就像我们Apache提供的WEB服务器一样，他是一种准们的地图服务：提供了包括 WEB服务、TMS服务、WMTS服务等等。

离线地图数据的获取：可以通过【大地图下载器】下载到。

要进行谷歌离线地图的开发，最简单的方式就是安装【离线地图服务器】，安装好地图就搭建完成了，就可以进行二次开发了。

离线地图服务器，如下图：

离线地图开发画多变形效果图：

离线地图画多边形的源代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绘制</title>
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<link href='http://www.bigemap.com:9000/bigemap.js/v2.1.0/bigemap.css' rel='stylesheet' />
<script src='http://www.bigemap.com:9000/bigemap.js/v2.1.0/bigemap.js'></script>
<link href="https://cdn.bootcss.com/Buttons/2.0.0/css/buttons.min.css" rel="stylesheet">





<link rel="stylesheet" href="/Public/mouse_draw/Bigemap.draw.css"/>
<script src="/Public/mouse_draw/Bigemap.draw.js"></script>
<script src="/Public/mouse_draw/Bigemap.Draw.Event.js"></script>

<script src="/Public/mouse_draw/draw/handler/Draw.Feature.js"></script>
<script src="/Public/mouse_draw/draw/handler/Draw.Polyline.js"></script>
<script src="/Public/mouse_draw/draw/handler/Draw.Polygon.js"></script>
<script src="/Public/mouse_draw/draw/handler/Draw.SimpleShape.js"></script>
<script src="/Public/mouse_draw/draw/handler/Draw.Rectangle.js"></script>
<script src="/Public/mouse_draw/draw/handler/Draw.Circle.js"></script>
<script src="/Public/mouse_draw/draw/handler/Draw.Marker.js"></script>
<script src="/Public/mouse_draw/draw/handler/Draw.CircleMarker.js"></script>

</div>
<script>
BM.Config.HTTP_URL = 'http://www.bigemap.com:9000';

// 在ID为map的元素中实例化一个地图，并设置地图的ID号为 bigemap.googlemap-streets，ID号程序自动生成，无需手动配置，并设置地图的投影为百度地图，中心点，默认的级别和显示级别控件
var map = BM.map('map', 'bigemap.googlemap-streets', {center: [30, 104], zoom: 8, zoomControl: true });

//创建一个图形覆盖物的集合来保存点线面
var drawnItems = new BM.FeatureGroup();
//添加在地图上
map.addLayer(drawnItems);
// var polygon = new BM.Polyline([
// [51.51, -0.1],
// [51.5, -0.06],
// [51.52, -0.03]
// ]);
//
// polygon.editing.enable();
//
// polygon.on('contextmenu',function (e) {
// console.log(this);
// });
//
// polygon.addTo(map);

// map.on(BM.Draw.Event.EDITSTOP,function () {
// console.log(this);
// });

//监听绘画完成事件
map.on(BM.Draw.Event.CREATED, function (e) {
var layer = e.layer;
console.log(e.layer);
drawnItems.addLayer(layer);
});
//设置一个变量来保存当前的绘制对象
var draw;
document.querySelector('#start').οnclick=function () {
if (!draw){
draw=new BM.Draw.Polygon(map);
}
draw.enable();
}
</script>
</body>
</html>