百度地图定位

╰半橙微兮° 2022-05-06 04:27 566阅读 0赞

<!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title>百度地图定位</title>
    <style>
        * { margin: 0; padding: 0; }
        a { text-decoration: none; }
        ul { list-style: none; }
        body,  html { height: 100%; font-family: "微软雅黑"; }
        .box { width: 100%; height: 600px; margin: 40px 0; }
        #container1,  #container2 { width: 100%; height: 100%; }
        #container3 { width: 80%; height: 100%; }
        .list { width: 20%; height: 100%; background: #eee; }
        .list li { height: 34px; line-height: 34px; padding-left: 20px; }
        .list li.active a { color: red; }
        .title { font-size: 14px; font-weight: bold; color: #cc5522; }
        .content { font-size: 13px; color: #333; margin-top: 6px; }
        .fl { float: left; }
    </style>
    
    </head>
    <body>
    <div class="box">
    <div id="container3" class="container fl"></div>
    <ul class="list fl">
        <li> <a href="javascript:void(0)">湖南文理学院西校区</a> </li>
        <li> <a href="javascript:void(0)">赛格国际购物中心</a> </li>
    </ul>
    </div>
    
    <script src="js/jquery-1.9.1.js"></script>
    <script src="http://api.map.baidu.com/api?      v=2.0&ak=A1LU7iHS0avqQwPLAxbhKn0UYSQCuRVH"></script>
    <script src="js/jquery.baiduMap.min.js"></script>
     <script>
    var points = [{
        id:1,
        lng: 111.678286,
        lat: 29.05446,
        title: "湖南文理学院（西校区）",
        content: ["地址：湖南省常德市武陵区洞庭大道3150号 ", "电话：(0736)7186016 "]
    },
        {
            id:2,
            lng: 108.954689,
            lat: 34.229875,
            title: "赛格国际购物中心",
            content: ["地址：西安市雁塔区长安中路123号  ", "电话：(029)86300000 "]
        }
    ];
    
    var map = new BaiduMap({
        id: "container3",
        level: 16, //  选填--地图级别--(默认15)
        zoom: true, // 选填--是否启用鼠标滚轮缩放功能--(默认false)
        type: ["地图", "卫星", "三维"], // 选填--显示地图类型--(默认不显示)
        width: 320, // 选填--信息窗口width--(默认自动调整)
        height: 70, // 选填--信息窗口height--(默认自动调整)
        titleClass: "title",
        contentClass: "content",
        showPanorama: true, // 是否显示全景控件(默认false)
        showMarkPanorama: true, // 是否显示标注点全景图(默认false)
        showLabel: false, // 是否显示文本标注(默认false)
        mapStyle: "normal", // 默认normal,可选dark,light
        icon: { // 选填--自定义icon图标
            url: "image/marker2.png",
            width: 34,
            height: 94
        },
        centerPoint: { // 中心点经纬度
            lng: 108.916792,
            lat: 34.219782
        },
        index: 3, // 开启对应的信息窗口，默认-1不开启
        animate: true, // 是否开启坠落动画，默认false
        points: points, // 标注点--id(唯一标识)
        callback: function(id) {
            $(".list").find("li").eq(id - 1).addClass("active").siblings().removeClass("active");
        }
    });
    var data = map.getPosition();
    var $li = $(".list").find("li");
    
    $li.each(function(i) {
        $(this).data("id", i + 1);
    }).on("click", function() {
        map.openInfoWindow($(this).data("id"));
        $(this).addClass("active").siblings().removeClass("active");
    }).eq(data.id - 1).addClass("active");
    
    </script>
    </body>
    </html>

![在这里插入图片描述][70]

[70]: /images/20220506/a5ad58471f54482c813a4d43d62468e6.png