整理毕设-百度地图添加可拖拽点+信息窗口提交表单

实现效果：

点击地图某一处添加一个可拖拽点并弹出信息窗口，可在该窗口展示一个表单。

实现

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
 <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" />
 <style type="text/css">
  html{height:100%}
  body{height:100%;margin:0px;padding:0px}
  #allmap{width: 100%;height: 100%;}
  #winContent{width:950px}
  .second,.third,.forth,.fifth{
            display: none;
        }
        #cont{
         width: 100%;height: 100%;
        }
        #sub{width: 100px;margin-top: 25px}
 </style>
 <script type="text/javascript" src="/gradesign/js/jquery-3.3.1.min.js"></script>
 <script type="text/javascript" src="/gradesign/js/bootstrap.min.js"></script>
 <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=XXX"></script>
 <script type="text/javascript" src="/gradesign/js/bootstrap-datetimepicker.min.js" charset="UTF-8"></script>
 <script type="text/javascript" src="/gradesign/js/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
 <title>BaiduMap</title>
</head>
<body>
 <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
 <div id="cont">
  <div id="allmap"></div>
 </div>
 
</body>

<script type="text/javascript">
 $(function(){
 });
 // 百度地图API功能
 var map = new BMap.Map("allmap");    // 创建Map实例
 var gc = new BMap.Geocoder();
 // 初始化地图,设置中心点坐标和地图级别
 map.centerAndZoom(new BMap.Point(118.723572,32.211126), 15);  
 //鼠标放大缩小地图
 map.enableScrollWheelZoom(true)
 //地图样式
 var mapStyle={style:"mapbox"};
 map.setMapStyle(mapStyle);
 //map.setCurrentCity("南京"); // 仅当设置城市信息时，MapTypeControl的切换功能才能可用   
 //浏览器定位
 var geolocation = new BMap.Geolocation();
 geolocation.getCurrentPosition(function(r){
  if(this.getStatus() == BMAP_STATUS_SUCCESS){
   var pt = r.point;
   x = r.point.lng;
      y = r.point.lat;
   gc.getLocation(pt,function(rs){
    var addComp = rs.addressComponents;//获取省市区号
    map.centerAndZoom(addComp.city, 13);  
    map.setCurrentCity(addComp.city);
   });
   
  }
  else{
   alert(this.getStatus());
   alert("系统错误，请联系管理员");
  }
 },{enableHightAccuracy:true});
 
 //定义一个控件类
 function ZoomControl(){
  this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;  //anchor表示控件停靠在地图的哪个角
  this.defaultOffset = new BMap.Size(100,20);  //提供偏移量，用来指示控件距离地图边界相隔多少像素。 
 } 
 //通过JS的prototype属性继承BMap.Control
 ZoomControl.prototype = new BMap.Control();
 //自定义控件必须实现自己的init方法，并将控件的DOM元素返回
 //该方法中创建div元素作为控件容器，并添加到地图容器中
 ZoomControl.prototype.initialize = function(map){
  //创建一个DOM元素
  var div = document.createElement("div");
  div.innerHTML = '<div class="col-sm-3"><div class="input-group"><input type="text" id="address" class="form-control" placeholder="搜索地点" /><a class="clear"></a>'+
  '<span class="input-group-btn"><button class="btn btn-default" type="button" οnclick=" choose()">GO!</button></span></div></div>';
  map.getContainer().appendChild(div);
  return div;
 }
 //创建控件
 var myZoom = new ZoomControl();
 //添加到地图中
 map.addControl(myZoom);
 map.addControl(new BMap.NavigationControl());
 map.addControl(new BMap.OverviewMapControl());
 //百度地图自动完成搜索
 var ac = new BMap.Autocomplete({
  "input" : "address",
  "location" : map
 });
  
 
 var myValue;
 //点击下拉列表中的事件
 function choose(){
  myValue = $("#address").val();
  function myFun(){
   var pp = local.getResults().getPoi(0).point;
   map.centerAndZoom(pp,18);
   //map.addOverlay(new BMap.Marker(pp));  //添加标注
  };
  var local = new BMap.LocalSearch(map,{
   onSearchComplete : myFun
  });
  local.search(myValue);
 }
 ac.addEventListener("onconfirm",function(e){
  var _value = e.item.value;
  myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
  G("@[[剛[XIN	N]]Y	NY	\NKY^Q]Y[YLHINIX[\N^U\SX[	幥+X[	N	N]\N^U\Q]Z[KXX]\	\IN^	Y	N^S\]Z[	X\N+鹠I]]N	N]\N]\NKY[YLX[N^U\	!X[	]\IN^	Y	N^U\	\NKXX\NN	N]]\NKY[YLX[N\`	X[	]\IN^	Y	N\\NKXX\N`	]N	N]\NKY[YL]\IN]Y	NX\N\[X\IXNXZ]

I	]]]I]N\[	N	NKH	NK]N]	NN	N]X\
JNX\	N]X\X\
N9b&!X\\[JN
NX\X\\^\N!zfi9g,9f"`9"z)X\Y\^JX\Nl!!9b,9g,9f+BX\[XQY[N.#yc幢\\QY[N!y9c\[[	N]X\[[[
Nb&khBX\[[[[[N\	N]X\\
N][[[\[N[Y\	N[K]N	
	Y\[
Y\NJBX\\[JN
NJN	NKH	NK]N]	NN	N]X\
JNX\\[JN
N[[Y
^]\[Y[[[Y[RY
Y
NN[[X
^[[^Q[
^\	N[\K
KX\\[JN
NN\[	N]X\[\X\\\]H^Q[JN[\^U[YJNB[[X\
H	
	N^Q]IN]][Y\X\[Y	NPNZ\K^PK]]HK^RYYK\Y]Z[Y]\^RYYYBJNB[[XX[
H	
	N^Q]IN[
	N\	[	OO