zoukankan      html  css  js  c++  java
  • 百度地图api 常用 例子

    功能一:获取map地图窗口的可视区域:
    var map = new BMap.Map("allmap");            // 创建Map实例
    map.centerAndZoom(new BMap.Point(116.4035,39.915), 14);  //初始化时,即可设置中心点和地图缩放级别。
    var bs = map.getBounds();   //获取可视区域
    var bssw = bs.getSouthWest();   //可视区域左下角
    var bsne = bs.getNorthEast();   //可视区域右上角
    alert("当前地图可视范围是:" + bssw.lng + "," + bssw.lat + "到" + bsne.lng + "," + bsne.lat);
     
    功能二:3D展示地图:
    var map = new BMap.Map("allmap", {mapType:BMAP_PERSPECTIVE_MAP}); 
    var point = new BMap.Point(116.4035,39.915); 
    map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的 
     map.centerAndZoom(point,19); 
    map.enableScrollWheelZoom(true);
     
    功能三:设置地图允许的大小:
    var map = new BMap.Map("allmap",{minZoom:4,maxZoom:8}); // 创建Map实例 
    map.centerAndZoom(new BMap.Point(116.4035,39.915),15); //初始化时,即可设置中心点和地图缩放级别。  map.enableScrollWheelZoom(true);
     
    功能四:获取当前地图视野的中心点:
    var map = new BMap.Map("allmap"); // 创建Map实例 
    map.centerAndZoom(new BMap.Point(116.4035,39.915),8); //初始化时,即可设置中心点和地图缩放级别。 
    alert("当前地图中心点:" + map.getCenter().lng + "," + map.getCenter().lat);
     
    功能五:google地图坐标换算百度地图坐标:
    //谷歌坐标 
    var x = 116.32715863448607; 
    var y = 39.990912172420714; 
    var ggPoint = new BMap.Point(x,y); //地图初始化 
    var bm = new BMap.Map("allmap"); 
    bm.centerAndZoom(ggPoint, 15); 
    bm.addControl(new BMap.NavigationControl()); //添加谷歌marker和label 
    var markergg = new BMap.Marker(ggPoint); 
    bm.addOverlay(markergg); //添加谷歌marker 
    var labelgg = new BMap.Label("我是谷歌标注哦",{offset:new BMap.Size(20,-10)}); 
    markergg.setLabel(labelgg); //添加谷歌label //坐标转换完之后的回调函数 
    translateCallback = function (point){ 
    var marker = new BMap.Marker(point); 
    bm.addOverlay(marker); 
    var label = new BMap.Label("我是百度标注哦",{offset:new BMap.Size(20,-10)}); 
    marker.setLabel(label); //添加百度label 
    bm.setCenter(point); 
    alert(point.lng + "," + point.lat);
    setTimeout(function(){ 
     BMap.Convertor.translate(ggPoint,2,translateCallback); //GCJ-02坐标转成百度坐标 
    }, 2000);
     
    功能六:GPS坐标换算百度坐标:
    //GPS坐标 var xx = 116.397428; 
    var yy = 39.90923; 
    var gpsPoint = new BMap.Point(xx,yy); //地图初始化 
    var bm = new BMap.Map("allmap"); 
    bm.centerAndZoom(gpsPoint, 15); 
    bm.addControl(new BMap.NavigationControl()); //添加谷歌marker和label 
    var markergps = new BMap.Marker(gpsPoint); 
    bm.addOverlay(markergps); //添加GPS标注 
    var labelgps = new BMap.Label("我是GPS标注哦",{offset:new BMap.Size(20,-10)}); 
    markergps.setLabel(labelgps); //添加GPS标注 //坐标转换完之后的回调函数 
    translateCallback = function (point){ var marker = new BMap.Marker(point); 
     bm.addOverlay(marker); 
     var label = new BMap.Label("我是百度标注哦",{offset:new BMap.Size(20,-10)}); 
     marker.setLabel(label); //添加百度label 
     bm.setCenter(point); alert(point.lng + "," + point.lat);
     } 
     setTimeout(function(){ BMap.Convertor.translate(gpsPoint,0,translateCallback); //真实经纬度转成百度坐标 }, 2000);
     
    功能七:测距:
    var map = new BMap.Map("allmap");
    map.centerAndZoom("重庆",12);                   // 初始化地图,设置城市和地图级别。
    var pointA = new BMap.Point(106.486654,29.490295);  // 创建点坐标A--大渡口区
    var pointB = new BMap.Point(106.581515,29.615467);  // 创建点坐标B--江北区
    alert('从大渡口区到江北区的距离是:'+map.getDistance(pointA,pointB)+' 米。');     //获取两点距离
    var polyline = new BMap.Polyline([pointA,pointB], {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});  //定义折线
    map.addOverlay(polyline);   //添加折线到地图上
     
    功能八:关键字输入提示词条:
    function G(id) {
        return document.getElementById(id);
    }
     
    var map = new BMap.Map("l-map");
    map.centerAndZoom("北京",12);                   // 初始化地图,设置城市和地图级别。
    //建立一个自动完成的对象
    var ac = new BMap.Autocomplete(  {"input" : "suggestId" ,"location" : map});
    ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
    var str = "";
    var _value = e.fromitem.value;
    var value = "";
       if (e.fromitem.index > -1) {
              value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
    }    
    str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
         value = "";
    if (e.toitem.index > -1) {
    _value = e.toitem.value;
              value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
    }    
        str+= "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
    G("searchResultPanel").innerHTML = str;
    });
     
    var myValue;
    ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
    var _value = e.item.value;
    myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
    G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
    setPlace();
    });
     
    function setPlace(){
        map.clearOverlays();    //清除地图上所有覆盖物
        function myFun(){
            var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
            map.centerAndZoom(pp, 18);
            map.addOverlay(new BMap.Marker(pp));    //添加标注
        }
        var local = new BMap.LocalSearch(map, { //智能搜索
          onSearchComplete: myFun
        });
        local.search(myValue);
    }
     
    功能九:自定义版权控件:
    var map = new BMap.Map("allmap");
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
    var cr = new BMap.CopyrightControl({anchor: BMAP_ANCHOR_TOP_RIGHT});
    map.addControl(cr); //添加版权控件
    var bs = map.getBounds();
    cr.addCopyright({id: 1, content: "<a href='#' style='font-size:20px;background:yellow'>我是自定义版权控件呀</a>", bounds: bs});
     
    功能十:自定义控件:
    var map = new BMap.Map("allmap"); 
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 定义一个控件类,即function 
    function ZoomControl(){ // 默认停靠位置和偏移量 
     this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT; 
     this.defaultOffset = new BMap.Size(10, 10); 
    } // 通过JavaScript的prototype属性继承于
    BMap.Control ZoomControl.prototype = new BMap.Control(); // 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返 回 // 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中 
    ZoomControl.prototype.initialize = function(map){ // 创建一个DOM元素 
     var div = document.createElement("div"); // 添加文字说明 
     div.appendChild(document.createTextNode("放大2级")); // 设置样式 
     div.style.cursor = "pointer"; 
     div.style.border = "1px solid gray"; 
     div.style.backgroundColor = "white"; // 绑定事件,点击一次放大两级 
     div.onclick = function(e){ map.setZoom(map.getZoom() + 2); } // 添加DOM元素到地图中 
     map.getContainer().appendChild(div); // 将DOM元素返回 
     return div; } // 创建控件 
    var myZoomCtrl = new ZoomControl(); // 添加到地图当中 
    map.addControl(myZoomCtrl);
  • 相关阅读:
    2017.11.20
    第8次
    作业 lianxi
    java 7个练习题
    java 2.15
    java 2.6
    jsp变量和方法的声明
    jsp 基本标签从头练习
    15
    14
  • 原文地址:https://www.cnblogs.com/moguzi12345/p/7575519.html
Copyright © 2011-2022 走看看