<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script src="http://api.map.baidu.com/api?v=1.3" type="text/javascript"></script>
<script type="text/javascript">
var map;
function initialize(){
map=new BMap.Map("container");
var point=new BMap.Point(114.080229,22.541693);
map.centerAndZoom(point,15);
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
map.addControl(new BMap.MapTypeControl());
//创建标注
//var marker=new BMap.Marker(point);
//map.addOverlay(marker);
var bounds=map.getBounds();
var lngSpan=bounds.maxX-bounds.minX;
var latSpan=bounds.maxY-bounds.minY;
var gpsdatas = beaches.split("||");
alert(gpsdatas.length);
for(var i=0;i<gpsdatas.length;i++){
var beach = gpsdatas[i].split("`");
var point=new BMap.Point(beach[1],beach[0]);
addMarker(point,i);
}
}
var beaches = "22.541693`114.080229||22.541693`114.080229||22.546529`114.041519||22.542327`114.106278";
var opts={
width:250,//信息窗口宽度height:100,//信息窗口高度
title:"他(她)的位置信息是:"//信息窗口标题
}
//编写自定义函数,创建标注
function addMarker(point,index){
//创建图标对象
//var myIcon=new BMap.Icon("girl.gif",new BMap.Size(50,68),{
//指定定位位置。
//当标注显示在地图上时,其所指向的地理位置距离图标左上
//角各偏移10像素和25像素。您可以看到在本例中该位置即是
//图标中央下端的尖角位置。
//offset:new BMap.Size(10,25),
//设置图片偏移。
//当您需要从一幅较大的图片中截取某部分作为标注图标时,您
//需要指定大图的偏移位置,此做法与css sprites技术类似。
// imageOffset:new BMap.Size(0,0-index*25)//设置图片偏移
//});
//创建标注对象并添加到地图,{icon:myIcon}
var infoWindow=new BMap.InfoWindow("World",opts);//创建信息窗口对象
var marker=new BMap.Marker(point);
map.addOverlay(marker);
marker.addEventListener("click",function(){
map.openInfoWindow(infoWindow,point);//打开信息窗口
});
}
</script>
</head>
<body οnlοad="initialize()">
<div id="container"style="width:1000px;height:500px;border:1px solid red"></div>
</body>
</html>
将的源码拷到自己电脑并改html文件就可以看到,如果需要与后台交互定位信息,则需要自己改改就行了,下面是效果图