第一步，確定一個放具體地址的字段，可以新建立一個地段如address，具體是在系統>>管理數據表里面可以添加自定義字段 ，我是用帝國本身空余下來的字段ftitle，也就是副標題，這個字段我沒有派送用場，空在那里就利用起來吧：
第二步，建立一個新的模板變量，變量名自定義，我的變量名：[!--temp.ditu--] 變量標識:百度地圖
接下來在模板變量中加入下面的代碼：
<!doctype html>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=uft-8″>
<title>百度地圖坐標采集</title>
<!–[if IE 6]>
<script type=”text/javascript” src=”http://dev.baidu.com/wiki/static/map/tuan/js/DD_belatedPNG_0.0.8a-min.js”></script>
<script>DD_belatedPNG.fix(“#float_search_bar”);</script>
<![endif]–>
<style>
#preview{
border: 1px solid #bfd2e1;
width: 300px;
height: 300px;
font-family: Arial, Helvetica, sans-serif,”宋體”;
}
#map_container{
height: 300px;
}
#float_search_bar{
z-index: 2012;
position: absolute;
width: 180px;
height: 31px;
background: url(“http://dev.baidu.com/wiki/static/map/tuan/images/search_bar.png”) repeat-x;
background-position: 0 -21px;
padding: 3px 0 0 10px;
}
#float_search_bar label, #float_search_bar span{
color: #0787cb;
font-size: 14px;
}
#float_search_bar input{
width: 180px;
height: 16px;
margin-top: 1px;
}
#float_search_bar input:focus{
outline: none;
}
#float_search_bar button{
border: 0;
color: white;
width: 77px;
height: 20px;
background: url(“http://dev.baidu.com/wiki/static/map/tuan/images/search_bar.png”) no-repeat;
background-position: 0 0;
margin-right: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div id=”preview”>
<div id=”float_search_bar”>
<label>區域：</label>
<input type=”text” id=”keyword” />
<button id=”search_button”>查找</button>
<span>點擊地圖或標注獲取坐標</span>
</div>
<div id=”map_container”></div>
</div>
<div id=”result” style=”margin-top: 4px;”></div>
<script type=”text/javascript” src=”http://api.map.baidu.com/api?v=1.2″></script>
<script type=”text/javascript”>
function getUrlParas(){
var hash = location.hash,
para = {},
tParas = hash.substr(1).split(“&”);
for(var p in tParas){
if(tParas.hasOwnProperty(p)){
var obj = tParas[p].split(“=”);
para[obj[0]] = obj[1];
}
}
return para;
}
var para = getUrlParas(),
center = para.address?decodeURIComponent(para.address) : “[!--ftitle--]“,
city = para.city?decodeURIComponent(para.city) : “[!--city--]“;
document.getElementById(“keyword”).value = center;
var marker_trick = false;
var map = new BMap.Map(“map_container”);
map.enableScrollWheelZoom();
var marker = new BMap.Marker(new BMap.Point(116.404, 39.915), {
enableMassClear: false,
raiseOnDrag: true
});
marker.enableDragging();
map.addOverlay(marker);
map.addEventListener(“click”, function(e){
if(!(e.overlay)){
map.clearOverlays();
marker.show();
marker.setPosition(e.point);
setResult(e.point.lng, e.point.lat);
}
});
marker.addEventListener(“dragend”, function(e){
setResult(e.point.lng, e.point.lat);
});
var local = new BMap.LocalSearch(map, {
renderOptions:{map: map},
pageCapacity: 1
});
local.setSearchCompleteCallback(function(results){
if(local.getStatus() !== BMAP_STATUS_SUCCESS){
alert(“沒有獲取到數據”);
} else {
marker.hide();
}
});
local.setMarkersSetCallback(function(pois){
for(var i=pois.length; i–; ){
var marker = pois[i].marker;
marker.addEventListener(“click”, function(e){
marker_trick = true;
var pos = this.getPosition();
setResult(pos.lng, pos.lat);
});
}
});
window.onload = function(){
local.search(center);
document.getElementById(“search_button”).onclick = function(){
local.search(document.getElementById(“keyword”).value);
};
document.getElementById(“keyword”).onkeyup = function(e){
var me = this;
e = e || window.event;
var keycode = e.keyCode;
if(keycode === 9){
local.search(document.getElementById(“keyword”).value);
}
};
};
function a(){
document.getElementById(“float_search_bar”).style.display = “none”;
}
a();
/*
* setResult : 定義得到標注經緯度后的操作
* 請修改此函數以滿足您的需求
* lng: 標注的經度
* lat: 標注的緯度
*/
function setResult(lng, lat){
document.getElementById(“result”).innerHTML = lng + “, ” + lat;
}
</script>
</body>
</html>
需要修改的地方已經用紅色標注，注意查看
以上代碼是一個完整的html代碼，實際應用中您可以把head中的內容提取出來，放到內容頁面模板的head中，然后去掉head body html這些標簽即可。
更多信息請查看IT技術專欄
版權所有:易賢網
公眾號
事業單位
當前位置：
公考類
招聘類
各類考試