如何使用JS API进行基于LBS的开发

头像
张家阿婆   2021-09-18   7423浏览
已有61条回答
头像
注定孤独终X
2022-05-14

在开发移动端网页时,会遇到LBS的功能开发,利用第三方API是比较方便的。下面对百度地图的JS开发API应用做一些说明。
1.引入相关CSS文件和库文件
JavaScript API v1.4及以前版本无须申请密钥(ak),自v1.5版本开始需要先申请密钥(ak),才可使用,如需获取更高配额,请点击申请认证企业用户。
地址:;lt;br />//参数v表示您加载API的版本,使用JavaScript APIv1.4及以前版本可使用此方式引用。
;amp;ak=您的密钥
//使用JavaScript APIv2.0请先申请密钥ak,按此方式引用。



2.在html中创建地图部分的容器


3.开始实例化创建
//实例化一个地图对象,绑定id为allmap
var map = new BMap.Map("allmap");
//开放插件功能
map.enableScrollWheelZoom();//滚动缩放
map.addControl(new BMap.NavigationControl());//地图的平移缩放控件
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
map.addControl(new BMap.MapTypeControl());
map.addControl(new BMap.GeolocationControl());
// 功能
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
var myIcon = new BMap.Icon("s/markers.png", new BMap.Size(23, 25), { offset: new BMap.Size(23, 25), imageOffset: new BMap.Size(0, - 10 * 25) });
//位置图标,标注当前位置
var mk = new BMap.Marker(r.point,{icon: myIcon});
map.centerAndZoom(new BMap.Point(r.point.lng,r.point.lat), 14);
map.addOverlay(mk);
map.panTo(r.point);
//向地图中自定义地点图标方法
function addMarker(point,index,data){
var storeIcon = new BMap.Icon("s/markers.png", new BMap.Size(23, 25), {
offset: new BMap.Size(23, 25),
imageOffset: new BMap.Size(0, - index * 25)
});
//创建信息窗口
var messContent = '
' + '地址:'+data.address+'
电话:'+data.tel+ '
';
var searchInfoWindow = null;
searchInfoWindow = new BMapLib.SearchInfoWindow(map, messContent, {
title : data.name, //标题
width : 290, //宽度
height : 105, //高度
panel : "panel", //检索结果面板
enableAutoPan : true, //自动平移
searchTypes :[ BMAPLIB_TAB_SEARCH, //周边检索
BMAPLIB_TAB_TO_HERE, //到这里去
BMAPLIB_TAB_FROM_HERE //从这里出发
] });
var marker = new BMap.Marker(point,{icon: storeIcon});
marker.addEventListener("click", function(e){ searchInfoWindow.open(marker); })
map.addOverlay(marker);}
}else { alert('failed'+this.getStatus()); } },{enableHighAccuracy: true})

134

相关问题

如何使用python 开发一个api
fionazhang77 1970-01-01

如何使用ssci进行检索?
MyronKiven 1970-01-01

如何使用paperpass进行检测
真南真北 1970-01-01

如何用java开发基于jabber的IM软件
小琳子雄霸天下 1970-01-01

如何使用Emerald数据库进行搜索
欧阳安Muse 1970-01-01

课题:中美动画产业的发展与比较研究1.检索式2.在上述检索的基础上如果继续使用二次检索功能的其检索表达式:3 期刊范围

最新问答

排水论文在哪发?
伊兰0518 2021-09-19

小区市外排水论文发哪个杂志可以呢?我需要发表一篇这方面的论文。

word转pdf,为什么不显示图片图片?
花花的老妈 2021-09-19

我想把论文从word格式转换成PDF格式,用的金山WPS,可转换完成之后,里面的流程图就不见了,空白~~这是为什么呢?谁能帮我解决一下!谢谢!

公众号与小程序有什么区别
汤糖躺烫湯 2021-09-19

公众号与小程序有什么区别

如何制作电子小报
dream959595 2021-09-19

镀铬什么意思
autumngold 2021-09-19

镀铬什么意思

中国电影艺术的思想
幸福顺延 2021-09-19

中国针灸大纲作者是谁?
王子麻麻 2021-09-19

热门问答

排水论文在哪发?
伊兰0518 2021-09-19

小区市外排水论文发哪个杂志可以呢?我需要发表一篇这方面的论文。

word转pdf,为什么不显示图片图片?
花花的老妈 2021-09-19

我想把论文从word格式转换成PDF格式,用的金山WPS,可转换完成之后,里面的流程图就不见了,空白~~这是为什么呢?谁能帮我解决一下!谢谢!

公众号与小程序有什么区别
汤糖躺烫湯 2021-09-19

公众号与小程序有什么区别

如何制作电子小报
dream959595 2021-09-19

镀铬什么意思
autumngold 2021-09-19

镀铬什么意思

中国电影艺术的思想
幸福顺延 2021-09-19

中国针灸大纲作者是谁?
王子麻麻 2021-09-19

Coptyright © www.lw85.com电脑版