百度地图封装的JS函数
很多年前做的,刚才维护一个很老的项目突然看到的 lol,特地单独摘出来拿到博客里做备份
把下面内容保存成js文件,然后就可以在你的项目中使用啦,当然别忘记引入百度地图的api啊,效果图
核心文件
//MAP_CONTAINER, INPUT_address, INPUT_lng, INPUT_lat, INPUT_zoom, INPUT_title, INPUT_img, INPUT_summary, OPEN_infowindow
/*
* render Single Marker On the Map
*/
var renderBaiduMap = function(MAP_CONTAINER, INPUT_address, INPUT_lng, INPUT_lat, INPUT_zoom){
$container = MAP_CONTAINER;
$address = INPUT_address;
$lng = INPUT_lng;
$lat = INPUT_lat;
$zoom = INPUT_zoom;
if(arguments[5]) var $infoWindow = 1;
var $title = arguments[5] ? arguments[5] : '';
var $img = arguments[6] ? arguments[6] : '';
var $summary = arguments[7] ? arguments[7] : '';
var $open = arguments[8] ? arguments[8] : 0;
if(!$container || !document.getElementById($container))
{
alert('Map Container does not exists!');
return false;
}
if(!$address && !($lng && $lat))
{
alert('Address and lng,lat invalid!');
return false;
}
if(!$zoom) $zoom = 12;
var map = new BMap.Map($container);
//Hybrid switch
var mapType1 = new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]});
map.addControl(mapType1);
/**
* 添加放大缩小控件
*/
map.enableScrollWheelZoom();//启动鼠标滚轮缩放地图
var opts = {type: BMAP_NAVIGATION_CONTROL_ZOOM }
map.addControl(new BMap.NavigationControl(opts));
//lng and lat first
if($lng && $lat)
{
var point = new BMap.Point($lng,$lat);
map.centerAndZoom(point,$zoom);
maker = new BMap.Marker(point);
map.addOverlay(maker);
//maker info
if($infoWindow == 1)
{
var $Content =
"<h4 style='margin:0 0 5px 0;padding:0.2em 0'>"+ $title +"</h4>";
if($img) $Content += "<img style='float:right;margin:4px' id='infoImg' src='"+ $img +"' width='120' height='100' title='"+ $title +"'/>";
if($summary) $Content +="<p style='margin:0;line-height:1.5;font-size:13px;'>"+ $summary +"</p>" +
"</div>";
var infoWindow = new BMap.InfoWindow($Content); // 创建信息窗口对象
/**
* 默认打开信息窗口
*/
if($open == 1)
{
maker.openInfoWindow(infoWindow);
//图片加载完毕重绘infowindow
infoWindow.redraw(); //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片
}
/**
* 点击打开信息窗口
*/
maker.addEventListener("click", function(){
this.openInfoWindow(infoWindow);
//图片加载完毕重绘infowindow
if(document.getElementById('infoImg'))
{
document.getElementById('infoImg').onload = function (){
infoWindow.redraw(); //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
}
}
});
}
//copy right
/*
var cr = new BMap.CopyrightControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT}); //设置版权控件位置
map.addControl(cr); //添加版权控件
var bs = map.getBounds(); //返回地图可视区域
cr.addCopyright({id: 1, content: "<a href='#' style='font-size:20px;background:yellow'>我是自定义版权控件呀我是自定义版权控件呀</a>", bounds: bs});
//Copyright(id,content,bounds)类作为CopyrightControl.addCopyright()方法的参数
*/
}
//address
else
{
//by address
if($address)
{
//console.log($address);
var myGeo = new BMap.Geocoder();
// 将地址解析结果显示在地图上,并调整地图视野
myGeo.getPoint($address, function(point){
if (point) {
map.centerAndZoom(point, $zoom);
maker = new BMap.Marker(point);
map.addOverlay(maker);
//maker info
if($infoWindow == 1)
{
var $Content =
"<h4 style='margin:0 0 5px 0;padding:0.2em 0'>"+ $title +"</h4>";
if($img) $Content += "<img style='float:right;margin:4px' id='infoImg' src='"+ $img +"' width='120' height='100' title='"+ $title +"'/>";
if($summary) $Content +="<p style='margin:0;line-height:1.5;font-size:13px;'>"+ $summary +"</p>" +
"</div>";
var infoWindow = new BMap.InfoWindow($Content); // 创建信息窗口对象
/**
* 默认打开信息窗口
*/
if($open == 1)
{
maker.openInfoWindow(infoWindow);
//图片加载完毕重绘infowindow
infoWindow.redraw(); //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片
}
/**
* 点击打开信息窗口
*/
maker.addEventListener("click", function(){
this.openInfoWindow(infoWindow);
//图片加载完毕重绘infowindow
if(document.getElementById('infoImg'))
{
document.getElementById('infoImg').onload = function (){
infoWindow.redraw(); //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
}
}
});
}
}
});
}
//end by address
else
{
return false;
}
}
}
/*
* render Multiple Marker On the Map
*/
//load map for add multiple marker
var loadBaiduMap = function(MAP_CONTAINER, INPUT_address, INPUT_lng, INPUT_lat, INPUT_zoom, INPUT_maptype){
var $container = MAP_CONTAINER;
var $address = INPUT_address;
var $lng = INPUT_lng;
var $lat = INPUT_lat;
var $zoom = arguments[4] ? arguments[4] : 12;
var INPUT_maptype = arguments[5] ? arguments[5] : 1;
/**
* 1 = BMAP_NORMAL_MAP //此地图类型展示普通街道视图。
* 2 = BMAP_HYBRID_MAP //此地图类型展示卫星和路网的混合视图。(自 1.2 新增)
* 3 = BMAP_SATELLITE_MAP //此地图类型展示卫星视图。(自 1.2 新增)。
*/
switch(INPUT_maptype)
{
case 1:
$maptype = BMAP_NORMAL_MAP;
break;
case 2:
$maptype = BMAP_HYBRID_MAP;
break;
case 3:
$maptype = BMAP_SATELLITE_MAP;
break;
default:
$maptype = BMAP_NORMAL_MAP;
break;
}
//console.log($maptype);
if(!document.getElementById($container)) return false;
// 创建全局Map实例
window.mapMarkers = new BMap.Map($container,{mapType: $maptype});
map = window.mapMarkers;
var mapType1 = new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]});
map.addControl(mapType1); //2D图，卫星图
map.enableScrollWheelZoom();//启动鼠标滚轮缩放地图
var opts = {type: BMAP_NAVIGATION_CONTROL_ZOOM }
map.addControl(new BMap.NavigationControl(opts));
if($lng && $lat)
{
var point = new BMap.Point($lng,$lat);
map.centerAndZoom(point, $zoom);
}
else
{
if($address)
{
//console.log($address);
var myGeo = new BMap.Geocoder();
// 将地址解析结果显示在地图上,并调整地图视野
myGeo.getPoint($address, function(point){
if (point) {
map.centerAndZoom(point, $zoom);
}
});
}
}
}
//add marker to map
var renderBaiduMapMaker = function(MAP_CONTAINER, INPUT_lng, INPUT_lat, INPUT_title, INPUT_img, INPUT_summary, INPUT_open)
{
var $container = MAP_CONTAINER;
var $lng = INPUT_lng;
var $lat = INPUT_lat;
var $title = arguments[3] ? arguments[3] : '';
var $img = arguments[4] ? arguments[4] : '';
var $summary = arguments[5] ? arguments[5] : '';
var $open = arguments[6] ? arguments[6] : 0;
if(!document.getElementById($container)) return false;
// 百度地图API功能
/*
* 初始化地图
*/
map = window.mapMarkers;
//map.centerAndZoom("中国",9); // 初始化地图,用城市名设置地图中心点
addMarker($lng,$lat);
// 编写自定义函数,创建标注
/*
* 生成标注核心函数
*/
function addMarker(lng,lat){
var point = new BMap.Point(lng,lat);
//map.centerAndZoom(point, $zoom);
var marker = new BMap.Marker(point);
map.addOverlay(marker);
//open infoWindow
if($title)
{
var $Content =
"<h4 style='margin:0 0 5px 0;padding:0.2em 0'>"+ $title +"</h4>";
if($img) $Content += "<img style='float:right;margin:4px' id='infoImg' src='"+ $img +"' width='120' height='100' title='"+ $title +"'/>";
if($summary) $Content +="<p style='margin:0;line-height:1.5;font-size:13px;'>"+ $summary +"</p>" +
"</div>";
var infoWindow = new BMap.InfoWindow($Content); // 创建信息窗口对象
/**
* 默认打开信息窗口
*/
if($open == 1)
{
marker.openInfoWindow(infoWindow);
//图片加载完毕重绘infowindow
infoWindow.redraw(); //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片
}
/**
* 点击打开信息窗口
*/
marker.addEventListener("click", function(){
this.openInfoWindow(infoWindow);
//图片加载完毕重绘infowindow
if(document.getElementById('infoImg'))
{
document.getElementById('infoImg').onload = function (){
infoWindow.redraw(); //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
}
}
});
}
}
}使用方法
window.onload = function() {
loadBaiduMap('allmap','上海市','','',10,1);
renderBaiduMapMaker('allmap',116.331398,39.897445,'title1','http://app.baidu.com/map/images/tiananmen.jpg','hello world');
renderBaiduMapMaker('allmap',116.360575,39.997011,'title2','','中文测试中文测试中文测试中文测试中文测试');
renderBaiduMapMaker('allmap',116.551447,39.929322,'title3','http://app.baidu.com/map/images/tiananmen.jpg','hello world');
renderBaiduMapMaker('allmap',116.799811,40.056239,'title4','http://app.baidu.com/map/images/tiananmen.jpg','hello world');
}函数说明
loadBaiduMap是初始化百度地图控件,后面通过renderBaiduMapMaker函数来添加覆盖物,至于第一个函数renderBaiduMap好像没啥用了,具体里面也写了不少注释,自己看吧