地图api 标注 php,百度地图api的多个标注点及其监听事件（PHP作为服务端代码）...

Hello, World

html{height:100%}

body{height:100%;margin:0px;padding:0px}

#container{height:100%}

// 创建地图实例

var map = new BMapGL.Map("container");

//接收PHP传递的变量

var lng = <?php echo $longitude;?>;

var lat = <?php echo $latitude; ?>;

// 创建点坐标

var point = new BMapGL.Point(lng, lat);

// 初始化地图，设置中心点坐标和地图级别

map.centerAndZoom(point, 15);

//设置鼠标滚轮缩放

map.enableScrollWheelZoom(true);

//设置缩放角度

map.setHeading(64.5);   //设置地图旋转角度

map.setTilt(73);       //设置地图的倾斜角度

//添加控件

var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件

map.addControl(scaleCtrl);

var opts = {

anchor:BMAP_ANCHOR_TOP_RIGHT

}

var zoomCtrl = new BMapGL.ZoomControl(opts);  // 添加缩放控件

map.addControl(zoomCtrl);

//添加折线

/*

//添加公共文件

//include_once 'mysql_public.php';

//获取所有的管道信息

//$sql = 'select * from xxx';

//获取结果集

//$res = myerror($sql);

//获取结果集数据条数：多少行记录

$rows =  mysqli_num_rows($res);

//保存取出的记录：

//$point = array();

//利用while获取，每次取到数据之后判断保存数据的结果，只要结果不为false，那么一直取

while($row = mysqli_fetch_assoc($res))

{

$point[] = $row;    //于是point成为二维数组

}

*/

?>

$points = array(

array('lng'=>116.399, 'lat'=>39.910, 'name'=>"线桩1", 'id'=>1),

array('lng'=>116.405, 'lat'=>39.920, 'name'=>"线桩2", 'id'=>2),

array('lng'=>116.425, 'lat'=>39.900, 'name'=>"线桩3", 'id'=>3),

);

$rows = 3;

//将坐标集转换为json格式，为js的接收做准备

$jsonstr = json_encode($points);

?>

//在JavaScript中接收PHP中的变量值

var json = =$jsonstr?>;

var rows = =$rows ?>;

//JavaScript获取PHP数组：

//将php数组转成json编码，然后通过eval函数，转成js数组

var points = eval(json);

//准备一个数组存放坐标点集

var polylinePointsArray = [];

for(var index = 0; index < rows; index++)

{

var x = points[index]['lng'] + 0.000;

var y = points[index]['lat'] + 0.000;

polylinePointsArray[index] = new BMapGL.Point(x,y);

}

//源代码中各个坐标点是存在一个中括号内，表示所有坐标点存在于一个数组当中。

//现已将坐标点存入数组，所以没有必要再加中括号了。

var polyline = new BMapGL.Polyline(polylinePointsArray, {strokeColor:"blue", strokeWeight:8, strokeOpacity:0.5});   //创建折线

map.addOverlay(polyline);          //增加折线

//添加标注点

for(index = 0; index < rows; index++)

{

var marker = new BMapGL.Marker(polylinePointsArray[index]);

map.addOverlay(marker);

//为marker添加title，方便以后索引

marker.setTitle(points[index]['id']);

//添加监听事件

marker.addEventListener('click', overlayStyle);

}

//获取覆盖物属性

function overlayStyle(e)

{

var p = e.target;

alert(p.getTitle());

}