百度地图开发(功能有:标注地点;定位本机等)
来源:互联网 发布:淘宝黄金戒指 编辑:程序博客网 时间:2024/06/05 03:16
1.开发百度地图先去他们的官网申请密钥
下面有道通往百度地图的传送门,申请密钥也方便快捷
传送门
2.百度地图开发方面,demo级别的话,需要三个步骤:
2.0.首先引入百度js,这里需要密钥 : <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=FtppmMikPUX6swgTT3L75eKXX6j1ZsRC"></script>
2.1.设置地图样式(不设置,就不会显示)
<style type="text/css">
body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
#allmap{width:100%;height:100%;}
p{margin-left:5px; font-size:14px;}
</style>
2.2.body内设置div来接收地图
<div id="allmap"></div>
2.3.js才是重头戏
<script type="text/javascript">
var map = new BMap.Map("allmap");
var geoc = new BMap.Geocoder(); // 手动点击位置
var markersArray = [];
// var geolocation = new BMap.Geolocation();
var initjd="112.508074";
var initwd="23.056833";
var companyjd= "${dz.zbjd}";
var companywd="${dz.zbwd}";
if (companyjd !== null || companyjd !== undefined || companyjd !== '') {
var point = new BMap.Point(companyjd, companywd); //创地图对象,设置上已经添加的经纬度
map.centerAndZoom(point,20); // 初始化地图
addMarker(point); //标注初始化经纬度
}
if(companyjd == null || companyjd == undefined || companyjd == ''){
var point = new BMap.Point(initjd, initwd); //创地图对象,设置上已经添加的经纬度
map.centerAndZoom(point,20); // 初始化地图
addMarker(point); //标注初始化经纬度
}
map.enableScrollWheelZoom(true); //滚动条
var mk = new BMap.Marker(point); // 制作标注,maker是addOverlay的属性
map.addOverlay(mk); // 固定原本标签
map.addEventListener("click", showInfo);
//点击地图时间处理
function showInfo(e) {
document.getElementById('jd').value = e.point.lng; //经度的赋值
document.getElementById('wd').value = e.point.lat; //维度的赋值
geoc.getLocation(e.point, function (rs) {
var addComp = rs.addressComponents;
var address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
if (confirm("确认:地址为" + address + "?")) {
}
});
addMarker(e.point);
}
//清除标识
function clearOverlays() {
if (markersArray) {
for (i in markersArray) {
map.removeOverlay(markersArray[i])
}
}
}
//地图上标注
function addMarker(point) {
var marker = new BMap.Marker(point);
markersArray.push(marker);
clearOverlays();
map.addOverlay(marker);
}
// 地图定位功能
// 添加带有定位的导航控件
var navigationControl = new BMap.NavigationControl({
// 靠左上角位置
anchor: BMAP_ANCHOR_TOP_LEFT,
// LARGE类型
type: BMAP_NAVIGATION_CONTROL_LARGE,
// 启用显示定位
enableGeolocation: true // 会多出一个点
});
map.addControl(navigationControl);
// 添加定位控件
var geolocationControl = new BMap.GeolocationControl();
geolocationControl.addEventListener("locationSuccess", function(e){
// 定位成功事件
var address = '';
address += e.addressComponent.province;
address += e.addressComponent.city;
address += e.addressComponent.district;
address += e.addressComponent.street;
address += e.addressComponent.streetNumber;
alert("当前定位地址为:" + address);
});
geolocationControl.addEventListener("locationError",function(e){
// 定位失败事件
alert(e.message);
});
map.addControl(geolocationControl);
</script>
一个地图功能就ok了。
献上图片
- 百度地图开发(功能有:标注地点;定位本机等)
- 百度地图开发之获取定位地点
- 安卓开发——判断本机是否安装有某应用(qq、微信、百度地图等)
- Android Studio地图开发之根据地点查找、定位(百度地图API)
- 百度地图开发-添加图文的标注功能
- Android:使用百度地图SDK定位当前具体位置(类似QQ发表说说的选择地点功能)
- ndroid:使用百度地图SDK定位当前具体位置(类似QQ发表说说的选择地点功能)
- 百度地图-定位功能
- 百度地图定位功能
- 百度地图定位功能
- 百度地图 定位功能
- 百度地图定位功能
- 安卓开发使用百度地图sdk实现定位,添加marker,城市切换等功能
- 百度地图自定义标注物+自动定位
- 百度地图打标展示地点分布图 ,如何利用百度地图API进行标注
- 百度地图定位开发
- D3js-地图中标注地点
- 百度地图加入html页面(有标注,滚轮等控制事件)
- 基于51单片机矩阵键盘程序
- kaggle之泰坦尼克号
- DevOps 初学者宝典
- 运用java.net.HttpURLConnection实现java多线程下载文件
- 1662 家庭问题
- 百度地图开发(功能有:标注地点;定位本机等)
- bootstrap轮播图无法居中的处理方式
- 51单片机-1602液晶显示的时钟代码
- textrank提取文档关键词
- hwfh项目, 第二天
- Leetcode 97Interleaving String
- C++实现单链表
- 杭电acm—2137 circumgyrate the string
- C++中声明与定义的关系