jQuery百度地图单点标注

所属分类:媒体-地图

jQuery百度地图单点标注 ie兼容6

更新时间:2017/7/15 上午11:37:38

更新说明:新增鼠标滚轮缩放和地图类型设置功能

1.引入jQuery和百度地图脚本

2.实例化插件

new BaiduMap({
    id: "container2",
    title: {
        text: "北京故宫博物院",
        className: "title" // 选填--样式类名
    },
    content: {
        className: "content", // 选填--样式类名
        text: ["地址:北京市东城区东华门大街", "电话:(010)65131892"]
    },
    point: {
        lng: "116.412222",
        lat: "39.912345"
    },
    level: 15, //  选填--地图级别--(默认15)
    zoom: true, // 选填--是否启用鼠标滚轮缩放功能--(默认false)【新增】
    type: ["地图", "卫星", "三维"], // 选填--显示地图类型--(默认不显示)【新增】
    width: 320, // 选填--信息窗口width--(默认自动调整)
    height: 70, // 选填--信息窗口height--(默认自动调整)
    icon: { // 选填--自定义icon图标
        url: "img/icon.png",
        width: 36,
        height: 36
    }
});

使用方法

1. 引入jQuery和百度地图   

<script src="http://api.map.baidu.com/api?v=2.0&ak=A1LU7iHS0avqQwPLAxbhKn0UYSQCuRVH"></script>     
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="js/jquery.baiduMap.min.js"></script>

2. 实例化插件   

new BaiduMap({
    id: "container2",
    title: {
        text: "北京故宫博物院",
        className: "title" // 选填--样式类名
    },
    content: {
        className: "content", // 选填--样式类名
        text: ["地址:北京市东城区东华门大街", "电话:(010)65131892"]
    },
    point: {
        lng: "116.412222",
        lat: "39.912345"
    },
    level: 15, //  选填--地图级别--(默认15)
    type: true, // 选填--是否显示地图类型--(默认false)
    width: 320, // 选填--信息窗口width--(默认自动调整)
    height: 70, // 选填--信息窗口height--(默认自动调整)
    icon: { // 选填--自定义icon图标
        url: "img/icon.png",
        width: 36,
        height: 36
    }
});
相关插件-地图

百度地图路书 (轨迹回放功能)

轨迹回放,边走边出路线边出点标记
  地图
 6809  34

百度地图回放路线

实现路线行驶回放等功能
  地图
 3816  21

百度地图途经点插件

百度地图途经点插件
  地图
 5670  29

地图移动线路pc+移动端

仿照饿了么送餐员的地图展示
  地图
 5478  54

讨论这个项目(30)回答他人问题或分享插件使用方法奖励jQ币

    DaDa... 0
    2018/1/13 16:03:52

    楼主,怎么标记两个点啊

        hellolxc0
        2018/1/13 19:09:30

        http://www.jq22.com/jquery-info15130

    回复
    Clover 0
    2017/12/22 16:39:44

    求分享源码一份 clover0719@163.com 谢谢

    回复
    undefined 0
    2017/12/16 15:16:38
    信仰 0
    2017/11/29 13:54:08

    上面的jar谁有呀

    回复
    赋别 ? 0
    2017/9/27 14:50:25

    怎么把汽包信息默认显示呢?

    回复
    净、 0
    2017/9/22 10:38:49

    移动端暂时用不了吗。?我在pc端是可以的。

    回复
    . 0
    2017/7/22 11:13:29

    大神什么时候在这个插件的基础上加上自驾路线、公交、地铁之类,爱你哦

        hellolxc0
        2017/7/22 11:22:27

        有时间在写吧,最近发了个百度地图自定义菜单,你可以看看http://www.jq22.com/jquery-info14862

    回复
    . 0
    2017/7/22 9:35:02
    为什么我引用不了啊
        hellolxc1
        2017/7/22 9:40:04

        引入三个脚本,然后实例化就可以,上面写的很详细

        .0
        2017/7/22 9:44:16

        hao l ..

    回复
    U丶Ms 0
    2017/7/21 10:13:05

    大咖,什么时候搞个点击回调函数,用来获取点击的地址与经纬度。。。

        hellolxc0
        2017/7/21 12:52:58

        这是单个点的标注,简单的信息展示,没有过多的交互;你说的应该是多点标注了吧,才需要获取当前点位的数据信息

        勿忘初心0
        2017/11/16 15:21:49

        想要实现多点标注,怎么实现啊楼主?

        勿忘初心0
        2017/11/16 15:22:49

        数据不同,显示不同的图标

        hellolxc0
        2017/11/16 16:43:45

        http://www.jq22.com/jquery-info15130

    回复
    采桑子滋滋滋滋滋 0
    2017/7/14 19:06:50
    求解地图右上角的三维图怎么把它删掉啊 
        hellolxc1
        2017/7/14 19:09:47
        默认(type:false)不显示地图类型
        采桑子滋滋滋滋滋0
        2017/7/14 19:36:16

        我试过 但是换成false卫星图就没有了 我只想删掉第三个三维图 有什么方法吗

        hellolxc0
        2017/7/14 19:38:36
        没有做单个地图类型配置项,如果需要这样配置,还需要更新插件
        hellolxc0
        2017/7/16 18:23:38

        插件更新,已实现该功能配置

    回复
取消回复