提示：使用的是百度地圖api，php框架使用的是ThinkPHP3.2 。
php方法：
function getmaparr(){
$M = new Model();
$gg = "isOpen:0,icon:{w:21,h:26}";
$points = $M->table("egov_map as m,egov_map_data as md")->field("m.Title as title,md.Content as content,md.Pointer as point")->where("m.id=md.id")->select();
return $points;
}html頁面
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap {width: 100%;overflow: hidden;}
#l-map{width:78%;float:left;border-right:2px solid #bcbcbc;}
#r-result{width:20%;float:left;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=F46ad8f2db8824ae4fbb8f7148dc9943"></script>
<title>檢索用戶靜態數據</title>
</head>
<body>
<div id="map"></div>
</body>
</html>
<script type="text/javascript">
// 百度地圖API功能
// 標註點數組
var BASEDATA = [
<?php
$points = getmaparr();
for ($i=0; $i < count($points) ; $i++) {
if(($i+1)==count($points)){
$dh = "";
}
else{
$dh = ",";
}
echo "{title:'".$points[$i]['title']."',content:'".$points[$i]['content']."',point:'".$points[$i]['point']."',isOpen:0,icon:{w:21,h:26}}".$dh;
}
?>
]
//創建和初始化地圖函數：
function initMap(){
window.map = new BMap.Map("map");
map.centerAndZoom(new BMap.Point(104.049156,30.648577),15);
map.enableScrollWheelZoom();
map.addControl(new BMap.NavigationControl());
window.searchClass = new SearchClass();
searchClass.setData(BASEDATA)
var dd = searchClass.search({k:"title",d:"座標",t:"more",s:""});
addMarker(dd);//向地圖中添加marker
}
//創建marker
window.addMarker = function (data){
map.clearOverlays();
for(var i=0;i<data.length;i++){
var json = data[i];
var p0 = json.point.split(",")[0];
var p1 = json.point.split(",")[1];
var point = new BMap.Point(p0,p1);
var iconImg = createIcon(json.icon);
var marker = new BMap.Marker(point,{icon:iconImg});
var iw = createInfoWindow(i);
var label = new BMap.Label(json.title,{"offset":new BMap.Size(json.icon.lb-json.icon.x+10,-20)});
marker.setLabel(label);
map.addOverlay(marker);
label.setStyle({
borderColor:"#808080",
color:"#333",
cursor:"pointer"
});
(function(){
var _json = json;
var _iw = createInfoWindow(_json);
var _marker = marker;
_marker.addEventListener("click",function(){
this.openInfoWindow(_iw);
});
_iw.addEventListener("open",function(){
_marker.getLabel().hide();
})
_iw.addEventListener("close",function(){
_marker.getLabel().show();
})
label.addEventListener("click",function(){
_marker.openInfoWindow(_iw);
})
if(!!json.isOpen){
label.hide();
_marker.openInfoWindow(_iw);
}
})()
}
}
//創建InfoWindow
function createInfoWindow(json){
var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>"+json.content+"</div>");
return iw;
}
//創建一個Icon
function createIcon(json){
var icon = new BMap.Icon("http://api.map.baidu.com/images/marker_red_sprite.png", new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),infoWindowAnchor:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)})
return icon;
}
function SearchClass(data){
this.datas = data;
}
SearchClass.prototype.search = function(rule){
if(this.datas == null){alert("數據不存在!");return false;}
var reval = [];
var datas = this.datas;
var len = datas.length;
var me = this;
var ruleReg = new RegExp(this.trim(rule.d));
var hasOpen = false;
var addData = function(data,isOpen){
// 第一條數據打開信息窗口
if(isOpen && !hasOpen){
hasOpen = true;
data.isOpen = 1;
}else{
data.isOpen = 0;
}
reval.push(data);
}
var getData = function(data,key){
var ks = me.trim(key).split(/\./);
var i = null,s = "data";
if(ks.length == 0){
return data;
}else{
for(var i = 0; i < ks.length; i++){
s += '["' + ks[i] + '"]';
}
return eval(s);
}
}
for(var cnt = 0; cnt < len; cnt++){
var data = datas[cnt];
var d = getData(data,rule.k);
addData(data,false);
}
return reval;
}
SearchClass.prototype.setData = function(data){
this.datas = data;
}
SearchClass.prototype.trim = function(str){
if(str == null){str = "";}else{ str = str.toString();}
return str.replace(/(^[\s\t\xa0\u3000]+)|([\u3000\xa0\s\t]+$)/g, "");
}
initMap();//創建和初始化地圖
</script>
