百度的离线地图开发。地图的标记怎么实现的？求帮助~！

章鱼骨头 2015-06-11 04:27:49

下面是js的引用，不行的。地图可以查看。但是标记出不来。求救啊。搞了一天了

var map = new BMap.Map("container",{mapType: BMAP_NORMAL_MAP}); //设置卫星图为底图
var point = new BMap.Point(121.46950,31.22643); // 创建点坐标
map.centerAndZoom(point,14); // 初始化地图,设置中心点坐标和地图级别。

//map.addControl(new BMap.MapTypeControl());
map.addControl(new BMap.NavigationControl());
map.enableScrollWheelZoom(); // 启用滚轮放大缩小。
map.enableKeyboard(); // 启用键盘操作。
map.setCurrentCity("上海"); // 设置地图显示的城市此项是必须设置的

//标注点数组
var markerArr = [{title:"目前位置",content:"我的备注",point:"121.46950"+"|"+"31.22643",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}}
];

//alert(document.cookie.split(";")[1].split("-")[0]+"|"+document.cookie.split(";")[1].split("-")[1].split("=")[0]);
//创建marker
function addMarker(){
for(var i=0;i<markerArr.length;i++){
var json = markerArr[i];
var p0 = json.point.split("|")[0];
var p1 = json.point.split("|")[1];
var point = new BMap.Point(p0,p1);
var iconImg = createIcon(json.icon);
var marker = new BMap.Marker(point,{icon:iconImg});
var iw = createInfoWindow(i);
var label = new BMap.Label(json.title,{"offset":new BMap.Size(json.icon.lb-json.icon.x+10,-20)});
alert(label);
marker.setLabel(label);
map.addOverlay(marker);
label.setStyle({
borderColor:"#808080",
color:"#333",
cursor:"pointer"
});

(function(){
alert("createInfoWindow");
var index = i;
var _iw = createInfoWindow(i);
var _marker = marker;
_marker.addEventListener("click",function(){
_marker.openInfoWindow(_iw);
});
_iw.addEventListener("open",function(){
_marker.getLabel().hide();
})
_iw.addEventListener("close",function(){
_marker.getLabel().show();
})
label.addEventListener("click",function(){
_marker.openInfoWindow(_iw);
})
alert(!!json.isOpen);
if(!!json.isOpen){

label.hide();
_marker.openInfoWindow(_iw);
}
})()
}

}
//创建InfoWindow
function createInfoWindow(i){
var json = markerArr[i];
var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>"+json.content+"</div>");
return iw;
}

//创建一个Icon
function createIcon(json){
var icon = new BMap.Icon("images/us_mk_icon.png", new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)})
return icon;
}

...全文

1243 18 打赏收藏转发到动态举报

写回复

用AI写文章

18 条回复

切换为时间正序

请发表友善的回复…

发表回复

开心超人萌萌哒 2017-04-10

打赏
举报

为什么我下载的是一个工具有没有离线包和相应的代码呢

javascript_net 2016-10-08

打赏
举报

这里有详细实现离线地图的方案 http://api.jjszd.com:8081/apituiguang/gistg.html

JING00XIAOYUEYUE 2016-05-20

打赏
举报

现在出来了嘛？？怎么做的？我也在找这样的东西

javascript_net 2015-12-11

打赏
举报

http://api.jjszd.com:8081/apituiguang/gistg.html 可看下这个解决方案！！！

章鱼骨头 2015-06-23

打赏
举报

顶。求帮助！！！

留校_察看 2015-06-23

打赏
举报

百度没离线地图这一说法，除非安卓或爱疯的地图应用有离线地图数据包。WEB应用必须连接百度服务器

香蕉猪 2015-06-12

打赏
举报

引用 11 楼 Su243483634 的回复:

恩。我改改百度的那个JS文件试看看。

耐心，细心，祝楼主成功。

章鱼骨头 2015-06-12

打赏
举报

引用 10 楼 gy127132060 的回复:

[quote=引用 9 楼 Su243483634 的回复:] 就是离线导致的啦。引入百度的js文件，但是里面很多要关联到百度服务那边的，改了，也不行。估计改错了。你那有改过后的吗？

一年多前处理的东西了，，，都离开之前的公司了。。。现在手上没有改好的代码。。。[/quote] 恩。我改改百度的那个JS文件试看看。

香蕉猪 2015-06-12

打赏
举报

引用 9 楼 Su243483634 的回复:

就是离线导致的啦。引入百度的js文件，但是里面很多要关联到百度服务那边的，改了，也不行。估计改错了。你那有改过后的吗？

一年多前处理的东西了，，，都离开之前的公司了。。。现在手上没有改好的代码。。。

章鱼骨头 2015-06-12

打赏
举报

引用 8 楼 gy127132060 的回复:

[quote=引用 7 楼 Su243483634 的回复:] 有跟你一样。弄这个。但是不行的。我昨天就弄了，跟你一样的思路！百度提供的js文件，太多了。改不来。有什么更好的意见吗？

引用 8 楼 gy127132060 的回复:

[quote=引用 7 楼 Su243483634 的回复:] 有跟你一样。弄这个。但是不行的。我昨天就弄了，跟你一样的思路！百度提供的js文件，太多了。改不来。有什么更好的意见吗？

楼主有没有试过在线地图（http://developer.baidu.com/map/jsdemo.htm#i1_1）能不能正常获取到百度的标记呢？？？楼主既然弄了个一样思路的，，，我想知道，，，到底是标记出了问题还是离线导致的问题。。。 1、若在线能正常得到标记，离线不可----离线导致问题 2、若在线也无法得到标记----标记写错了[/quote] 就是离线导致的啦。引入百度的js文件，但是里面很多要关联到百度服务那边的，改了，也不行。估计改错了。你那有改过后的吗？

香蕉猪 2015-06-12

打赏
举报

引用 7 楼 Su243483634 的回复:

有跟你一样。弄这个。但是不行的。我昨天就弄了，跟你一样的思路！百度提供的js文件，太多了。改不来。有什么更好的意见吗？

章鱼骨头 2015-06-12

打赏
举报

引用 6 楼 gy127132060 的回复:

[quote=引用 5 楼 Su243483634 的回复:] 先简单的小地图就可以了。

看这里。。。


var point = new BMap.Point(116.417854,39.921988);
var marker = new BMap.Marker(point);  // 创建标注
map.addOverlay(marker);              // 将标注添加到地图中

若楼主的离线地图，，，能获取到相关的经纬度。。。BMap.Point 那么，，，楼主完全可以像百度API中那样，调用百度自身的BMap.Marker，，，创建标注[/quote] 有跟你一样。弄这个。但是不行的。我昨天就弄了，跟你一样的思路！百度提供的js文件，太多了。改不来。有什么更好的意见吗？

香蕉猪 2015-06-12

打赏
举报

引用 5 楼 Su243483634 的回复:

先简单的小地图就可以了。

看这里。。。


var point = new BMap.Point(116.417854,39.921988);
var marker = new BMap.Marker(point);  // 创建标注
map.addOverlay(marker);              // 将标注添加到地图中

若楼主的离线地图，，，能获取到相关的经纬度。。。BMap.Point 那么，，，楼主完全可以像百度API中那样，调用百度自身的BMap.Marker，，，创建标注

章鱼骨头 2015-06-12

打赏
举报

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";} #allmap{width:100%;height:500px;} p{margin-left:5px; font-size:14px;} </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> <title>纯文本的信息窗口</title> </head> <body> <div id="allmap"></div> <p>点击标注点，可查看由纯文本构成的简单型信息窗口</p> </body> </html> <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("allmap"); var point = new BMap.Point(116.417854,39.921988); var marker = new BMap.Marker(point); // 创建标注 map.addOverlay(marker); // 将标注添加到地图中 map.centerAndZoom(point, 15); var opts = { width : 200, // 信息窗口宽度 height: 100, // 信息窗口高度 title : "海底捞王府井店" , // 信息窗口标题 enableMessage:true,//设置允许信息窗发送短息 message:"亲耐滴，晚上一起吃个饭吧？戳下面的链接看下地址喔~" } var infoWindow = new BMap.InfoWindow("地址：北京市东城区王府井大街88号乐天银泰百货八层", opts); // 创建信息窗口对象 marker.addEventListener("click", function(){ map.openInfoWindow(infoWindow,point); //开启信息窗口 }); </script>

引用 4 楼 gy127132060 的回复: