织梦网站经常用于搭建企业网站,而企业网站需要放置公司的联系方式,一个百度地图模块必不可少,大伟分享下自己常用的百度地图代码。

<style>#allmap{width:1200px;height:400px;margin-top:30px;}#allmap img{width:39px;max-width:39px;}</style>
<div id="allmap"></div>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=填写AK"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />

<script type="text/javascript">
	var map = new BMap.Map("allmap");
	var point = new BMap.Point(116.403694,39.916927);//坐标
	var marker = new BMap.Marker(point);  // 创建标注
	marker.enableDragging(); //marker可拖拽
	 marker.addEventListener("click", function(e){
	    searchInfoWindow.open(marker);
    })
	var company = '公司名称';
	var address = '联系地址';
	var content = '<div style="margin:0;line-height:20px;padding:2px;">' +
                    //'<img src="../img/baidu.jpg" alt="" style="float:right;zoom:1;overflow:hidden;width:100px;height:100px;margin-left:3px;"/>' +
                    '地址:-'+address+
                  '-</div>';
    //创建检索信息窗口对象
    var searchInfoWindow = null;
	searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
			title  : company, //标题
			width  : 290, //宽度
			height : 105, //高度
			panel  : "panel",  //检索结果面板
			enableAutoPan : true, //自动平移
			searchTypes   :[
				BMAPLIB_TAB_SEARCH, //周边检索
				BMAPLIB_TAB_TO_HERE, //到这里去
				BMAPLIB_TAB_FROM_HERE //从这里出发
			]
		});
	
	var searchInfoWindow1 = new BMapLib.SearchInfoWindow(map, "信息框1内容", {
		title: "信息框1", //标题
		panel : "panel", //检索结果面板
		enableAutoPan : true, //自动平移
		searchTypes :[
			BMAPLIB_TAB_FROM_HERE, //从这里出发
			BMAPLIB_TAB_SEARCH   //周边检索
		]
	});
	map.addOverlay(marker); // 将标注添加到地图中
	marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
	map.centerAndZoom(point, 15); //地图缩放比列
</script>

上面代码可以直接复制使用,效果是跳动的坐标,点击后显示坐标详情,也可以在详情中添加自定义图片,上面代码中注释了图片代码。

注意:

1. 百度地图api的ak要自己申请,流程本篇不表,可自行搜索,申请后填写自己的ak;

2. 坐标也要改为相应的标度坐标,搜索“百度地图坐标拾取”;

3. 公司名称和联系地址修改成自己的;

4. 其他地图设置和css可酌情修改。