百度地图，点击，切换地址

张张的技术贴

于 2021-06-16 18:56:46 发布

阅读量430

点赞数

分类专栏：难点 js

本文链接：https://blog.youkuaiyun.com/zxp_smile/article/details/117964696

版权

难点同时被 2 个专栏收录

77 篇文章

订阅专栏

50 篇文章

订阅专栏

这段代码展示了如何利用JavaScript和百度地图API在网页上动态展示医院的联系信息，并实现点击联系信息时在地图上定位。当用户点击某个医院条目时，地图会跳转并显示对应的医院位置，同时设置标注和动画效果。默认选中第一个医院进行展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<script src="http://api.map.baidu.com/api?v=2.0&ak=你自己的密钥"></script>

<div class="contact-wrap">
   <div class="contact-title">联系我们</div>
   <ul class="contact-list">
           @foreach($ary_hospital as $k =>$v)
               <li class="contact-item" location-x="{{$v['location_x']??''}}" location-y="{{$v['location_y']??''}}">
                   <a href="javascript:;" class="contact-sub-title">{{$v['name']??''}}</a>
                   <div class="contact-in">
                       <div class="contact-in-item">
                           {{$v['address']??''}}
                       </div>
                       <div class="contact-in-item">
                           {{$v['fax']??''}}
                       </div>
                       <div class="contact-in-item">
                           {{$v['tel']??''}}
                       </div>
                       <div class="contact-in-item">
                           {{$v['mailbox']??''}}
                       </div>
                   </div>
               </li>
           @endforeach
   </ul>
</div>

$(function(){

    // 切换显示院区地图
    var location_x;
    var location_y;
    var site_name;
    $('.contact').on('click', '.contact-item', function(e){
        var me = $(this);
        location_x = me.attr("location-x");
        location_y = me.attr("location-y");
        site_name = me.find('.contact-sub-title').text();
        me.addClass('active').siblings().removeClass('active');

        // 百度地图API功能
        var map = new BMap.Map("contact");
        // map.clearOverlays();
        map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
        var point = new BMap.Point(location_x, location_y);
        map.centerAndZoom(point, 18);
        var marker = new BMap.Marker(point);   // 创建标注
        map.addOverlay(marker);         // 将标注添加到地图中
        marker.setAnimation(BMAP_ANIMATION_BOUNCE);//跳动的动画
        map.addEventListener("contact", function (){ // 监听地图移动事件
            // 获取地图中心点并更新marker坐标
            marker.setPosition(map.getCenter());
        });

    });

    $(".contact-item").eq(0).click();
})