Bigemap支持信息窗口显示

最新推荐文章于 2025-02-07 15:31:34 发布

原创最新推荐文章于 2025-02-07 15:31:34 发布 · 581 阅读

0 ·

CC 4.0 BY-SA版权

地图下载器专栏收录该内容

22 篇文章

订阅专栏

这篇博客展示了如何创建一个简单的地图，使用BigeMap自定义地图，并通过JavaScript代码设置地图的中心点、缩放级别、禁用街景及添加地图类型。示例代码中加载了谷歌地图瓦片并展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

QQ截图20170302153517.png

创建一个最简单的地图

代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>google</title>
    <link rel="stylesheet" type="text/css" href="pub/css/console.css"/>
    <script type="text/javascript" src="main.js"></script>
    <script type="text/javascript" src="pub/js/maplabel-compiled.js"></script>
</head>
<body>
<div id="map_canvas" style="width: 100%"></div>
</body>
</html>
<script type="text/javascript">
    var map;
  //自定义地图
    function BigeMap() {}
  //地图下属瓦片大小
    BigeMap.prototype.tileSize = new google.maps.Size(256, 256);
  //地图最大级别
    BigeMap.prototype.maxZoom = 19;
  //地图最小级别
    BigeMap.prototype.minZoom = 4;
  //地图名称
    BigeMap.prototype.name = "地图";
  //此地图种类获取URL的地址
    BigeMap.prototype.getTile = function (coord, zoom, ownerDocument) {
        var img = ownerDocument.createElement("img");
        img.style.width = this.tileSize.width + "px";
        img.style.height = this.tileSize.height + "px";
        //这里使用谷歌在线的数据，当然您也可以使用Bigemap地图下载器下载的离线瓦片作为此处的地址
        var strURL = 'http://mt0.google.cn/vt/lyrs=m@365000000&hl=zh-CN&gl=cn&x=' + coord.x +'&y=' + coord.y + '&z=' + zoom + '&s=Galil';
        img.src = strURL;
        return img;
    };

    var google_map = new BigeMap();

    var myOptions = {
//设置中心点
     center: new google.maps.LatLng(30.54024807, 104.06966686),
        //默认显示级别
     zoom: 4,
        //是否显示街景因为大部分是离线，所以不需要显示
     streetViewControl: false,
        mapTypeControlOptions: {
            mapTypeIds: ['google_online_map']
        }
    };
  //初始化map对象
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  //像map对象中添加一种地图
    map.mapTypes.set('google', google_map);
  //设置map对象默认显示 google 地图也就是上面的google_map对象
    map.setMapTypeId('google');
</script>