教学之友,学习之友。

站长教学网

百度地图API显示多个标注点带提示的代码

时间:2013-07-13 12:07来源:未知 作者:ken 点击:

 下面的内容如数组都是数据库里调用后循环输出的

<script type=”text/javascript”>

var markerArr=[

{title:"xxx",point:"114.078869,22.555521",address:"xxx ",tel:"xxx)"},

{title:"xxx",point:"113.90259,22.568833",address:"xxx ",tel:"xxx)"},

{title:"xxx",point:"114.151715,22.55261",address:"xxx ",tel:"xxx)"},

];

function map_init() {

var map = new BMap.Map(“map_dealer”); // 创建Map实例

var point = new BMap.Point(114.025974, 22.546054); // 创建点坐标

map.centerAndZoom(point,12);// 初始化地图,设置中心点坐标和地图级别。

map.enableScrollWheelZoom(true); //启用滚轮放大缩小

//向地图中添加缩放控件

var ctrl_nav = new BMap.NavigationControl( {

anchor : BMAP_ANCHOR_TOP_LEFT,

type : BMAP_NAVIGATION_CONTROL_LARGE

});

map.addControl(ctrl_nav);

//向地图中添加缩略图控件

var ctrl_ove = new BMap.OverviewMapControl( {

anchor : BMAP_ANCHOR_BOTTOM_RIGHT,

isOpen : 1

});

map.addControl(ctrl_ove);

//向地图中添加比例尺控件

var ctrl_sca = new BMap.ScaleControl( {

anchor : BMAP_ANCHOR_BOTTOM_LEFT

});

map.addControl(ctrl_sca);

var point=new Array(); //存放标注点经纬信息的数组

var marker=new Array(); //存放标注点对象的数组

var info=new Array(); //存放提示信息窗口对象的数组

for(var i=0;i<markerArr.length;i++){

p0 = markerArr[i].point.split(“,”)[0]; //

p1 = markerArr[i].point.split(“,”)[1]; //按照原数组的point格式将地图点坐标的经纬度分别提出来

point[i] = new BMap.Point(p0,p1); //循环生成新的地图点

marker[i]=new BMap.Marker(point[i]); //按照地图点坐标生成标记

map.addOverlay(marker[i]);

marker[i].setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画

var label = new BMap.Label(‘公司名称:’+ markerArr[i].title ,{offset:new BMap.Size(20,-10)});

marker[i].setLabel(label);

info[i] = new BMap.InfoWindow(“<p style=’font-size:12px;lineheight:1.8em;’>名称:”+markerArr[i].title+”</br>地址:”+markerArr[i].address+”</br> 热线:”+markerArr[i].tel+”</br><img src=’http://img.netpc.com.cn/2013/07/10090833inc.gif’ /></p>”); // 创建信息窗口对象

}

marker[0].addEventListener(“mouseover”, function(){

this.openInfoWindow(info[0]);

});

marker[1].addEventListener(“mouseover”, function(){

this.openInfoWindow(info[1]);

});

marker[2].addEventListener(“mouseover”, function(){

this.openInfoWindow(info[2]);

});

}

function map_load() {//异步调用 站长教学网 eduyo.com

var load = document.createElement(“script”);

load.src = “http://api.map.baidu.com/api?v=1.4&callback=map_init”;

document.body.appendChild(load);

}

window.onload = map_load;

</script>

<div id=”map_dealer”style=”width:100%;height:500px;background-color:navy;”></div>

(责任编辑:ken)
TAG标签: 百度 地图 api 标注
顶一下
(1)
100%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
注册登录:不允许匿名留言,登录后留言无需输入验证码。
用户名: 验证码:点击我更换图片
栏目列表
最新内容