zoukankan      html  css  js  c++  java
  • 百度地图Api进阶教程-点击生成和拖动标注4.html

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>百度地图</title>
    
    
    <script type="text/javascript">
        var iscreatr=false;
        function initialize() {
            //---------------------------------------------基础示例---------------------------------------------
            var map = new BMap.Map("allmap",{minZoom:12,maxZoom:20});            // 创建Map实例
            //map.centerAndZoom(new BMap.Point(116.4035,39.915),15);  //初始化时,即可设置中心点和地图缩放级别。
            map.centerAndZoom("成都",13);                     // 初始化地图,设置中心点坐标和地图级别。
            map.enableScrollWheelZoom(true);//鼠标滑动轮子可以滚动
            
            map.addEventListener("click", function(e){
                if(iscreatr==true)return;
                //---------------------------------------------遮盖物---------------------------------------------
                iscreatr=true;
                 var point = new BMap.Point(e.point.lng ,e.point.lat);//默认
                 // 创建标注对象并添加到地图  
                 var marker = new BMap.Marker(point);  
                 var label = new BMap.Label("我是可以拖动的",{offset:new BMap.Size(20,-10)});
                 marker.setLabel(label)
                 map.addOverlay(marker);  
                 marker.enableDragging();    //可拖拽
                 marker.addEventListener("dragend", function(e){ 
                        document.getElementById("r-result").innerHTML = e.point.lng + ", " + e.point.lat;//打印拖动结束坐标
                 });
            });
        }
     
        function loadScript() {
           var script = document.createElement("script");
           script.src = "http://api.map.baidu.com/api?v=1.4&callback=initialize";
           document.body.appendChild(script);
        }
     
        window.onload = loadScript;
    </script>
    
    
    </head>
     <body>
        <div id="r-result" style="float:left;100px;">打印坐标</div>
        <div id="allmap" style=" 800px; height: 500px"></div>
    </body>
    </html>
    
    <script type="text/javascript">
        // 移动到某点 map.panTo(new BMap.Point(116.409, 39.918));  
         // map.setZoom(14);   //放到到14级
    </script>
  • 相关阅读:
    流程控制语句
    VMware虚拟机与Linux Centos7下载及安装教程
    ReduceTask的运行
    Spark最简单基础_欢乐的马小纪
    虚拟机扩容
    centos安装docker
    kafka生产消费者demo
    虚拟机NAT网络
    Spark开发的完整基础_欢乐的马小纪
    centos6 克隆虚机的紧要知识点_____马小纪&
  • 原文地址:https://www.cnblogs.com/xiaoliu66007/p/4895007.html
Copyright © 2011-2022 走看看