zoukankan      html  css  js  c++  java
  • jQuery:[2]百度地图开发平台实战

    jQuery:[2]百度地图开发平台实战

    原文链接:   http://blog.csdn.net/moniteryao/article/details/51078779

    快速开始

    开发平台地址

      http://lbsyun.baidu.com/index.php?title=jspopular

    示例Demo

    <div style="min-height: 480px;  100%;" id="map">
    </div>
    <script type="text/javascript">
    var lat = '33.485931', longt = '118.23049', bcode='0';
    var markerArr;
    $(function () {
        var url = "../Controls/SelectControl.aspx?action=getchecklist";
        //$(".test").html(url);
        $.ajax({
            url: url,
            dataType: 'json',
            type: 'get',
            async: false,
            success: function (data) {
                markerArr = data;
                creatmap();
            }
        });
    });
    var pointarr = new Array();
    var infoWindow = new Array();
    var map;
    function creatmap() {
                
        map = new BMap.Map("map");
        //第1步:设置地图中心点
        var point = new BMap.Point(longt, lat); //113.312463,23.146515
                
        map.addOverlay(marker);
        //第2步:初始化地图,设置中心点坐标和地图级别。
        //设置可否拖拽
        //marker.enableDragging();
        map.centerAndZoom(point, 18);
        //第3步:启用滚轮放大缩小
        map.enableScrollWheelZoom(true);
        //第4步:向地图中添加缩放控件
        var ctrlNav = new window.BMap.NavigationControl({
            anchor: BMAP_ANCHOR_TOP_LEFT,
            type: BMAP_NAVIGATION_CONTROL_LARGE
        });
        map.addControl(ctrlNav);
        //设置不相关图标不显示
        map.setMapStyle({
            styleJson:
                [{
                    "featureType": "poi",
                    "elementType": "labels",
                    "stylers": {
                        "color": "#000000",
                        "visibility": "off"
                    }
                }]
        });
                
        //circle.enableEditing();
        //第5步:向地图中添加缩略图控件
        var ctrlOve = new window.BMap.OverviewMapControl({
            anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
            isOpen: 1
        });
        map.addControl(ctrlOve);
        //第6步:向地图中添加比例尺控件
        var ctrlSca = new window.BMap.ScaleControl({
            anchor: BMAP_ANCHOR_BOTTOM_LEFT
        });
        map.addControl(ctrlSca);
        //alert(markerArr.length);
        //第7步:绘制点
        for (var i = 0; i < markerArr.length; i++) {
                   
            var p0 = markerArr[i].longt;
            var p1 = markerArr[i].lat;
            var checksum = markerArr[i].checksum;
            var point = new BMap.Point(p0, p1);  //118.230272,33.482474
            
            var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png",
            new BMap.Size(23, 25), {
                offset: new BMap.Size(10, 25),
                imageOffset: new BMap.Size(0, 0 - 10 * 25)
            });       
                   
            var marker = new BMap.Marker(point, { icon: myIcon });//自定义图标 
            map.addOverlay(marker);
            (function () {//重点在这里,闭包的作用体现出来了,不然,信息框一直指向最后一个坐标
                var index = i;
                var _iw = new BMap.InfoWindow('', { title: markerArr[i].name,  100,heigth:30 });
                var _marker = marker;
                _marker.addEventListener("click", function () {
                    this.openInfoWindow(_iw);
                });
            })()
        }
    }
    //异步调用百度js
    function map_load() {
        var load = document.createElement("script");
        load.src = "http://api.map.baidu.com/api?v=2.0&callback=creatmap&ak=eewwwwwwwwwwRomLeeeeeelUq";
        document.body.appendChild(load);
    }
    window.onload = map_load;
    </script>
    

      

  • 相关阅读:
    自定义View的ToolBar布局报错Error:(2) No resource identifier found for attribute 'context' in package 'c
    在学git之主分支 branch
    获取发布版SHA1
    关于开启线程与UI的操作
    播放音频和视频(VideoView控件)
    通知栏Notification的应用
    Android 真机调式 Installation failed with message 远程主机强迫关闭了一个现有的连接。. It is possible that this issue is resolved by uninstalling an existing version of the apk if it is present, and then re-installing. WA
    运行程序申请危险权限
    mysql乐观锁总结和实践
    Nginx配置文件nginx.conf中文详解
  • 原文地址:https://www.cnblogs.com/MrSaver/p/8862576.html
Copyright © 2011-2022 走看看