AEAI Portal中整合百度地圖
概述
很多網站上都會有聯絡方式和地址，為了能更直觀的顯示出地址的具體位置，很多網站都在地址下面新增百度地圖，下面就為大家介紹在AEAI Portal門戶整合平臺中為網站新增百度地圖的方法。
步驟
1.開啟百度地圖生成器的網址http://api.map.baidu.com/lbsapi/createmap/index.html
2.在這裡填入您的地址，標註等，然後點選下面獲取程式碼的按鈕，把程式碼複製下來即可，這只是其中的一款模板，您也可以選擇別的模板，下面是我獲取到的程式碼。
<!DOCTYPE html>
<html>
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<metaname="viewport" content="initial-scale=1.0,user-scalable=no" />
<styletype="text/css">
body,html{width: 100%;height: 100%;margin:0;font-family:"微軟雅黑
#allmap{height: 500px;width:100%;overflow: hidden;}
#result{width:100%;font-size:12px;}
dl,dt,dd,ul,li{
margin:0;
padding:0;
list-style:none;
}
dt{
font-size:14px;
font-family:"微軟雅黑";
font-weight:bold;
border-bottom:1pxdotted #000;
padding:5px0 5px 5px;
margin:5px0;
}
dd{
padding:5px0 0 5px;
}
li{
line-height:28px;
}
<styletype="text/css">
#allmap {height: 300px;width:100%;overflow:hidden;}
#result{width:100%;font-size:12px;}
dl,dt,dd,ul,li{
margin:0;
padding:0;
list-style:none;
}
dt{
font-size:14px;
font-family:"微軟雅黑";
font-weight:bold;
border-bottom:1pxdotted #000;
padding:5px0 5px 5px;
margin:5px0;
}
dd{
padding:5px0 0 5px;
}
li{
line-height:28px;
}</style>
<script type="text/javascript"src="http://api.map.baidu.com/api從百度獲取的金鑰"></script><scripttype="text/javascript"src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script></p>
<linkhref="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css"rel="stylesheet" />
<div id="allmap">
</div>
<div id="result">
</div>
<scripttype="text/javascript">
//百度地圖API功能
var map = new BMap.Map('allmap');
var poi = new BMap.Point(123.453279,41.802502);
map.centerAndZoom(poi, 16);
map.enableScrollWheelZoom();
var content = '<divstyle="margin:0;line-height:20px;padding:2px;">' +
'<img src="/HotServer/reponsitory/images/website/photo.jpg"style="float:right;zoom:1;overflow:hidden;width:100px;height:100px;margin-left:3px;"/>'+
'地址：瀋陽市瀋河區大西路43號懷遠商務大廈11層16室<br/>電話：(024)22962011<br/>'+
'</div>';
//建立檢索資訊視窗物件
var searchInfoWindow = null;
searchInfoWindow= new BMapLib.SearchInfoWindow(map, content, {
title : "瀋陽數通暢聯軟體技術有限公司", //標題
width : 290, //寬度
height: 105, //高度
panel : "panel", //檢索結果面板
enableAutoPan: true, //自動平移
searchTypes :[
BMAPLIB_TAB_SEARCH, //周邊檢索
BMAPLIB_TAB_TO_HERE, //到這裡去
BMAPLIB_TAB_FROM_HERE//從這裡出發
]
});
var marker = new BMap.Marker(poi); //建立marker物件
marker.enableDragging(); //marker可拖拽
marker.addEventListener("click", function(e){
searchInfoWindow.open(marker);
})
map.addOverlay(marker); //在地圖中新增marker
//樣式1
varsearchInfoWindow1 = new BMapLib.SearchInfoWindow(map, "資訊框1內容", {
title:"資訊框1", //標題
panel: "panel", //檢索結果面板
enableAutoPan: true, //自動平移
searchTypes:[
BMAPLIB_TAB_FROM_HERE,//從這裡出發
BMAPLIB_TAB_SEARCH //周邊檢索
]
});
functionopenInfoWindow1() {
searchInfoWindow1.open(newBMap.Point(123.453279,41.802502));
}
//樣式2
varsearchInfoWindow2 = new BMapLib.SearchInfoWindow(map, "資訊框2內容", {
title: "資訊框2",//標題
panel: "panel", //檢索結果面板
enableAutoPan: true, //自動平移
searchTypes:[
BMAPLIB_TAB_SEARCH //周邊檢索
]
});
functionopenInfoWindow2() {
searchInfoWindow2.open(newBMap.Point(123.453279,41.802502));
}
//樣式3
varsearchInfoWindow3 = new BMapLib.SearchInfoWindow(map, "資訊框3內容", {
title:"資訊框3", //標題
width:290, //寬度
height:40, //高度
panel: "panel", //檢索結果面板
enableAutoPan: true, //自動平移
searchTypes:[
]
});
functionopenInfoWindow3() {
searchInfoWindow3.open(newBMap.Point(123.453279,41.802502));
}
</script>
</body>
</html>
3.程式碼準備好後我們就可以登入AEAI Portal門戶整合平臺頁面去設定了。登入知識中心後，點選門戶管理。
4.在門戶管理--內容管理中點選資訊採編，找到後臺中對應網站地址的模組進行編輯。
5.本文事例中的公司地址在“關於我們”的模組中，雙擊進行編輯，如下圖：
6.點選原始碼，把之前獲取程式碼中的<head>和<body>裡的內容黏貼在上面即可。
最後完成效果如下圖：
AEAI Portal中整合百度地圖文件 下載
轉載於:https://my.oschina.net/agileai/blog/375120