百度地图定位描点

<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<meta charset="utf-8">
<head th:include="include :: header"></head>
<link th:href="@{/ajax/libs/jquery-ztree/3.5/css/metro/zTreeStyle.css}" rel="stylesheet"/>
<style type="text/css">
	body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";font-family:"微软雅黑";}
	#allmap{width:100%;height:96%;}
	p{margin-left:5px; font-size:14px;}
    /*下面的是地图*/
    #auxiliary {
        z-index: 100;
        position: fixed;
        right: 1px;
        top: 8%;
        background-color: transparent;
        margin-top: -30px;
    }
    #allmap {position:relative}
</style>

<body>
<input id="province" name="province"   type="hidden">
<input id="city" name="city"   type="hidden">
<input id="district" name="district"  type="hidden">
<input id="street" name="street"  type="hidden">
<input id="streetNumber" name="streetNumber"  type="hidden">
<div id="auxiliary" style="float:right">
    <ul>
        <input id="cityName" type="text" placeholder="请输入关键字查询" style="width:200px; margin-right:10px;" />
        <input type="button" value="查询" onclick="theLocation()" style="margin-right: 8px;"  />
    </ul>
</div>
<div id="allmap"></div>
<div id="r-result">
    <div class="optionpanel">
        <label>选择主题</label>
        <select id="stylelist" onchange="changeMapStyle(this.value)"></select>
        <!--<input id="cityName" type="text" placeholder="请输入关键字查询" style="width:200px; margin-right:8px;" />
        <input type="button" value="查询" onclick="theLocation()" />-->
    </div>

</div>
<!--<button type="button" onclick="select()" class="btn btn-info btn-sm">确认</button>-->
<div th:include="include::footer"></div>
<script th:src="@{/ajax/libs/jquery-ztree/3.5/js/jquery.ztree.all-3.5.js}"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=33xRhx4OGGTpIV1zEkCjyBgbYGyzgsz2"></script>
<script type="text/javascript" src="http://lbsyun.baidu.com/custom/stylelist.js"></script>
<script type="text/javascript">
		// 百度地图API功能
    var longitude =  '[[${longitude}]]';
    var latitude = '[[${latitude}]]';

	var allmap = new BMap.Map("allmap");
	var geoc = new BMap.Geocoder();   //地址解析对象
	var mapStyle = {
		features: ["road", "building", "water", "land"],//隐藏地图上的poi
		style: "dark"  //设置地图风格为高端黑
	}
        allmap.setMapStyle(mapStyle);
   if(longitude!= null&&longitude != '' && latitude != null && latitude != '' ){
       allmap.centerAndZoom(new BMap.Point(longitude,latitude), 16);
       var pt = new BMap.Point(longitude, latitude);
       var myIcon = new BMap.Icon("/img/666.png", new BMap.Size(40, 40));
       var marker = new BMap.Marker(pt, {icon: myIcon});  // 创建标注
       allmap.addOverlay(marker);
    }else{
       allmap.centerAndZoom("德州",15);//这个地区是不能写死的
   }
	allmap.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用
	allmap.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用
	var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺
	var top_left_navigation = new BMap.NavigationControl();  //左上角，添加默认缩放平移控件
	allmap.addControl(top_left_control);
	allmap.addControl(top_left_navigation);
	var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {
		scale: 0.6,//图标缩放大小
		strokeColor:'#fff',//设置矢量图标的线填充颜色
		strokeWeight: '2',//设置线宽
	});
	var icons = new BMap.IconSequence(sy, '10', '30');
	var lng = "";
	var lat = "";
	function showInfo(e){
        geoc.getLocation(e.point, function (rs) {
            var addComp = rs.addressComponents;
            console.log(addComp);
            $("#province").val(addComp.province);
            $("#city").val(addComp.city);
            $("#district").val(addComp.district);
            $("#street").val(addComp.street);
            $("#streetNumber").val(addComp.streetNumber);
            var address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
            console.log(address);
        });
		allmap.clearOverlays();
		lng = e.point.lng;
		lat = e.point.lat;
		var pt = new BMap.Point(e.point.lng, e.point.lat);
		var myIcon = new BMap.Icon("/img/666.png", new BMap.Size(40, 40));
		var marker = new BMap.Marker(pt, {icon: myIcon});  // 创建标注
		allmap.addOverlay(marker);
	}
	allmap.addEventListener("click", showInfo);


        //初始化模板选择的下拉框
        var sel = document.getElementById('stylelist');
        for(var key in mapstyles){
            var style = mapstyles[key];
            var item = new  Option(style.title,key);
            sel.options.add(item);
        }
        changeMapStyle('midnight')
        sel.value = 'dark';
        function changeMapStyle(style){
            allmap.setMapStyle({style:style});
            $('#desc').html(mapstyles[style].desc);
        }
    function theLocation(){
        var local = new BMap.LocalSearch(allmap, {
            renderOptions:{map: allmap}
        });
        console.log($("#cityName").val());
        local.search($("#cityName").val());
    }
</script>
</body>
</html>
百度地图定位描点

猜你喜欢
