百度地图实现自定义搜索

最新推荐文章于 2022-11-14 09:58:24 发布

俏西郎

最新推荐文章于 2022-11-14 09:58:24 发布

阅读量800

点赞数

分类专栏： javaWeb

本文链接：https://blog.csdn.net/u012080132/article/details/42687661

版权

javaWeb 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

今天花了一天的时间仔细的写了一下百度地图的相关东西，拿出来和大家分享一下。

servlet（FindCity.java）

package edu.hpu.map.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import edu.hpu.map.dao.CitiesImp;
import edu.hpu.map.dao.InCities;
import edu.hpu.map.model.Cities;

public class FindCity extends HttpServlet {

   /**
   * The doGet method of the servlet. <br>
   *
   * This method is called when a form has its tag value method equals to get.
   *
   * @param request the request send by the client to the server
   * @param response the response send by the server to the client
   * @throws ServletException if an error occurred
   * @throws IOException if an error occurred
   */
   public void doGet(HttpServletRequest request, HttpServletResponse response)
           throws ServletException, IOException {
       doPost(request, response);
   }

   public void doPost(HttpServletRequest request, HttpServletResponse response)
           throws ServletException, IOException {
       request.setCharacterEncoding("utf-8");
       response.setCharacterEncoding("utf-8");
       PrintWriter out= response.getWriter();

       String city = request.getParameter("city");
       System.out.println(city);
       StringBuffer sb = new StringBuffer();
       InCities ic = new CitiesImp();
       List<Cities> list =ic.FindByCity(city);
       if(list != null){
           /*request.setAttribute("list", list);
           System.out.println("----"+list.size());
           request.getRequestDispatcher("index.jsp").forward(request, response);*/
           //用josn解析吧。

           sb.append("[");
              for(Cities ct : list){
                  sb.append("{");
                  sb.append("\"city\"").append(":\"").append(ct.getCity()).append("\",");
                  sb.append("\"park\"").append(":\"").append(ct.getPark()).append("\",");
                  sb.append("\"img\"").append(":\"").append(ct.getImg()).append("\",");
                  sb.append("\"address\"").append(":\"").append(ct.getAddress()).append("\",");
                  sb.append("\"coordinate\"").append(":\"").append(ct.getCoordinate()).append("\"");
                  sb.append("},");
              }
              sb.deleteCharAt(sb.length()-1);      //删掉最后一个逗号
              sb.append("]");

              /*request.setAttribute("sb",sb.toString());   //发送到网页端，用ajax接收
              request.getRequestDispatcher("/ajax.jsp").forward(request, response);*/
       }/*else{
           response.setContentType("text/html");

           out.println("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">");
           out.println("<HTML>");
           out.println(" <HEAD><TITLE>系统消息</TITLE></HEAD>");
           out.println(" <BODY>");
           out.print("    未导入相关停车场 ");
           out.println(" </BODY>");
           out.println("</HTML>");
           out.flush();
           out.close();
       }*/
       out.print(sb.toString());
   }

}
index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">


   <meta http-equiv="pragma" content="no-cache">
   <meta http-equiv="cache-control" content="no-cache">
   <meta http-equiv="expires" content="0">
   <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
   <meta http-equiv="description" content="This is my page">
   <script type="text/javascript" src="js/jquery-1.11.2.js"></script>
   <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=2zsUYzzWb7r8pUeHUCMmhLvD"></script>
   <link rel="stylesheet" type="text/css" href="css/Map.css">


   <script type="text/javascript" src="js/myMap.js"></script>
   <title>百度地图自定义搜索</title>
</head>
<body>
<form method="post">
      <label>
       <input type="text" id="address_1" style="width:100px" align="right" name="city"/>
      </label><input type="button" value="搜索" id="btn" />
</form >
    
<div id="Map_Content"></div>

</body>
</html>
js

$(function(){
      var sContent ;   //定义窗口内容
      var url ="showInfo.jsp";    //定义跳转界面
      //调用jquery的ajax与后天数据库进行交互，并得到返回的json数据
      $('#btn').click(function(){
          $.ajax({
              type:'POST',
              url:'FindCity',
              data:{
                       city: $("#address_1").val(),
                   },
           success:function(data){
                       var json=$.parseJSON(data);
                       $.each(json,function(index,val){
                           var place = val.address;
                           var img = val.img;
                           var park = val.park;
                           var x = val.coordinate.split(",")[0];   //将坐标截取出啦
                           var y = val.coordinate.split(",")[1];
                           sContent = "<div style=' background-color:#FFF000';><p style='margin:0;float:left'>"+park+"</p></div>"+
                               "<img style='float:right;margin:4px' id='imgDemo' src='"+img+"' width='139' height='104' title='天安门'/>"+
                               "<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>地点："+place+"<br/><a href='"+url+"'>查看详情</a></p>";
                           fun_geocoder_getPoint(place,x,y);
                       });
                   },
          });
      });
      //地址解析的函数
       function fun_geocoder_getPoint(place,x,y){
           var infoWindow = new BMap.InfoWindow(sContent); // 创建信息窗口对象
              var value_address_1 = document.getElementById("address_1").value;
              myGeo.getPoint(place,function(point){
                if (point) {
                   map.centerAndZoom(point, 15);
                   var point = new BMap.Point(x,y);
                   var marker = new BMap.Marker(point);
                    map.addOverlay(marker);
                    marker.addEventListener("click", function(){
                        this.openInfoWindow(infoWindow);
                        //图片加载完毕重绘infowindow
                        document.getElementById('imgDemo').onload = function (){
                            infoWindow.redraw();   //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
                        }
                    });
                }
              }, value_address_1);
          }
   //创建和初始化地图函数：
      function initMap(){
            createMap();//创建地图
            setMapEvent();//设置地图事件
            addMapControl();//向地图添加控件
        //    map.addEventListener("click", showInfo);
        }
      function showInfo(e){
           alert(e.point.lng + ", " + e.point.lat);
       }
        //创建地图函数：
        function createMap(){
            var map = new BMap.Map("Map_Content");//在百度地图容器中创建一个地图
            var point = new BMap.Point(121.409863,31.161258);//定义一个中心点坐标
            map.centerAndZoom(point,15);//设定地图的中心点和坐标并将地图显示在地图容器中
            window.map = map;//将map变量存储在全局
        }

        //地图事件设置函数：
        function setMapEvent(){
            map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
            map.enableScrollWheelZoom();//启用地图滚轮放大缩小
            map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
            map.enableKeyboard();//启用键盘上下左右键移动地图
        }

        //地图控件添加函数：
        function addMapControl(){
            //向地图中添加缩放控件
       var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
       map.addControl(ctrl_nav);
            //向地图中添加缩略图控件
       var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
       map.addControl(ctrl_ove);
            //向地图中添加比例尺控件
       var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
       map.addControl(ctrl_sca);
        }
        var myGeo = new BMap.Geocoder();
      initMap();//创建和初始化地图
});

俏西郎

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
百度地图实现自定义搜索

今天花了一天的时间仔细的写了一下百度地图的相关东西，拿出来和大家分享一下。servlet（FindCity.java）package edu.hpu.map.servlet;import java.io.IOException;import java.io.PrintWriter;import java.util.List;import javax.servlet.
复制链接

扫一扫