百度地图全景图

所属分类:媒体-地图

 23732  62  查看评论 (26)
百度地图全景图 ie兼容6

注:查看全景图需要开启浏览器flash,且在服务器端查看

开启后刷新页面即可查看全景图,下面是开启方法的链接

http://jingyan.baidu.com/article/e75aca8568cd6d142fdac678.html

使用方法

1.引入脚本

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

2.实例化

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: "img/marker2.png",
        width: 34,
        height: 94
    },
    centerPoint: { // 中心点经纬度
        lng: 118.106586,
        lat: 24.467207
    },
    index: 3, // 开启对应的信息窗口,默认-1不开启
    animate: true, // 是否开启坠落动画,默认false
    points: points, // 标注点--id(唯一标识)
    callback: function(id) { // 点击标注点回调
        $(".list").find("li").eq(id - 1).addClass("active").siblings().removeClass("active");
    }
});

3.说明

map.getPosition(id)// 获取位置信息,不传id获取当前开启信息窗口位置信息,传入id获取指定位置信息(id--标注点唯一标识);

map.openInfoWindow(id)// 开启指定位置信息窗口(id必须)

相关插件-地图

根据经伟度坐标获取地址

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

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

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

高德地图标注列表(带右侧分类)

模仿链家的周边配套的结构用高德地图实现的。
  地图
 7905  34

地图多个标注点添加百度样式检索窗口

运用jq在百度地图上添加,api多个标注点添加百度样式检索窗口
  地图
 21198  105

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

    熘.(?? . ??) 0
    2018/3/3 17:28:27
    想问一下。~显示全景那个图标 要怎么改动
        hellolxc0
        2018/3/4 14:34:27
        替换img下的panorama.png图片
    回复
    0
    2018/2/10 16:38:14
    想问加怎么添加,浏览者的当前位置定点
    回复
    对方正在输入.... 0
    2018/1/20 9:56:10

    这个架包导入一直报错 就是导入不进去

    回复
    对方正在输入.... 0
    2018/1/20 9:45:41

    先问一下这个插件怎么用 我放入eclipse 导入这个包就报错 

    回复
    。。。。。 0
    2018/1/18 10:56:56
    benjamin 0
    2018/1/18 10:12:28

    请问,这个插件angular里怎么引入?

    回复
    J 0
    2018/1/16 12:44:13
    请问,怎么在信息窗口显示“从这里出发”,“到这里去”?
        hellolxc1
        2018/1/16 12:57:19

        points有个content字段,设置下

    回复
    benjamin 0
    2018/1/4 11:44:37
    请问如何监听缩放事件?百度地图api的方法好像没法用
        benjamin0
        2018/1/4 11:56:17

        能给我一份源码么?

        hellolxc0
        2018/1/4 12:39:54

        里面api有说明,缩放事件直接监听zoomstart或者zoomend

        benjamin0
        2018/1/4 13:48:03

        我试了,但是没什么效果,求大神详解。。。

        map.addEventListener('zoomend', function() {
            var scaleNum = map.getZoom();
            console.log(scaleNum);
        });

        没输出,或者报map.addEventListener is not a function

        hellolxc1
        2018/1/4 14:30:33
        var map = new BMap.Map("container");
        var point = new BMap.Point(116.404, 39.915);
        map.centerAndZoom(point, 15);
        map.addControl(new BMap.NavigationControl());
        map.addEventListener("zoomstart", function() {
            console.log("zoomstart");
            console.log(this.getZoom());
        });
        map.addEventListener("zoomend", function() {
            console.log("zoomend");
            console.log(this.getZoom());
        });
        benjamin0
        2018/1/4 14:48:23
        var map = new BaiduMap({
            id: "container3",
            level: 16, //  选填--地图级别--(默认15)
            zoom: true, // 选填--是否启用鼠标滚轮缩放功能--(默认false)
            type: ["地图", "卫星"], // 选填--显示地图类型--(默认不显示)
            // width: 320, // 选填--信息窗口width--(默认自动调整)
            // height: 70, // 选填--信息窗口height--(默认自动调整)
            titleClass: "title",
            contentClass: "content",
            showPanorama: false, // 是否显示全景控件(默认false)
            showMarkPanorama: false, // 是否显示标注点全景图(默认false)
            showLabel: false, // 是否显示文本标注(默认false)
            mapStyle: "normal", // 默认normal,可选dark,light
            icon: { // 选填--自定义icon图标
                url: "img/marker2.png",
                width: 34,
                height: 94
            },
            centerPoint: { // 中心点经纬度
                lng: 118.106586,
                lat: 24.467207
            },
            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");
        
        
        var point = new BMap.Point(116.404, 39.915);
        map.centerAndZoom(point, 15);
        map.addControl(new BMap.NavigationControl());
        map.addEventListener("zoomstart", function() {
            console.log("zoomstart");
            console.log(this.getZoom());
        });
        map.addEventListener("zoomend", function() {
            console.log("zoomend");
            console.log(this.getZoom());
        });

        仍是报这个错

        benjamin0
        2018/1/4 17:51:35
        用上面写法的话会把你的插件覆盖,不重新声明map又会报错。。。
        benjamin0
        2018/1/4 18:35:36
        求分享源码一份,谢谢345831755@qq.com
        hellolxc1
        2018/1/4 22:41:23
        var instance = new BaiduMap({}); // 添加相应配置参数
        var map = instance.map; // 返回地图实例
        map.addEventListener("zoomstart", function() {
            console.log("zoomstart");
            console.log(this.getZoom());
        });
        map.addEventListener("zoomend", function() {
            console.log("zoomend");
            console.log(this.getZoom());
        });
        benjamin0
        2018/1/5 9:52:06
        问题解决了,多谢大神
        对方正在输入....0
        2018/1/20 10:42:51

        @benjamin  能问您一下 您是怎么使用这个地图的 新手 刚接入IT行业 学生 不太懂得 怎么使用 求源代码 就是我不会调用这个 地图 ,什么您说的监听器 都不是很懂

    回复
    0
    2017/11/14 21:08:54

    怎么换成自己想要的位置

        hellolxc0
        2017/11/16 16:44:49

        修改points数据

    回复
    IT 0
    2017/11/2 23:01:26

    请问没显示地图是什么原因?

    回复
取消回复