百度地图显示当前位置及位置信息

最新推荐文章于 2023-09-11 16:02:47 发布

斌道天下

最新推荐文章于 2023-09-11 16:02:47 发布

阅读量1w

点赞数 5

分类专栏： web前端文章标签：关于我们地图定位

本文链接：https://blog.csdn.net/vipbin520/article/details/81298197

版权

web前端专栏收录该内容

19 篇文章 1 订阅

订阅专栏

网页中一般都有关于我们这个模块，关于我们中调用百度地图API做的公司地址及信息展示。

<!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>

斌道天下

关注

5
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
百度地图显示当前位置及位置信息

网页中一般都有关于我们这个模块，关于我们中调用百度地图API做的公司地址及信息展示。&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script type=&qu
复制链接

扫一扫