zoukankan      html  css  js  c++  java
  • 调用百度API地图

    <link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
    <script type="text/javascript">
        function loadJScript() {
            var script = document.createElement("script");
            script.type = "text/javascript";
            script.src = "http://api.map.baidu.com/api?v=2.0&ak=TuIXlHOOl8dyN4T60vCxqpeg3mfO2uOj&callback=init";
            document.body.appendChild(script);
        }
        loadJScript();
        // 百度地图API功能
        $('#map').empty();
        var map = null;
        map = new BMap.Map('map');
        var poi = new BMap.Point(120.1736960000,30.2863080000);
        //map.setDefaultCursor("url('bird.cur')");
        map.centerAndZoom(poi, 16);
        map.enableScrollWheelZoom();
        var marks = null;
        //    };
        var styleOptions = {
            strokeColor:"red",    //边线颜色。
            //fillColor:"red",      //填充颜色。当参数为空时,圆形将没有填充效果。
            strokeWeight: 3,       //边线的宽度,以像素为单位。
            strokeOpacity: 0.8,       //边线透明度,取值范围0 - 1。
            fillOpacity: 0.6,      //填充的透明度,取值范围0 - 1。
            strokeStyle: 'solid' //边线的样式,solid或dashed。
        }
        //实例化鼠标绘制工具
        var drawingManager = new BMapLib.DrawingManager(map, {
            isOpen: true, //是否开启绘制模式
            enableDrawingTool: false, //是否显示工具栏
            drawingToolOptions: {
                anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
                offset: new BMap.Size(5, 5), //偏离值
            },
            circleOptions: styleOptions, //圆的样式
            polylineOptions: styleOptions, //线的样式
            polygonOptions: styleOptions, //多边形的样式
            rectangleOptions: styleOptions //矩形的样式
        });
        map.addEventListener("click", function(e){
            marks=e;
        });
        map.addEventListener("tilesloaded",function(){
            //alert("地图加载完毕");
            var latitude=${latitude?string('0.00000000')};
            var longitude=${longitude?string('0.00000000')};
            console.log("latitude:"+latitude+" longitude:"+longitude);
            var marker = new BMap.Marker(new BMap.Point(latitude, longitude));
            map.addOverlay(marker);
        });
    </script>
    <style type="text/css">
        body, html{ 100%;height: 100%;margin:0;font-family:"微软雅黑";}
        #allmap { 100%; height:100%; overflow: hidden;}
        #result {100%;font-size:12px;}
        dl,dt,dd,ul,li{
            margin:0;
            padding:0;
            list-style:none;
        }
        p{font-size:12px;}
        dt{
            font-size:14px;
            font-family:"微软雅黑";
            font-weight:bold;
            border-bottom:1px dotted #000;
            padding:5px 0 5px 5px;
            margin:5px 0;
        }
        dd{
            padding:5px 0 0 5px;
        }
        li{
            line-height:28px;
        }
    </style>
    <div class="pageFormContent" id="body">
        <div class="pageFormContent veneer_pwidth" layoutH="100">
            <div id="allmap" style="overflow:hidden;zoom:1;position:relative;">
                <div id="map" style="height:100%;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;">
                </div>
            </div>
        </div>
        <div class="formBar">
            <ul>
                <li>
                    <div class="cancel">
                        <button type="button" class="close">取消</button>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    </body>

  • 相关阅读:
    工作中会用到的知识点(二)
    canvas 绘制图形
    CSS 清除浮动的方法
    倒计时
    JavaScript 对象
    推荐一款分页插件
    HTML5 Video标签
    idea lua插件设置Lua SDK
    Springboot访问 图片image css js资源文件
    nginx基本配置与参数说明
  • 原文地址:https://www.cnblogs.com/my-blocg/p/5916020.html
Copyright © 2011-2022 走看看