大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺
一.需要文件
- gapi3文件夹:存放接口等
- tilemap文件夹:存放图片
- gapi.js文件
- 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账号...