帝國cms用百度地圖自動標注方法的教程--小明網(wǎng)站收錄

1.先在系統(tǒng)模版新建字段 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>

<button id="search_button">查找</button>

<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 : 定義得到標注經(jīng)緯度后的操作

* 請修改此函數(shù)以滿足您的需求

* lng: 標注的經(jīng)度

* lat: 標注的緯度

function setResult(lng, lat){

document.getElementById("result").innerHTML = lng + ", " + lat;

}

</script>

</body>

</html>

4.到需要加入地圖的內容模版加入代碼：[!--temp.ditu--]

此文由網(wǎng)站目錄_網(wǎng)站網(wǎng)址收錄與提交入口編輯，未經(jīng)允許不得轉載！：

国产欧美二区三区-国产欧美高清-国产欧美国产精品第二区-国产欧美国产精品第一区-小说区图片区-小说区综合区都市激情

網(wǎng)站目錄_網(wǎng)站網(wǎng)址收錄與提交入口

帝國cms用百度地圖自動標注方法的教程

相關文章

国产欧美二区三区-国产欧美高清-国产欧美国产精品第二区-国产欧美国产精品第一区-小说区 图片区-小说区 综合区 都市激情

相關文章

国产欧美二区三区-国产欧美高清-国产欧美国产精品第二区-国产欧美国产精品第一区-小说区图片区-小说区综合区都市激情