<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>百度离线版DEMO</title>
<script type="text/javascript" src="js/apiv1.3.min.js"></script>
<!--script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script-->
<link rel="stylesheet" type="text/css" href="bmap.css"/>
</head>
<body>
<div style="width:80%;height:80%;border:1px solid gray;position:absolute;" id="container"></div>
<div id="position" style="width:80%;height:10%;border:1px solid gray;position:absolute;background-color:#cacfd2; margin-top:517px;">
</div>
</body>
</html>
<script type="text/javascript">
var mapOptions = {
//minZoom: 12, 地图最小层级
mapType: BMAP_NORMAL_MAP
}
var map = new BMap.Map("container", mapOptions); //设置卫星图为底图BMAP_PERSPECTIVE_MAP
var initPoint = new BMap.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(initPoint,5); // 初始化地图,设置中心点坐标和地图级别。
map.enableScrollWheelZoom(); // 启用滚轮放大缩小。
map.enableKeyboard(); // 启用键盘操作。
map.enableContinuousZoom(); //启用连续缩放效果
// ----- control -----
map.addControl(new BMap.NavigationControl()); //地图平移缩放控件
map.addControl(new BMap.ScaleControl()); //显示比例尺在右下角
map.addControl(new BMap.OverviewMapControl({anchor: BMAP_ANCHOR_TOP_RIGHT, isOpen: true})); //缩略图控件
// ----- menu -----
var contextMenu = new BMap.ContextMenu();
var txtMenuItem = [
{
text:'在此处添加模拟器',
callback:function(p){
addSimulatorMarker(p);
}
},
{
text:'在此处添加训练仓',
callback:function(p){
addCabinMarker(p);
}
}
];
for(var i=0; i < txtMenuItem.length; i++){
contextMenu.addItem(new BMap.MenuItem(txtMenuItem[i].text,txtMenuItem[i].callback,100));
if(i==0) {
contextMenu.addSeparator();
}
}
map.addContextMenu(contextMenu);
// ----- maker -----
addCabinMarker(initPoint);
var simulatorContent = "<h4 style='margin:0 0 5px 0;padding:0.2em 0'>信号模拟器</h4>" +
"<img style='float:right;margin:4px' id='simulatorImg' src='images/simulator.jpg' width='139' height='104' title='天安门'/>" +
"<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>针对基本型和授时型用户设备的测试需求,该类型模拟器面向全球卫星导航系统提供单星座导航信号仿真,可以仿真的卫星星座包括GPS、[2]、GALILEO、GLONASS等,可以应用在基本型和授时型用户设备的研制、开发、生产和测试过程的各个环节.</p>" +
"</div>";
var simulatorInfoWindow = new BMap.InfoWindow(simulatorContent);
var simulatorIndex = 1;
var cabinIndex = 1;
function addSimulatorMarker(point) {
var simulatorIcon = new BMap.Icon("images/simulator.png", new BMap.Size(32, 37));
// 创建标注对象并添加到地图
var simulatorMarkerOptions = {
icon: simulatorIcon,
enableDragging: true,
//raiseOnDrag: true, 跳动的效果
draggingCursor: "move",
title: "模拟器"
}
var simulatorMarker = new BMap.Marker(point, simulatorMarkerOptions);
simulatorMarker.setAnimation(BMAP_ANIMATION_DROP);
var simulatorLabel = new BMap.Label("模拟器-" + simulatorIndex, {offset: new BMap.Size(-7,-18)});
simulatorMarker.setLabel(simulatorLabel);
simulatorIndex ++;
map.addOverlay(simulatorMarker);
//为标注添加点击事件——弹出信息窗口
simulatorMarker.addEventListener("dblclick", function(){
this.openInfoWindow(simulatorInfoWindow);
//图片加载完毕重绘infowindow
document.getElementById('simulatorImg').onload = function (){
infoWindow.redraw(); //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
}
});
simulatorMarker.addEventListener("dragging", function(e) {
document.getElementById("position").innerHTML = "坐标像素——x :" + e.pixel.x + " y :" + e.pixel.y + "<br>坐标经纬度——经度: " + e.point.lng + " 纬度: " + e.point.lat;
});
}
function addCabinMarker(point) {
var cabinIcon = new BMap.Icon("images/cabin.png", new BMap.Size(32, 37));
var cabinMarkerOptions = {
icon: cabinIcon,
enableDragging: true,
draggingCursor: "move",
title: "训练仓"
}
var cabinMarker = new BMap.Marker(point, cabinMarkerOptions);
cabinMarker.setAnimation(BMAP_ANIMATION_DROP);
map.addOverlay(cabinMarker);
cabinMarker.addEventListener("dragging", function(e) {
document.getElementById("position").innerHTML = "坐标像素——x :" + e.pixel.x + " y :" + e.pixel.y + "<br>坐标经纬度——经度: " + e.point.lng + " 纬度: " + e.point.lat;
});
}
</script>
百度地图离线版js web 端离线开发
5星 · 超过95%的资源 需积分: 8 68 浏览量
2017-09-12
10:09:47
上传
评论
收藏 1.31MB ZIP 举报 
百度地图离线版js web 端离线开发 （224个子文件） 
bmap.css 8KB closedhand.cur 326B openhand.cur 326B
mapctrls1d3.gif 899B iw_close1d3.gif 73B iw_plus1d3.gif 59B blank.gif 49B
demo.html 5KB
simulator.jpg 77KB 0.jpg 24KB 1.jpg 21KB 3.jpg 21KB 4.jpg 18KB 7.jpg 17KB 3.jpg 17KB 8.jpg 16KB 1.jpg 15KB 6.jpg 15KB 6.jpg 15KB 2.jpg 15KB 6.jpg 14KB 1.jpg 14KB 7.jpg 13KB 5.jpg 13KB 6.jpg 13KB 7.jpg 13KB 5.jpg 13KB 9.jpg 12KB 5.jpg 12KB 4.jpg 12KB 9.jpg 12KB 2.jpg 12KB 2.jpg 12KB 2.jpg 12KB 8.jpg 12KB 5.jpg 11KB 2.jpg 11KB 8.jpg 11KB 5.jpg 11KB 3.jpg 11KB 4.jpg 10KB 1.jpg 10KB 10.jpg 10KB 9.jpg 10KB 8.jpg 10KB 7.jpg 10KB 5.jpg 9KB 8.jpg 9KB 2.jpg 9KB 4.jpg 9KB 4.jpg 9KB 3.jpg 8KB 10.jpg 8KB 4.jpg 8KB 4.jpg 8KB 7.jpg 8KB 6.jpg 8KB 9.jpg 8KB 1.jpg 8KB 5.jpg 8KB 2.jpg 7KB 6.jpg 7KB 2.jpg 7KB 7.jpg 7KB 11.jpg 7KB 5.jpg 7KB 7.jpg 7KB 6.jpg 7KB 3.jpg 7KB 3.jpg 6KB 1.jpg 6KB 4.jpg 6KB 10.jpg 6KB 2.jpg 6KB 1.jpg 6KB 1.jpg 6KB 3.jpg 6KB 5.jpg 6KB 0.jpg 6KB 7.jpg 6KB 6.jpg 5KB 8.jpg 5KB 0.jpg 5KB 9.jpg 5KB 6.jpg 5KB 2.jpg 5KB 11.jpg 5KB 10.jpg 5KB 8.jpg 5KB 4.jpg 5KB 2.jpg 5KB 5.jpg 5KB 4.jpg 5KB 3.jpg 5KB 9.jpg 5KB 3.jpg 5KB 6.jpg 5KB 3.jpg 5KB 7.jpg 5KB 11.jpg 5KB共 224 条
- 1
- 2
- 3
资源评论
lfw135215565282017-11-01没点到 再点一次
levy-snail2017-09-18感谢楼主分享 但是离线地图只是全国的简要图 放大的时候 会没有进一步的瓦片信息
寒山空明月2017-10-25没点到 再点一次
qq_32738917
- 粉丝: 0
- 资源: 9
