转:谷歌离线地图基础[通俗易懂]

转:谷歌离线地图基础[通俗易懂]一.需要文件gapi3文件夹:存放接口等tilemap文件夹:存放图片gapi.js文件maptool.js文件二.html配置<scripttype="text/javascript"src="gapi.js"></script><scripttype="text/javascript"src="maptool.js">&lt

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

一.需要文件

  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上创建地图,地图设置myOptions
    var 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;
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/191455.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • kernel logo到开机动画之间闪现黑屏(android 5.X)

    kernel logo到开机动画之间闪现黑屏(android 5.X)

  • 惠普台式电脑安装系统按哪个键_hp不识别u盘装系统

    惠普台式电脑安装系统按哪个键_hp不识别u盘装系统当我们使用U盘给电脑装系统时,需要进入BIOS设置从USB启动,不过设置BIOS太麻烦了,而且大多数电脑现在都支持快捷键启动,如惠普笔记本,那么惠普usb装系统按哪个键呢?接下来小编就跟大家讲解一下,希望能够帮助到大家。惠普usb装系统步骤阅读1、将U盘插在电脑的USB接口,开机并不断按下启动U盘快捷键f12。2、在进入系统启动菜单中选择有USB字样的选项并回车。3、重启电脑,选择YunQiShi…

  • 开源阅读书源_阅读3.20.0518追书神器 海量书源 免费开源无广告[通俗易懂]

    开源阅读书源_阅读3.20.0518追书神器 海量书源 免费开源无广告[通俗易懂]特别声明所有软件皆来源于网上收集整理,仅供学习与交流技术,不得用作其它用途,如有侵犯你的权益,请联系我们,我们将于24小时内进行删除,谢谢你的配合!1阅读是一款开源免费的无人维护的电子书阅读应用程序。作者感言:如今的电子小说阅读应用总是在不断的添加广告,作为一个程序猿这是受不了的,于是开源的阅读软件来,你不用再担心广告。本软件fork一个无人维护的阅读软件,经过大量修改,实现自定义书源,…

  • SpringBoot整合Spring Security【超详细教程】

    SpringBoot整合Spring Security【超详细教程】好好学习,天天向上本文已收录至我的Github仓库DayDayUP:github.com/RobodLee/DayDayUP,欢迎Star,更多文章请前往:目录导航前言SpringSecurity是一个功能强大且高度可定制的身份验证和访问控制框架。提供了完善的认证机制和方法级的授权功能。是一款非常优秀的权限管理框架。它的核心是一组过滤器链,不同的功能经由不同的过滤器。这篇文章就是想通过一个小案例将SpringSecurity整合到SpringBoot中去。要实现的功能就是在认证服务器上登录,.

  • linux yum下载_虚拟机配置yum源

    linux yum下载_虚拟机配置yum源文章目录一.软件包管理1.RPM包管理2.源码包二.软件的安装工具1.YUM工具2.RPM工具一.软件包管理1.RPM包管理Red Hat Package Manager包的命名规则:软件名,版本号,发行版本,系统平台(32/64),后缀是.rpm**特点:**二进制包,无需编译,可以直接使用**缺点:**无法设定个人设置,开关功能2.源码包特点:需要经过gcc等编译环境编译才能运行,可以设定个人设置,开关功能缺点:配置复杂二.软件的安装工具1.YUM工具Yellow dog Upd

  • linux配置pip源_配置国内PIP源方法

    linux配置pip源_配置国内PIP源方法python开发者都知道,当我们pipinstall安装扩展库的时候,经常遇到安装失败(超时)等,有时候是因为国外镜像被屏蔽了,带来不少麻烦,随着国内python开发的增多,越来越多企业都开放了自己的pip源:#阿里云http://mirrors.aliyun.com/pypi/simple/#中国科技大学https://pypi.mirrors.ustc.edu.cn/simple/#豆瓣…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号