jQuery百度地图单点标注

所属分类:媒体-地图

 11875  77  查看评论 (32)
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
    }
});
相关插件-地图

好用的百度地图插件

5种地图显示方式,简单便捷
  地图
 22028  104

根据经伟度坐标获取地址

根据经伟度坐标获取地址
  地图
 18513  36

基于jquery地图特效全国网点查看代码

基于jquery地图特效全国网点查看代码
  地图
 21404  173

百度地图区域取点工具

方便快捷的取出百度地图区域坐标点
  地图
 30041  103

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

    @杨小莹 0
    2018/1/30 16:01:45

    怎么修改默认位置? 大神。

        hellolxc0
        2018/1/30 16:55:01

        修改经纬度

    回复
    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

    回复
取消回复