百度地图API常规应用十功能

百度地图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 index = " + e.fromitem.index + " value = " + value;

value = "";

if (e.toitem.index > -1) {

_value = e.toitem.value;

value = _value.province + _value.city + _value.district + _value.street + _value.business;

}

str+= " ToItem index = " + e.toitem.index + " 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 index = " + e.item.index + " 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);

百度地图API常规应用十功能相关推荐

vue项目中使用百度地图api完成自定义搜索功能（包含搜索详细地理位置）
需求描述: 在vue项目中,有时候,我们需要自定义百度地图的一些功能.譬如,现在的需求,就是需要自定义搜索内容和结果展示. 类似如下页面的功能: 首先在vue项目中,我们可以使用 vue-baidu- ...
百度地图API公交检索示例 - 标绘结果路线、返回结果集
百度地图API具有公交检索功能:使用它的在线SDK示例来修改代码,快速演示一下: <html> <head><meta http-equiv="Content- ...
【百度地图API】小学生找哥哥——小学生没钱打车，所以此为公交查询功能
原文:[百度地图API]小学生找哥哥--小学生没钱打车,所以此为公交查询功能任务描述: 有位在魏公村附近上小学的小朋友,要去北京邮电大学找哥哥.他身上钱很少,只够坐公交的.所以,百度地图API快帮帮 ...
【百度地图API】暑假放假回老家——城市切换功能
原文:[百度地图API]暑假放假回老家--城市切换功能任务描述: 酸奶小妹放寒假啦,要从北京呼啦一下飞回重庆呢.现在百度地图API上不能直接切换城市,怎么办呢? 如何实现: 利用API先搜索到要去城 ...
Android利用百度地图API实现定位功能（记录）
本篇主要介绍一下如何使用百度地图API来实现定位以及地图的基本使用. 效果图如下: 步骤如下: 一.申请APIKey. (1)注册百度账号并申请开发者资质:http://developer.baidu ...
调用百度地图api实现地图查询功能
百度地图api功能强大,进入百度地图api平台之后首先需要注册申请一个ak码(其实就是权限码),通过审核之后就可以参考api提供的例子进行自定义的地图开发功能了. 在这里提供两个本人写好的地图查询功能 ...
百度地图api周边搜索功能
利用百度地图api周边搜索功能,实现点击切换周边类型显示 <!DOCTYPE html> <html lang="zh-CN"> <head>& ...
百度地图API制作类似百度地图的路线导航界面并实现简单的路线规划功能
之前我们讲了怎么在百度地图上设置Marker(如A点..) 和弹出框(跟随Marker的,Marker移动的时候也是会跟着移动的),接着又觉得百度地图自带的放大缩小不(fei)是(chang)很(de ...
Html+JavaScript+百度地图api：GPS功能单点运动
在学习jQuery时,浏览到一个比较有意思的网页:jQuery插件库 http://www.jq22.com/,里面有很多封装好的插件库,然后,在地图插件里看到一个比较有意思的功能-路书,一个小车自己 ...
运用百度地图API离线版（在线版）实现网管系统中终端定位和终端信息获取的功能...
一.了解百度地图API 1.百度地图JavaScript API简介百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口,可在网站中构建功能丰富.交互性强的地图应用 ...

百度地图API常规应用十功能

百度地图API 常规应用十功能总结功能一：获取map地图窗口的可视区域：

百度地图API常规应用十功能相关推荐

最新文章

热门文章