百度地图定位

<!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>

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值