码迷,mamicode.com
首页 > Web开发 > 详细

JS实现HTML地图定位

时间:2015-07-20 23:46:57      阅读:222      评论:0      收藏:0      [点我收藏+]

标签:js地图   html地图   地图定位   js定位   js案例   

分享知识传递快乐

废话不多说,直接看代码:

HTML:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>百度地图</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
<script type="text/javascript">
        function load() {
            var map = new BMap.Map("container");
            var point = new BMap.Point(113.67312,34.758085); //默认中心点
            var marker = new BMap.Marker(point);
            var opts = {
                width: 250,     // 信息窗口宽度  
                height: 100,     // 信息窗口高度  
                //title: "信息窗口标题"  // 信息窗口标题  
            }
			
			// 创建窗口信息对象。
            //var infoWindow = new BMap.InfoWindow("这里显示提示信息", opts);


            marker.enableDragging(); //启用拖拽
            marker.addEventListener("dragend", function (e) {
                point = new BMap.Point(e.point.lng, e.point.lat); //标记坐标(拖拽以后的坐标)
                marker = new BMap.Marker(point);

                document.getElementByIdx_x("lng").value = e.point.lng;
                document.getElementByIdx_x("lat").value = e.point.lat;
                infoWindow = new BMap.InfoWindow("当前位置<br />经度:" + e.point.lng + "<br />纬度:" + e.point.lat, opts);

                map.openInfoWindow(infoWindow, point);
            })

            map.addControl(new BMap.NavigationControl()); //左上角控件
            map.enableScrollWheelZoom(); //滚动放大
            map.enableKeyboard(); //键盘放大

            map.centerAndZoom(point, 13); //绘制地图
            map.addOverlay(marker); //标记地图

			// 打开信息窗口,infoWindow是创建窗口信息对象的信息
            //map.openInfoWindow(infoWindow, map.getCenter());
			
			// 打开信息窗口
			map.openInfoWindow(map.getCenter());
        }
         
</script>
<style type="text/css">
	html{height: 100%;}
	body{height: 50%;margin: 0px;padding: 0px;}
	#container{width:550px;height: 460px;}
</style>
</head>
<body onload="load()">
    <div id="container"></div>
</body>
</html>


版权声明:本文为博主原创文章,未经博主允许不得转载。

JS实现HTML地图定位

标签:js地图   html地图   地图定位   js定位   js案例   

原文地址:http://blog.csdn.net/xhaimail/article/details/46972505

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!