百度地图全景图

所属分类:媒体-地图

 15366  55  查看评论 (20)
百度地图全景图 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必须)

相关插件-地图

基于高德地图API开发的地图(路径测量等工具)

输入搜索路径,右键拖拽放大,左键点击测量路径!
  地图
 11705  66

百度地图途经点插件

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

ECharts中国地图选择器

Ets中国地图选择器demo
  地图
 37317  106

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

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

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

    。。。。。 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
    2017/11/14 21:08:54

    怎么换成自己想要的位置

        hellolxc0
        2017/11/16 16:44:49

        修改points数据

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

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

    回复
    0
    2017/11/2 10:27:32
    出现 0
    2017/8/21 21:58:54
    不会用,求指导。。。。(除了上面的引入和实例化,还需要什么步骤呢?)
        hellolxc0
        2017/8/21 22:27:10
        基本使用只需要引入脚本和实例化参数,如果需要用到全景图,则需要开启浏览器flash,上面有谷歌浏览器的开启连接(注意需要运行在服务器环境,不能直接双击打开html文件)
    回复
取消回复