百度地图定位

最新推荐文章于 2020-08-03 11:20:34 发布

努力努力T努力

最新推荐文章于 2020-08-03 11:20:34 发布

阅读量199

点赞数

分类专栏：项目中遇到的问题总结文章标签：百度定位

本文链接：https://blog.csdn.net/weixin_43176337/article/details/83033364

版权

项目中遇到的问题总结专栏收录该内容

6 篇文章 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>

在这里插入图片描述