百度地图定位接入（在线版

百度地图定位接入（在线版）

1、导入地图的js连接

<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=qnwMAeEIwDh2LYxZSpdwgX"></script>

2、导入地图div

<div id="map" class="panel panel-default" style="height: 800px; margin-top: 0px;"></div>

3、实现地图显示

<script th:inline="javascript" type="text/javascript">
        var map;
        $(function () {
        	// 定义一个地图入口
            map = new MapInit();
        });
        //实现地图
        var MapInit = function () {
	        var map = new BMap.Map("map");
	        // 定位坐标（经纬度）
	        var centerPoint = new BMap.Point(106.991761,26.460632);
	        // 初始化地图,设置中心点坐标和地图级别。
	        map.centerAndZoom(centerPoint, 15);
	        // 启用滚轮放大缩小
	        map.enableScrollWheelZoom(true);
	        // 向地图中添加缩放控件
	        var ctrlNav = new window.BMap.NavigationControl({
	            anchor: BMAP_ANCHOR_TOP_LEFT,
	            type: BMAP_NAVIGATION_CONTROL_LARGE
	        });
	        map.addControl(ctrlNav);
	        // 向地图中添加比例尺控件
	        var ctrlSca = new window.BMap.ScaleControl({
	            anchor: BMAP_ANCHOR_TOP_LEFT
	        });
	        map.addControl(ctrlSca);
	        return map;
	    };
    </script>

4、查询数据库数据进行定位

$.ajax({
     type: "get",
     url: url,
     data: { username: username,date: date},// 条件，列如查询时间。具体根据数据库里面进行定义
     success: function (data) {
       drawUserLocation(data.result);// 返回的数据传入如下方法。
     }
 });
 // 绘制位置（根据返回数据中的坐标进行定位绘制）
    function drawUserLocation(userList) {
        $.each(userList, function (index, obj) {
            var point = new BMap.Point(obj.lon, obj.lat);// lon,lat,是数据库中的经纬度字段。
            map.centerAndZoom(point, 15);
            // 标记点，鼠标点击定位图标时显示的定位信息。
            var marker = new BMap.Marker(point);
            marker.userId = obj.id;
            marker.username = obj.Name;
            marker.addTime = obj.Address;
            marker.contact = obj.phone;
            marker.areaName = obj.areaName;
            marker.addEventListener('click', function (e) {
                var opts = {
                    width: 250, // 信息窗口宽度
                    height: 120, // 信息窗口高度
                };
                var html = '';
                html += '<div><b>编号：</b>' + e.target.userId + '</div>';
                html += '<div><b>名称：</b>' + e.target.username + '</div>';
                html += '<div><b>联系电话：</b>' + e.target.contact + '</div>';
                html += '<div><b>行政区域：</b>' + e.target.areaName + '</div>';
                html += '<div><b>地址：</b>' + e.target.addTime + '</div>';
                var info = new BMap.InfoWindow(html, opts);  // 创建信息窗口对象
                map.openInfoWindow(info, point); // 打开信息窗口，百度地图定义方法
            });
            map.addOverlay(marker);
        });
    }