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
    }
});
相关插件-地图

一款基于百度地图API做成的地区地图

可根据xml返回的数据控制插件,也可以本地控制插件、地区三级级联查询、地区联动地图的插件,在线搜索
  地图
 36218  235

svg中国地图

svg地图包括世界地图,各国地图及其它功能。
  地图
 39044  142

百度地图调用

简单的百度地图调用代码
  地图
 24787  128

jQuery小地图预览插件(预览完整的网页)

minimap是一个可以快速预览完整的网页或其与灵活的定位和导航支持DOM元素。
  地图
 12354  55

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

    赋别 ? 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

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

    回复
        0
    2017/7/13 10:39:02

    这个怎么获取当前的位置~大神 help

        hellolxc0
        2017/7/13 12:40:53

        这个插件主要是用在单个固定位置标注,没有做定位功能,定位功能需要在扩展

           0
        2017/7/13 15:41:53
        好的,非常感谢
        Z() L0
        2017/7/25 15:18:53

        position ?? 可以获取

        hellolxc0
        2017/7/27 16:52:00
        pc端只能定位到市,没做定位功能
        洛、0
        2017/7/29 15:29:29

        哈哈,凑一个

        月下不知十年后的八月0
        2017/7/31 16:33:24

        过来围观~

        开心天使0
        2017/8/1 17:09:25

        求分享源码一份,353468330@qq.com,非常感谢

        hellolxc0
        2017/8/1 17:41:30

        已发

    回复
取消回复