前段时间写了一个关于百度地图API的应用(关键字搜索、获取经纬度)的博客,基于此和一位朋友的帮助,写了一个可以在地图上跳动并的显示自定义信息的功能。
效果图:
在地图上显示红色标注,并上下跳动
鼠标点击会显示我自定义的信息
我写的有个事例,在这个页面的下方
http://www.zshchina.com/thinkcmf_sq/index.php?m=page&a=index&id=21
下面贴出实现代码:
<!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 {
width: 100%;
height: 100%;
margin: 0;
font-family: "微软雅黑";
font-size: 14px;
}
#l-map {
height: 300px;
width: 100%;
}
#r-result {
width: 100%;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=KyKYGhKT1DYisflH6Lk8OeGxEUYrFKRS"></script>
<title>关键字输入提示词条</title>
</head>
<body>
<div style="min-height: 300px; width: 100%;" id="allmap"></div>
</body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=KyKYGhKT1DYisflH6Lk8OeGxEUYrFKRS"></script>
<script type="text/javascript">
// 百度地图API功能
map = new BMap.Map("allmap");
map.enableScrollWheelZoom(true);
map.centerAndZoom(new BMap.Point(113.672743,34.758826), 11);
var data= [
{"community_name":"第一笔宝藏","community_address":"健康路","longitude":113.669,"latitude":34.7741,"house_nums":146300},
{"community_name":"第二笔宝藏","community_address":"中原路","longitude":113.607,"latitude":34.7508,"house_nums":157200},
{"community_name":"第三笔宝藏","community_address":"郑州高新区","longitude":113.573,"latitude":34.8241,"house_nums":10},
{"community_name":"第四笔宝藏","community_address":"天河路","longitude":113.615,"latitude":34.8507,"house_nums":1000},
{"community_name":"第五笔宝藏","community_address":"花园路","longitude":113.686,"latitude":34.7972,"house_nums":1300}];
var data_info = data;
var opts = {
width : 250, // 信息窗口宽度
height: 100, // 信息窗口高度
title : "藏宝图信息" , // 信息窗口标题
enableMessage:true//设置允许信息窗发送短息
};
var count=data_info.length;
for(var i=0;i<count;i++){
var point=new BMap.Point(data_info[i].longitude,data_info[i].latitude)
var marker = new BMap.Marker(point); //创建标注
marker.communame=data_info[i].community_name;
marker.commuaddr=data_info[i].community_address;
marker.househld_nums=data_info[i].house_nums;
var content = "藏宝地点:"+data_info[i].community_name+" <br>宝藏价值:"+data_info[i].house_nums+" <br>地址:"+data_info[i].community_address;
map.addOverlay(marker); // 将标注添加到地图中
marker.setAnimation(BMAP_ANIMATION_BOUNCE); //动画
addClickHandler(content,marker);
}
function addClickHandler(content,marker){
marker.addEventListener("click",function(e){
openInfo(content,e);
$("#commuaddr").html(e.target.commuaddr);
$("#communame").html(e.target.communame);
$("#househld_nums").html(e.target.househld_nums);
});
}
function openInfo(content,e){
var p = e.target;
var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
var infoWindow = new BMap.InfoWindow(content,opts);// 创建信息窗口对象
map.openInfoWindow(infoWindow,point);//开启信息窗口
}
</script>
</html>