帝国CMS想要添加百度地图标注怎么开发

本文介绍了帝国CMS想要添加百度地图标注怎么开发，解决思路：先在系统模版新建字段 diduan 地段后面该打的全部打勾，然后到管理模板变量，

增加模板变量，变量名：[!--temp.ditu--] 变量标识:百度地图标注，最后在变量值加入教程给出的代码就可以了。

帝国百度地图标注实现教程：

1.先在系统模版新建字段 diduan 地段后面该打的全部打勾

2.到管理模板变量增加模板变量变量名：[!--temp.ditu--] 变量标识:百度地图标注

3.变量值加入以下代码

<!doctype html>

<html>

<head>

<!--[if IE 6]>

<![endif]-->

<style>

#preview{

border: 1px solid #bfd2e1;

width: 250px;

height: 250px;

font-family: Arial, Helvetica, sans-serif,"宋体";

}

#map_container{

height: 250px;

}

#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>

<span>点击地图或标注获取坐标</span>

</div>

</div>

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) : "[!--diduan--]",

city = para.city?decodeURIComponent(para.city) : "[!--diqu--]";

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>

4.到需要加入地图的内容模版加入代码：[!--temp.ditu--]

这样就介绍完了，有此需要的朋友参考着修改看看吧。

标签：

帝国CMS想要添加百度地图标注怎么开发

本文链接：http://78moban.cn/post/15433.html

上一篇：帝国CMS想要实现PC端跳转手机端怎么开发

下一篇：帝国CMS想要留言板使用调用标签怎么开发

帝国CMS想要添加百度地图标注怎么开发

robot