您的位置：首页 > 其它

百度地图用法封装

2015-10-21 14:03 399 查看

百度地图：各种接口地址 http://developer.baidu.com/map/jsdemo.htm

项目中实现想要的多地址功能，进行封装

<!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">
#allmap {width: 500px;height: 400px;overflow: hidden;margin:0;font-family:"微软雅黑";}
#l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;}
#r-result{height:100%;width:20%;float:left;}
</style>
<script type="text/javascript" _src="http://app.mapabc.com/apis?&t=flashmap&v=2.3.4&key=c68d4780b07cf11486dbf9ed10dad4896f0a251009454cae86977729da75c7f64d6896ee91ff7241"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js" charset="UTF-8"></script>
<link rel="stylesheet" href="http://icon.xcar.com.cn/2011newcar/css/baidu_box.css" />
</head>
<body>
<div id="allmap" style="float:left"></div>

</body>
</html>
<script type="text/javascript">
function show_map(arr){
var map;
window.mapObj=map = new BMap.Map("allmap"); //创建地图实例
//获取第一个地址来做地图的中心定位
var point = new BMap.Point(arr[0][0], arr[0][1]);//初始化地图，设置中心点坐标和地图级别
map.centerAndZoom(point,15); //多图用到的，保留
map.enableScrollWheelZoom(true); //用鼠标滚轮控制缩放开关
map.addControl(new BMap.NavigationControl()); //地图平移缩放控件
map.addControl(new BMap.OverviewMapControl()); //缩略地图控件，默认位于地图右下方，是一个可折叠的缩略地图
map.addControl(new BMap.ScaleControl()); //比例尺控件，默认位于地图左下方，显示地图的比例关系。
map.addControl(new BMap.MapTypeControl({mapTypes:[BMAP_NORMAL_MAP,BMAP_SATELLITE_MAP,BMAP_HYBRID_MAP]}));//地图类型控件

function mapInit(x, y ,coname, addr ,tel,icon) {
var info = "<br />地址："+ addr +"<br />电话：<font>"+tel+"</font>";
addMarker(x,y,coname,icon,info);
}

// 编写自定义函数,创建标注
function addMarker(zuobiao_x,zuobiao_y,coname,tag,str){
var point=new BMap.Point(zuobiao_x,zuobiao_y);
var icon = new BMap.Icon("http://icon.xcar.com.cn/2011newcar/images/sq_baidu_img/sq_baidu_sprite.png", new BMap.Size(93, 59));
var myicon={icon:icon,offset:new BMap.Size(0,-30)};
if(arr.length > 1){//一个地址显示自定义的图片
var marker=new BMap.Marker(point);
}else{ //多个地址传tag
var marker=new BMap.Marker(point,myicon);
}

var searchInfoWindow = new BMapLib.SearchInfoWindow(map, str, {
title : "<a href='http://dealer.xcar.com.cn/111' target='_blank'>"+coname+"</a>", //标题
width : 290, //宽度
panel : "panel", //检索结果面板
enableAutoPan : true, //自动平移
searchTypes :[
BMAPLIB_TAB_TO_HERE, //到这里去
BMAPLIB_TAB_SEARCH //在附近查找
]
});
marker.addEventListener("click", function(e){
searchInfoWindow.open(marker);
});
//ie6不支持png透明所以得处理一下。
var label = new BMap.Label(tag,{offset:new BMap.Size(5,1)});
label.setStyle({
color : "white",
fontSize : "10px",
height : "15px",
lineHeight : "15px",
border: '0',
'font-weight': 'bold',
background: "url() no-repeat 0 0",
fontFamily:"微软雅黑"
});
marker.setLabel(label);
map.addOverlay(marker);
return marker;
}

for (var i = 0; i < arr.length; i ++) {
mapInit(arr[i][0],arr[i][1],arr[i][2],arr[i][3],arr[i][4],arr[i][5]);
}
}

var arr = new Array();
arr[0] = new Array(106.643538,26.564753,'公司名称1','公司地址1','公司电话1','A');
arr[1] = new Array(106.642217,26.553163,'公司名称2','公司地址2','公司电话2','B');
arr[2] = new Array(106.645217,26.573163,'公司名称3','公司地址3','公司电话3','C');
arr[3] = new Array(106.647217,26.574163,'公司名称4','公司地址4','公司电话4','D');

show_map(arr);
</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航