创建一个离线地图HTML+JS完整代码

时间：2022-07-11 20:15:23 阅读：最新文章文档下载

说明：文章内容仅供预览，部分内容可能不全。下载后的文档，内容与下面显示的完全一致。下载之前请确认下面内容是否您想要的，是否完整无缺。

离线地图发布http://www.bigemap.com/offlinemaps/bmap/

创建第一个离线地图 HTML+JS完整代码：

<html> <head>

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

<title>Hello World <style type="text/css">

body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}

#allmap{width:100%;height:100%;}

<script type="text/javascript" src="js/apiv.2.0.js"> <body>

<div id="allmap">

<script type="text/javascript"> // 创建Map实例

var map = new BMap.Map("allmap", {enableMapClick:false}; // 设置地图背景色为白色

map.getContainer().style.background = '#FFF'; // 初始化地图,设置中心点坐标和地图级别

var point = new BMap.Point(110.1, 35.1); map.centerAndZoom(point, 5);

创建地图实例

var map = new BMap.Map("allmap");

位于BMap命名空间下的Map类表示地图，通过new操作符可以创建一个地图实例。其参数可以是元素id也可以是元素对象。

注意在调用此构造函数时应确保容器元素已经添加到地图上。

离线地图发布http://www.bigemap.com/offlinemaps/bmap/

创建点坐标

var point = new BMap.Point(110.1, 35.1);

这里我们使用BMap命名空间下的Point类来创建一个坐标点。Point类描述了一个地理坐标点，其中116.404表示经度，39.915表示纬度。地图初始化

map.centerAndZoom(point, 5);

在创建地图实例后，我们需要对其进行初始化，BMap.Map.centerAndZoom()方法要求设置中心点坐标和地图级别。地图必须经过初始化才可以执行其他操作

默认设置

map.enableScrollWheelZoom(); // 启用滚轮放大缩小。 map.enableKeyboard(); // 启用键盘操作。 map.enableContinuousZoom(); //启用连续缩放效果 map.enableDragging(); //开启拖拽

若需要禁止拖拽设置 map.disableDragging();即可

地图瓦片经过裁剪后其余部分为白色，百度地图默认灰色背景，首先设置地图容器背景色为白色效果如下：

离线地图发布http://www.bigemap.com/offlinemaps/bmap/

图1 地图显示

本文来源：https://www.wddqw.com/doc/f256452da31614791711cc7931b765ce05087af6.html

相关文章：

正在阅读：

创建一个离线地图HTML+JS完整代码01-01

日常办公管理制度01-01

常用校车术语汇总01-01

体育经济的社会学研究01-01

描写黄山风景的诗句01-01

圆梦高考满分作文5篇900字01-01

《情深似海 - 陈雷》歌词华人群星901-01

同学聚会歌曲：朋友别哭01-01

农村社会学分章习题：第三章农村人口01-01

上一篇：公益爱心传递正能量名字下一篇：水利水电工程施工企业工程造价管理-文档资料

相关热搜

推荐文章

热门阅读

最新文章