百度地图API的应用（标注自定义信息并跳动）

前段时间写了一个关于百度地图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>

百度地图API的应用（标注自定义信息并跳动）

猜你喜欢