百度地图起点和终点位置标注，点击标注弹出信息窗口

最新推荐文章于 2024-01-06 16:55:50 发布

Sara0064

最新推荐文章于 2024-01-06 16:55:50 发布

阅读量2.4k

点赞数

文章标签： js 百度 jquery

本文链接：https://blog.youkuaiyun.com/Sara0064/article/details/106568971

版权

本文详细介绍如何使用百度地图SDK创建地图并实现地理位置信息展示。通过HTML、CSS和JavaScript结合后端数据接口，实现了地图上起点与终点的标注及线路绘制，同时展示了如何处理不同状态的数据反馈。

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

最近在做地图，百度官网的sdk是真的真的要好好看，先出做出来的效果图
在这里插入图片描述
首先，我们先画出地图，然后在右侧悬浮一个弹框
HTML:

   <body>
    <div id="map_container"></div>    
    <div id="content">
            <div class="AnalyzedTitle">
                    <div class="AnalyzedPaller"></div>
                    <div class="AnalyzedDec">位置查询信息</div>
            </div>
            <div class="set">
                <ul class="Adress" id="LocationUl">
                </ul>  
            </div>
</body>

style:

   #content{
   
        width:470px;
        min-height:1000px;
        top:0px;
        right:0px;
        position:absolute;
        z-index:9999;
        background-color:#FFFFFF;
    }

接下来我们写的代码就是去获取到地图样式，然后在请求数据接口获取起点和终点的经纬度进行渲染，在点击事件来请求信息窗口
后端数据的接口，我包括了经纬度和名字来统一获取：
在这里插入图片描述
接下来是我们的重头戏，代码有点多，耐心看哦，认真理解，其实很容易，用了ajax去获取数据，然后用了闭包去点击获取每一个li显示的不同内容，接下来就是地图的渲染了。
style:

<script type="text/javascript">
  height = $(window).height();
  $("#map_container").css("height",height);

var map = new BMap.Map("map_container",{
   
    mapType: BMAP_NORMAL_MAP,
    minZoom : 4,
    maxZoom

最低0.47元/天解锁文章