标签：function 知识点 控件 map value 实用性 BMap new 百度
如何获取百度地图并添加组件功能
添加的cordova插件：cordova plugin add cordova-plugin-geolocation,获取设备位置信息。
一、注册百度账号并获取密钥
- 在html中采用
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=密钥">在这里插入代码片
二、html文件代码
- 代码为：
<div id="container"></div> //添加容器存放地图及控件
<div>请输入查询地址：<input type="text" id="suggestId" size="20" value="百度"/></div> //添加一个地址搜索框
<div id="searchResultPanel"></div> //从查找结果中挑选地址
三、css文件代码
- 代码为：
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:66.6%}
#searchResultPanel{border:1px solid #C0C0C0;width:150px;height:auto; display:none;}
四、js文件代码
- 代码为：
document.addEventListener("deviceready",onDeviceReady,false);
function onDeviceReady(){
console.log("ready...");
getPosition(); //获取位置信息
}
var map = new BMap.Map("container"); // 创建地图
function getPosition(){
console.log("getPosition...");
if(navigator.geolocation){ //判断是否支持地理定位
navigator.geolocation.getCurrentPosition(showPosition,function Error(error)
{enableHighAccuracy=true,//是否要求高精度的地理位置信息
timeout=1000,//对地理位置信息的获取操作做超时限制，如果再该事件内未获取到地理位置信息，将返回错误
maximumAge=60*1000//设置缓存有效时间，在该时间段内，获取的地理位置信息还是设置此时间段之前的那次获得的信息，超过这段 时间缓存的位置信息会被废弃
}
//方式二：
//function (error) { //传入了error对象
// alert(error.code);}
//error对象的code属性有如下属性值:
//PERMISSION_DENIED(1):(permission_denied):用户单机信息条上的“不共享”按钮或直接拒绝被获取位置信息
//POSITION_UNAVAILABLE(2):(position_unavailable):(position_unavailable)网络不可用或者无法连接到获取位置信息的卫星
//TIMEOUT(3):(timeout)网络可用但在计算机用户的位置上花费过长时间
//UNKNOWN_ERROR(0):(unknown_error)发生其他未知错误
)
}else{
alert("您当前使用的浏览器不支持地理定位服务");
}
}
function showPosition(position){
console.log("showPosition...");
var ggPoint = new BMap.Point(position.coords.longitude,position.coords.latitude);// 创建点坐标
map.centerAndZoom(ggPoint,18); // 初始化地图，设置中心点坐标和地图级别
drawMap();
transPosition(ggPoint);
drawPolygon();
}
function transPosition(ggPoint){
console.log("transPosition...");
var ggPoint=ggPoint;
translateCallback=function (data){
if(data.status===0) {
console.log("translate...");
var marker = new BMap.Marker(data.points[0]); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
var label = new BMap.Label("当前位置",{offset:new BMap.Size(20,-10)});
marker.setLabel(label);// //添加百度label
map.setCenter(data.points[0]); //缩放级别范围0到17
}
}
setTimeout(function(){
console.log("setTimeout...");
var convertor = new BMap.Convertor();
var pointArr = [];
pointArr.push(ggPoint);
convertor.translate(pointArr, 1, 5, translateCallback)
}, 1000);
}
function drawPolygon(){ //自定义一块区域，可用作类似手机定位考勤
console.log("drawPolygon...");
var ploygon=new BMap.Polygon([
new BMap.Point(113.485485,23.107374),
new BMap.Point(113.485435,23.106929),
new BMap.Point(113.486046,23.106813),
new BMap.Point(113.4861,23.107345)
],{strokeColor:"blue",stokeWeight:2,strokeOpacity:0.5});
map.addOverlay(ploygon);
}
function drawMap(){
addApi(); 添加地图api
addMapControl(); 添加控件
}
function addMapControl(){
console.log("addMapControl...");
map.addControl(new BMap.NavigationControl({
//type: BMAP_NAVIGATION_CONTROL_LARGE, //表示显示完整的平移缩放控件。
//type: BMAP_NAVIGATION_CONTROL_SMALL, //表示显示小型的平移缩放控件。
//type: BMAP_NAVIGATION_CONTROL_PAN, //表示只显示控件的平移部分功能。
//type: BMAP_NAVIGATION_CONTROL_ZOOM, //表示只显示控件的缩放部分功能。
anchor: BMAP_ANCHOR_TOP_LEFT, //表示控件定位于地图的左上角。
//anchor: BMAP_ANCHOR_TOP_RIGHT, //表示控件定位于地图的右上角。
//anchor: BMAP_ANCHOR_BOTTOM_LEFT, //表示控件定位于地图的左下角。
//anchor: BMAP_ANCHOR_BOTTOM_RIGHT, //表示控件定位于地图的右下角。
})); //设置地图平移缩放控件，PC端默认位于地图左上方type控件外观,anchor控件的停靠位置,offset偏移的位置
map.setCurrentCity("广州"); // 仅当设置城市信息时，MapTypeControl的切换功能才能可用
map.addControl(new BMap.MapTypeControl({
//type: BMAP_MAPTYPE_CONTROL_HORIZONTAL,//按钮水平方式展示，默认采用此类型展示。
//type: BMAP_MAPTYPE_CONTROL_DROPDOWN,//按钮呈下拉列表方式展示。
//type: BMAP_MAPTYPE_CONTROL_MAP//以图片方式展示类型控件，设置该类型后无法指定maptypes属性。
mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP] }));
//设置地图类型控件,type控件样式,mapTypes控件展示的地图类型，默认为普通图、卫星图、卫星加路网混合图和三维图。通过此属性可配置控件展示的地图类型。
map.addControl(new BMap.OverviewMapControl({
isOpen: true,
anchor: BMAP_ANCHOR_BOTTOM_RIGHT
}));//设置地图类型控件缩略地图控件，默认位于地图右下方,isOpen缩略图是否隐藏
map.addControl(new BMap.ScaleControl());//设置比例尺控件
}
function addApi(){ // 百度地图API功能，实现了搜索与搜索得到地点信息
console.log("addApi...");
function G(id){return document.getElementById(id);}
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,
renderOptions:{map: map} //将检索结果展示在地图上
});
local.search(myValue);
}
}
- 小建议：大家在编程时，尽量多的添加console.log("");函数，方便调试，快速让自己发现问题所在。
- 大家觉得还可以，有帮助的话，请 关注 下新人我哦，我将继续努力，更多的让你们受益。
标签：function,知识点,控件,map,value,实用性,BMap,new,百度 来源： https://blog.csdn.net/weixin_44228861/article/details/89067081
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。