百度地图 插架的使用后台传值

代码如下

html  头部引入链接

<!--头部开始-->
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<title>百度插架</title>

<script src="scripts/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=IDvNBsejl9oqMbPF316iKsXR"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />

js  开 始

<!-- 内容开始 -->
    <div class="map" id="map"></div>
    <!-- 内容结束 -->
    <script type="text/javascript">
        $.ajax({
            url: "{:url('index/Map/map')}",
            type: "post",
            dataType: "json",
            success: function (data) {
                console.log(data[0]);
                markerArr = data;
                if (data[0]) {
                    centrenoe = markerArr[0].longitude;
                } else {
                    centrenoe = 114.076751;
                }
                if (data[0]) {
                    centretwo = markerArr[0].latitude;
                } else {
                    centretwo = 35.387645;
                }
            },
            error: function (data) {
                alert('错误');
            }
        });
        function map_init() {
            var map = new BMap.Map("map"); // 创建Map实例
            var point = new BMap.Point(centrenoe, centretwo); //地图中心点
            map.centerAndZoom(point, 13); // 初始化地图,设置中心点坐标和地图级别。
            map.enableScrollWheelZoom(true); //启用滚轮放大缩小
            //地图、卫星、混合模式切换
            map.addControl(new BMap.MapTypeControl({
                mapTypes: [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP, BMAP_HYBRID_MAP]
            }));
            //向地图中添加缩放控件
            var ctrlNav = new window.BMap.NavigationControl({
                anchor: BMAP_ANCHOR_TOP_LEFT,
                type: BMAP_NAVIGATION_CONTROL_LARGE
            });
            map.addControl(ctrlNav);

            //向地图中添加缩略图控件
            var ctrlOve = new window.BMap.OverviewMapControl({
                anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
                isOpen: 1
            });
            map.addControl(ctrlOve);

            //向地图中添加比例尺控件
            var ctrlSca = new window.BMap.ScaleControl({
                anchor: BMAP_ANCHOR_BOTTOM_LEFT
            });
            map.addControl(ctrlSca);

            var point = new Array(); //存放标注点经纬信息的数组
            var marker = new Array(); //存放标注点对象的数组
            var info = new Array(); //存放提示信息窗口对象的数组
            var searchInfoWindow = new Array(); //存放检索信息窗口对象的数组
            for (var i = 0; i < markerArr.length; i++) {
                var p0 = markerArr[i].point.split(",")[0]; //
                var p1 = markerArr[i].point.split(",")[1]; //按照原数组的point格式将地图点坐标的经纬度分别提出来
                point[i] = new window.BMap.Point(p0, p1); //循环生成新的地图点
                marker[i] = new window.BMap.Marker(point[i]); //按照地图点坐标生成标记
                map.addOverlay(marker[i]);
                marker[i].setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画

                //显示marker的title，marker多的话可以注释掉
                // var label = new window.BMap.Label(markerArr[i].title, {
                // 	offset: new window.BMap.Size(20, -10)
                // });
                // marker[i].setLabel(label);

                // 创建信息窗口对象
                info[i] = "<p style='font-size:12px;lineheight:1.8em;margin-top:-10px'>" +
                    "</br>地址：" +
                    markerArr[i].address + "<i class='head'></i>" + "头像" + "<img class='image'  src=" + markerArr[i].img + " >" +
                    "</br>电话：" + markerArr[i].tel + "</p>";
                //创建百度样式检索信息窗口对象                       
                searchInfoWindow[i] = new BMapLib.SearchInfoWindow(map, info[i], {
                    title: markerArr[i].title, //标题
                    width: 290, //宽度
                    height: 55, //高度
                    panel: "panel", //检索结果面板
                    enableAutoPan: true, //自动平移
                    searchTypes: [
                        BMAPLIB_TAB_SEARCH, //周边检索
                        BMAPLIB_TAB_TO_HERE, //到这里去
                        BMAPLIB_TAB_FROM_HERE //从这里出发
                    ]
                });



                //添加点击事件
                marker[i].addEventListener("click",
                    (function (k) {
                        // js 闭包
                        return function () {
                            //将被点击marker置为中心
                            //map.centerAndZoom(point[k], 18);
                            //在marker上打开检索信息窗口
                            searchInfoWindow[k].open(marker[k]);
                        }
                    })(i)
                );
            }
        }
        //异步调用百度js
        function map_load() {
            var load = document.createElement("script");
            load.src = "http://api.map.baidu.com/api?v=2.0&ak=IDvNBsejl9oqMbPF316iKsXR&callback=map_init";
            document.body.appendChild(load);
        }
        window.onload = map_load;



    </script>

 

 

完整代码

<!--头部开始-->
<link rel="stylesheet" href="/static/index/css/nav.css">
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<title>百度插架</title>

<script src="scripts/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=IDvNBsejl9oqMbPF316iKsXR"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />

<!-- 内容开始 -->
    <div class="map" id="map"></div>
    <!-- 内容结束 -->
    <script type="text/javascript">
        $.ajax({
            url: "{:url('index/Map/map')}",
            type: "post",
            dataType: "json",
            success: function (data) {
                console.log(data[0]);
                markerArr = data;
                if (data[0]) {
                    centrenoe = markerArr[0].longitude;
                } else {
                    centrenoe = 114.076751;
                }
                if (data[0]) {
                    centretwo = markerArr[0].latitude;
                } else {
                    centretwo = 35.387645;
                }
            },
            error: function (data) {
                alert('错误');
            }
        });
        function map_init() {
            var map = new BMap.Map("map"); // 创建Map实例
            var point = new BMap.Point(centrenoe, centretwo); //地图中心点
            map.centerAndZoom(point, 13); // 初始化地图,设置中心点坐标和地图级别。
            map.enableScrollWheelZoom(true); //启用滚轮放大缩小
            //地图、卫星、混合模式切换
            map.addControl(new BMap.MapTypeControl({
                mapTypes: [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP, BMAP_HYBRID_MAP]
            }));
            //向地图中添加缩放控件
            var ctrlNav = new window.BMap.NavigationControl({
                anchor: BMAP_ANCHOR_TOP_LEFT,
                type: BMAP_NAVIGATION_CONTROL_LARGE
            });
            map.addControl(ctrlNav);

            //向地图中添加缩略图控件
            var ctrlOve = new window.BMap.OverviewMapControl({
                anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
                isOpen: 1
            });
            map.addControl(ctrlOve);

            //向地图中添加比例尺控件
            var ctrlSca = new window.BMap.ScaleControl({
                anchor: BMAP_ANCHOR_BOTTOM_LEFT
            });
            map.addControl(ctrlSca);

            var point = new Array(); //存放标注点经纬信息的数组
            var marker = new Array(); //存放标注点对象的数组
            var info = new Array(); //存放提示信息窗口对象的数组
            var searchInfoWindow = new Array(); //存放检索信息窗口对象的数组
            for (var i = 0; i < markerArr.length; i++) {
                var p0 = markerArr[i].point.split(",")[0]; //
                var p1 = markerArr[i].point.split(",")[1]; //按照原数组的point格式将地图点坐标的经纬度分别提出来
                point[i] = new window.BMap.Point(p0, p1); //循环生成新的地图点
                marker[i] = new window.BMap.Marker(point[i]); //按照地图点坐标生成标记
                map.addOverlay(marker[i]);
                marker[i].setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画

                //显示marker的title，marker多的话可以注释掉
                // var label = new window.BMap.Label(markerArr[i].title, {
                // 	offset: new window.BMap.Size(20, -10)
                // });
                // marker[i].setLabel(label);

                // 创建信息窗口对象
                info[i] = "<p style='font-size:12px;lineheight:1.8em;margin-top:-10px'>" +
                    "</br>地址：" +
                    markerArr[i].address + "<i class='head'></i>" + "头像" + "<img class='image'  src=" + markerArr[i].img + " >" +
                    "</br>电话：" + markerArr[i].tel + "</p>";
                //创建百度样式检索信息窗口对象                       
                searchInfoWindow[i] = new BMapLib.SearchInfoWindow(map, info[i], {
                    title: markerArr[i].title, //标题
                    width: 290, //宽度
                    height: 55, //高度
                    panel: "panel", //检索结果面板
                    enableAutoPan: true, //自动平移
                    searchTypes: [
                        BMAPLIB_TAB_SEARCH, //周边检索
                        BMAPLIB_TAB_TO_HERE, //到这里去
                        BMAPLIB_TAB_FROM_HERE //从这里出发
                    ]
                });



                //添加点击事件
                marker[i].addEventListener("click",
                    (function (k) {
                        // js 闭包
                        return function () {
                            //将被点击marker置为中心
                            //map.centerAndZoom(point[k], 18);
                            //在marker上打开检索信息窗口
                            searchInfoWindow[k].open(marker[k]);
                        }
                    })(i)
                );
            }
        }
        //异步调用百度js
        function map_load() {
            var load = document.createElement("script");
            load.src = "http://api.map.baidu.com/api?v=2.0&ak=IDvNBsejl9oqMbPF316iKsXR&callback=map_init";
            document.body.appendChild(load);
        }
        window.onload = map_load;



    </script>