文档章节

百度地图显示我的位置

塔塔米
 塔塔米
发布于 05/26 15:25
字数 477
阅读 7
收藏 0
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
</head>
<body>
	<section class="LiKoH_contact">
		<div class="contact">
			<div class="contactmain" data-scroll-reveal="enter bottom over 1s and move 300px after 0.3s">
				<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=izKslMWQG7sLmlaG4UjUV90Z"></script>
			    <div id="l-map" style="width:1200px;height:500px;font-size:12px" ></div>
				<script type="text/javascript">
				var sContent ="<font color='#f10'>公司名称</font><br>地址:河南省郑州市XXX公司地址<br><br>邮编:450000<br><br>电话:400-000-000";
				var map = new BMap.Map("l-map");          			// 创建地图实例
				var point = new BMap.Point(113.728018,34.722804);  	// 创建点坐标
				map.centerAndZoom(point, 15);    
				map.enableScrollWheelZoom();             		// 初始化地图,设置中心点坐标和地图级别
 
				map.addControl(new BMap.NavigationControl());    
				map.addControl(new BMap.ScaleControl());    
				map.addControl(new BMap.OverviewMapControl());    
				map.addControl(new BMap.MapTypeControl());  
 
				var mapType1 = new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]});
				var mapType2 = new BMap.MapTypeControl({anchor: BMAP_ANCHOR_TOP_LEFT});
				var overView = new BMap.OverviewMapControl();
				var overViewOpen = new BMap.OverviewMapControl({isOpen:true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT});
				//添加地图类型和缩略图
 
				map.addControl(mapType1);     //2D图,卫星图
				map.addControl(mapType2);     //左上角,默认地图控件
				map.setCurrentCity("");    //由于有3D图,需要设置城市哦
				map.addControl(overView);     //添加默认缩略地图控件
				map.addControl(overViewOpen);   //右下角,打开
 
				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;
				});
				geolocationControl.addEventListener("locationError",function(e){
				// 定位失败事件
				alert(e.message);
				});
				map.addControl(geolocationControl);
 
				var infoWindow = new BMap.InfoWindow(sContent);  	// 创建信息窗口对象
				map.openInfoWindow(infoWindow,point); 				// 开启信息窗口
 
				var marker = new BMap.Marker(point,{icon:new BMap.Icon("http://api.map.baidu.com/lbsapi/createmap/images/icon.png",new BMap.Size(20,25),{
				  imageOffset: new BMap.Size(-46,-21)
				})});
				map.addOverlay(marker);                     		// 将标注添加到地图中
				marker.addEventListener("click", function(){        // 给标注添加点击事件
				   this.openInfoWindow(infoWindow);
				});
				</script>
			</div>
		</div>
	</section>
</body>
</html>

然后到百度家这里:http://api.map.baidu.com/lbsapi/getpoint/index.html

获取要显示的坐标,paste it into js。搞定收工。

转发的就没人给我打赏么?哈哈

本文转载自:https://blog.csdn.net/vipbin520/article/details/81298197

塔塔米
粉丝 11
博文 683
码字总数 19648
作品 0
朝阳
程序员
私信 提问
百度地图 尼玛

尼玛, 今天被百度地图坑坏了, 今天在着手测试一下百度地图的功能, 使用起来倒是也挺方便的, 和iOS官方的地图相比, 共有的功能都很类似, 只是百度地图比iOS系统自带的地图多了很多的功能, 还可...

hell03W
2016/03/18
109
2
百度地图SDK地图学习——实现定位功能

之前已经完成了百度地图SDK和百度定位SDK的配置。 http://my.oschina.net/u/1051634/blog/180880 实现百度定位的功能,最好仔细看看官方的文档,看了好几次才有点明白。 开发指南:http://de...

HenryHsu
2013/12/03
0
1
2017-04-23日志

1.百度地图定位时添加ip定位 2.解决不现实我的位置和油站位置两个按钮不显示的问题

test2013
2017/04/24
1
0
如何在网页中调用百度地图api

我想在木有提供地图接口的年代,前端工程师门要么只写上企业的具体地址,要么就是用一张标有自己位置的地图图片。但是现在不一样啦!为了增强用户体验,谷歌,甚至百度都很开放了,你可以在他...

Jokeny
2014/08/30
0
0
调用百度地图-带导航的百度地图

我想在木有提供地图接口的年代,前端工程师门要么只写上企业的具体地址,要么就是用一张标有自己位置的地图图片。但是现在不一样啦!为了增强用户体验,谷歌,甚至百度都很开放了,你可以在他...

羊皮卷
2016/04/09
135
1

没有更多内容

加载失败,请刷新页面

加载更多

06_CSS入门和高级技巧(4)

复习 CSS : 负责样式层,层叠式样式表cascading style sheet。CSS2.1,最新版本CSS3。 CSS选择器: 选择哪些元素加样式。基本选择3种:标签p、id选择器#id、class选择器.;高级选择器4种:后...

王裕杰
17分钟前
1
0
IT兄弟连 Java语法教程 变量2

变量的作用域和生命周期 到目前为止,使用的所有变量都是在main()方法开始时声明的,然而,Java允许在任何代码块(代码块以开花括号开始,以闭花括号结束)中声明变量,代码块定义了作用域。...

老码农的一亩三分地
54分钟前
3
0
OSChina 周二乱弹 —— 这份躺着挣钱的工作

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @巴拉迪维 :既然无法言说,不如一笑而过;既然无法释怀,不如安然自若。#今日歌曲推荐# 《Godi》- Lube 手机党少年们想听歌,请使劲儿戳(这...

小小编辑
今天
1K
21
Android沉浸式的两种方法

隐藏状态栏 一个Android应用程序的界面上其实是有很多系统元素的,观察下图: 而打造沉浸式模式的用户体验,就是要将这些系统元素全部隐藏,只留下主体内容部分。 怎么做呢,郭霖的一个Funct...

天王盖地虎626
今天
9
0
PostgreSQL build

https://buildfarm.postgresql.org/cgi-bin/show_log.pl?nm=lumpsucker&dt=2019-06-23%2020%3A57%3A27...

MtrS
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部