转:谷歌离线地图基础

一.需要文件

  1. gapi3文件夹:存放接口等
  2. tilemap文件夹:存放图片
  3. gapi.js文件
  4. maptool.js文件

二.html配置

<script type="text/javascript" src="gapi.js"></script>
<script type="text/javascript" src="maptool.js"></script>
  • 1
  • 2

三.使用

html中使用div 展示地图

<div id="map_canvas"  style="width=100%; height: 900px;"></div>
  • 1

text/javascript中创建离线对象

////////////////////////////////CoordMapType对象定义:显示目标位置div/////////////////////////////////////////////////////////////////
function CoordMapType(tileSize) {//创建对象方法(构造函数)this.tileSize = tileSize;
}CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {var div = ownerDocument.createElement('DIV');var ymax = 1 << zoom;var y = ymax - coord.y - 1;
//  div.innerHTML = coord.x + "," + y + "," + zoom;div.style.width = this.tileSize.width + 'px';div.style.height = this.tileSize.height + 'px';div.style.fontSize = '10';div.style.borderStyle = 'solid';div.style.borderWidth = '0px';div.style.borderColor = '#AAAAAA';return div;
};////////////////////////////////LocalMapType对象定义:使用本地地图实体类型/////////////////////////////////////////////////////////////////
function LocalMapType() {}LocalMapType.prototype.tileSize = new google.maps.Size(256, 256);
LocalMapType.prototype.maxZoom = 18;
LocalMapType.prototype.minZoom = 1;
LocalMapType.prototype.name = "本地";
LocalMapType.prototype.alt = "显示本地地图";
LocalMapType.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";var ymax = 1 << zoom;var y = ymax - coord.y - 1;var strURL = "tilemap\\sjztms\\" + zoom + "\\" + coord.x + "\\" + y + ".png";img.src = strURL; return img;
};
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41

载入地图(除了需要使用离线地图对象外,API使用方法和在线地图一样)

var localMapType = new LocalMapType(); 
//创建一个简单的 Google 地图
var myLatlng = new google.maps.LatLng(30.732137,103.968976);//谷歌经纬度,使用WGS84坐标系
var myOptions = {//myOptions:地图设置center: myLatlng,zoom: 13 ,zoomControl :false,streetViewControl: false,disableDoubleClickZoom: true,//禁用双击放大mapTypeControl: false,//禁用左上角样式 控件mapTypeControlOptions: {mapTypeIds: ["local", google.maps.MapTypeId.ROADMAP]}
}
在map_canvas上创建地图,地图设置myOptionsvar map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);//Map() 的属性:controls控件;mapTypes按字符串 ID 划分的 MapType 实例的注册表,overlayMapTypes 要叠加的额外地图类型map.mapTypes.set('local', localMapType);//注册本地地图实体类型map.setMapTypeId('local');//使用本地地图实体类型map.overlayMapTypes.insertAt(0, new CoordMapType(new google.maps.Size(256, 256)));
allmap=map;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/247544.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HTTP Header 详解

搜集资料 HTTP&#xff08;HyperTextTransferProtocol&#xff09;即超文本传输协议&#xff0c;目前网页传输的的通用协议。HTTP协议采用了请求/响应模型&#xff0c;浏览器或其他客户端发出请求&#xff0c;服务器给与响应。就整个网络资源传输而言&#xff0c;包括message-h…

Windows CE 6.0中断处理过程(转载)

这里我们主要讨论的是CE的中断建立和中断相应的大概流程以及所涉及的代码位置。这里所讲述的&#xff0c;是针对ARM平台的。在CE的中断处理里面&#xff0c;有一部分工作是CE Kernel完成的&#xff0c;有一部分工作是要由OEM完成的。 Kernel代码工作 ExVector.s&#xff1a;中断…

document.createDocumentFragment 以及创建节点速度比较

document.createDocumentFragment document.createDocumentFragment()方法创建一个新空白的DocumentFragment对象。 DocumentFragments是DOM节点。它们不是主DOM树的一部分。通常的用例是创建文档片段&#xff0c;将元素附加到文档片段&#xff0c;然后将文档片段附加到DOM树。…

Javascript重温OOP之原型与原型链

prototype原型对象 每个函数都有一个默认的prototype属性&#xff0c;其实际上还是一个对象&#xff0c;如果被用在继承中&#xff0c;姑且叫做原型对象。 在构造函数中的prototype中定义的属性和方法&#xff0c;会被创建的对象所继承下来。举个栗子&#xff1a; function F()…

webpack超详细配置

在这里就不详细介绍webpack来源以及作用了, 本篇博文面向新手主要说明如何配置webpack, 以及webpack的使用方法, 直到创建出一个合理的属于自己webpack项目; 流程 webpack安装 Step 1: 首先安装Node.js, 可以去Node.js官网下载.Step2: 在Git或者cmd中输入下面这段代码, 通过全局…

小白十分钟-推荐导航栏

大腿绕道&#xff0c;给小白学习用&#xff0c;上代码 <div class"list"><div class"infor"><ul class"left"><li><a href"">限时特价</a></li><li><a href"">热门推…

Underscore.js常用方法介绍

Underscore.js是一个很精干的库&#xff0c;压缩后只有4KB。它提供了几十种函数式编程的方法&#xff0c;弥补了标准库的不足&#xff0c;大大方便了JavaScript的编程。MVC框架Backbone.js就将这个库作为自己的工具库。除了可以在浏览器环境使用&#xff0c;Underscore.js还可以…

掌握ES6/ES2015核心内容

ECMAScript 6&#xff08;以下简称ES6&#xff09;是JavaScript语言的下一代标准。因为当前版本的ES6是在2015年发布的&#xff0c;所以又称ECMAScript 2015。 也就是说&#xff0c;ES6就是ES2015。 虽然目前并不是所有浏览器都能兼容ES6全部特性&#xff0c;但越来越多的程序员…

express-generator——Express应用生成器贼快!

通过应用生成器工具 express 可以快速创建一个应用的骨架。 通过如下命令安装&#xff1a; $ npm install express-generator -g-h 选项可以列出所有可用的命令行选项&#xff1a; $ express -hUsage: express [options] [dir]Options:-h, --help output usage inform…

转:canvas--放大镜效果

<!DOCTYPE html><html><head><meta charset"UTF-8"><title>鼠标事件</title></head><body><canvas id"canvas"></canvas><canvas id"offCanvas" style" display: none;&qu…

MON

早上5点,咪咪牛就醒了,开始跳到我边上,用白毛毛把我弄醒,在我身上走来走去,把她按住抚摸也不能让她停止.....只能拎起来扔到边上了 ;)看起来还的确是很调皮的猫咪呢昨天晚上就开始不太怕我了,走到我的椅子边上喵喵叫,直到把她放在身上,才慢慢睡觉,满可爱的早上出门叫车,一车正停…

CSS做个Switch开关

Switch开关&#xff1a;根据需求可知&#xff0c;Switch开关只有两种选择&#xff0c;true或false。所以我们想到HTML的checkbox控件&#xff0c;用它来做。  <input id"switch" type"checkbox" class"switch" />但是在浏览器中&#xf…

vue小记录1

1.入口index.html文件 做reset.css初始化&#xff0c;视口viewport设置 2.规范化eslint配置&#xff08;常用&#xff09; &#xff08;1&#xff09;rules -->"semi"分号 "semi":[error,alway], &#xff08;2&#xff09;indent 空格 "inde…

解决虚拟机能ping通宿主机,而宿主机不能ping通虚拟机

解决虚拟机能ping通宿主机&#xff0c;而宿主机不能ping通虚拟机 首先&#xff0c;查看宿主机的网卡状态 如果没有&#xff0c;打开虚拟机&#xff0c;选择编辑 打开虚拟网络编辑器&#xff0c;并选择更改设置 勾选将设备适配器连接此网络 完成&#xff0c;这样宿主机便可以pin…

mongo使用学习FAQ

1:mongo的集合和database区分大小写么? 在 MongoDB 中&#xff0c;数据库和集合的名称是区分大小写的。这意味着&#xff0c;数据库 MyDatabase 和 mydatabase 或集合 MyCollection 和 mycollection 会被视为不同的数据库或集合。因此&#xff0c;在操作数据库和集合时&#…

前端下载的实现

前端很多项目中&#xff0c;都有文件下载的需求&#xff0c;特别是JS生成文件内容&#xff0c;然后让浏览器执行下载操作&#xff08;例如在线图片编辑、在线代码编辑、iPresst等&#xff09;。但受限于浏览器&#xff0c;很多情况下我们都只能给出个链接&#xff0c;让用户点击…

V记录2(文档)Vue.extend构造器

1.简单介绍 Vue.extend(options) 参数&#xff1a;对象 用法&#xff1a;使用Vue构造器&#xff0c;创建一个“子类”&#xff0c;参数是一个包含组件选项的对象&#xff0c;其中,data选项中必须是函数 描述&#xff1a;Vue.extend返回的是一个“扩展实例构造器”&#xff0c;也…

在javascript中,如何判断一个被多次encode 的url 已经被decode到原来的格式?

% 而不能被无限次decodeURIComponent 可以用%来进行判断 转载于:https://www.cnblogs.com/zhouyideboke/p/11169705.html

推荐base.css

学习《编写高质量代码--Web前端开发修炼之道》 /* CSS Document */ /*css reset*/ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;} table{ border-collapse:collapse;border-spacing:0;} fieldest,i…

如何通过RFID开发来迎接第四次工业革命(转)

我们都经历了革命性的冲击&#xff0c;自上世纪90年代初的互联网冲击了文化和商业&#xff0c;但很少人知道如何完成RFID开发来迎接第四次工业革命&#xff0c;在接下来的二十年里&#xff0c;智能工厂的出现将成为一个重要组成部分。制造业作为我国工业的主体&#xff0c;面临…