这篇文章主要介绍了javascript 开发之百度地图使用到的js函数整理的相关资料,需要的朋友可以参考下
javascript 开发之百度地图使用到的js函数整理
接项目用到的地图，客户要求用百度地图，没办法只好用百度地图，这里总结一下，写的一些函数，注释比较详细！
//创建和初始化地图函数：
function initmap(){
createmap();//创建地图
setmapevent();//设置地图事件
addmapcontrol();//向地图添加控件
addmarker();//向地图中添加marker
}
//创建地图函数：
function createmap(){
var map = new bmap.map("container");//在百度地图容器中创建一个地图
var point = new bmap.point(116.395645,39.929986);//定义一个中心点坐标
map.centerandzoom(point,12);//设定地图的中心点和坐标并将地图显示在地图容器中
window.map = map;//将map变量存储在全局
}
//地图事件设置函数：
function setmapevent(){
map.enabledragging();//启用地图拖拽事件，默认启用(可不写)
map.enablescrollwheelzoom();//启用地图滚轮放大缩小
map.enabledoubleclickzoom();//启用鼠标双击放大，默认启用(可不写)
map.enablekeyboard();//启用键盘上下左右键移动地图
}
//地图控件添加函数：
function addmapcontrol(){
//向地图中添加缩放控件
var ctrl_nav = new bmap.navigationcontrol({anchor:bmap_anchor_top_left,type:bmap_navigation_control_large});
map.addcontrol(ctrl_nav);
//向地图中添加缩略图控件
var ctrl_ove = new bmap.overviewmapcontrol({anchor:bmap_anchor_bottom_right,isopen:1});
map.addcontrol(ctrl_ove);
//向地图中添加比例尺控件
var ctrl_sca = new bmap.scalecontrol({anchor:bmap_anchor_bottom_left});
map.addcontrol(ctrl_sca);
}
//标注点数组
var markerarr = [{title:"我的标记",content:"我的备注",point:"116.354539|39.970253",isopen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}}
];
//创建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)});
marker.setlabel(label);
map.addoverlay(marker);
label.setstyle({
bordercolor:"#808080",
color:"#333",
cursor:"pointer"
});
(function(){
var index = i;
var _iw = createinfowindow(i);
var _marker = marker;
_marker.addeventlistener("click",function(){
this.openinfowindow(_iw);
});
_iw.addeventlistener("open",function(){
_marker.getlabel().hide();
})
_iw.addeventlistener("close",function(){
_marker.getlabel().show();
})
label.addeventlistener("click",function(){
_marker.openinfowindow(_iw);
})
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><p class='iw_poi_content'>"+json.content+"</p>");
return iw;
}
//创建一个icon
function createicon(json){
var icon = new bmap.icon("http://openapi.baidu.com/map/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;
}
initmap();//创建和初始化地图
【相关推荐】
1. javacript免费视频教程
2. javascript解决汉字转拼音的实例详解
3. 分享15个常用的js正则表达式
4. 通过javascript实现搜索工具栏的实例详解
5. javascript中关于async以及awai的用法具体介绍
以上就是js开发用到百度地图的代码整理的详细内容。