Web开发整合百度地图

最新推荐文章于 2024-05-08 21:39:03 发布

宏辉

最新推荐文章于 2024-05-08 21:39:03 发布

阅读量691

点赞数 2

分类专栏： java开发技巧集锦文章标签： sdk web java mybatis

本文链接：https://blog.csdn.net/weixin_42914989/article/details/113481786

版权

java开发技巧集锦专栏收录该内容

27 篇文章 1 订阅

订阅专栏

Web开发整合百度地图

百度地图开放平台

1.申请Baidu map AK

点击标题超链接进入申请AK界面，填写以下信息

应用名称
应用类型
Referer白名单

2.获取百度地图AK

点击标题超链接进入我的应用界面，复制申请好的AK，注意：Web开发请选择浏览器端类型的应用类别。
在这里插入图片描述

3.示例中心

点击标题超链接进入百度地图示例中心
在这里插入图片描述
此页面有大量参考示例，接下开的开发大家可以参照百度地图示例中心给出的demo进行拓展。

4.一个小demo

在idea中新建一个html文件
填写AK后用浏览器打开html，能显示出地图则说明AK申请成功

在这里插入图片描述

倘若出现以下报错提示信息，说明密钥填写错误。
在这里插入图片描述
先从以下三个方面检查：

检查密钥应用类型
白名单是否填写成 *
密钥是否复制正确

三个方面均确认无误后，若访问html仍无法正常显示百度地图，还有一个可能是百度服务器还没通过用户密钥申请，请过几个小时后再次尝试（本人遇到的就是这种情况🙈）

5.以黑马项目一为例整合百度地图

本次黑马项目添加了现实百度地图功能，用户在在生成出口报单的时候会显示出对应报单的航线。

先上效果图：
在这里插入图片描述

点击提交后显示航线地图
在这里插入图片描述

前端jsp

请添加AK密钥

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!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" />
    <title>添加弧线</title>
    <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=你的密钥"></script>
    <script type="text/javascript" src="//api.map.baidu.com/library/CurveLine/1.5/src/CurveLine.min.js"></script>
    <style type="text/css">
        html,body{
            width:100%;
            height:100%;
            margin:0;
            overflow:hidden;
            font-family:"微软雅黑";
        }
    </style>
    <script src="${ctx}/plugins/jQuery/jquery-2.2.3.min.js"></script>
</head>
<body>
<div style="width:100%;height:100%;border:1px solid gray" id="container"></div>
<input type="hidden" id="shipmentW" value="${shipment.wei}">
<input type="hidden" id="shipmentJ" value="${shipment.jing}">
<input type="hidden" id="destinationW" value="${destination.wei}">
<input type="hidden" id="destinationJ" value="${destination.jing}">
</body>
</html>
<script type="text/javascript">
    let sw = $("#shipmentW").val();
    let sj = $("#shipmentJ").val();
    let dw = $("#destinationW").val();
    let dj = $("#destinationJ").val();
    // 百度地图API功能
    var map = new BMap.Map("container");
    map.centerAndZoom(new BMap.Point(118.454, 32.955), 6);
    map.enableScrollWheelZoom();
    var beijingPosition=new BMap.Point(sj,sw),
        hangzhouPosition=new BMap.Point(dj,dw);
        /*taiwanPosition=new BMap.Point(121.491121,25.127053);*/
    var points = [beijingPosition,hangzhouPosition];

    var curve = new BMapLib.CurveLine(points, {strokeColor:"blue", strokeWeight:3, strokeOpacity:0.5}); //创建弧线对象
    map.addOverlay(curve); //添加到地图中
    curve.enableEditing(); //开启编辑功能
</script>

controller层

package cn.itcast.web.controller.map;

import cn.itcast.domain.city.City;
import cn.itcast.service.cargo.CityService;
import cn.itcast.web.controller.BaseController;
import com.alibaba.dubbo.config.annotation.Reference;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
@RequestMapping("/map")
public class MapController extends BaseController {

    @Reference
    private CityService cityService;

    @RequestMapping("/toView")
    public String  toView() throws Exception {//装运港和目标港口
        String shipmentPort = (String) session.getAttribute("shipmentPort");
        String destinationPort = (String) session.getAttribute("destinationPort");

        City shipment = cityService.findLocation(shipmentPort);
        City destination = cityService.findLocation(destinationPort);

        request.setAttribute("shipment",shipment);
        request.setAttribute("destination",destination);
        return "/city/city";
    }
}

service层

接口

package cn.itcast.service.cargo;

import cn.itcast.domain.city.City;
import org.springframework.core.codec.EncodingException;

import java.io.UnsupportedEncodingException;

public interface CityService {
    //根据城市名查询经纬度
    City findLocation(String cityName) throws Exception;
}

实现类

package cn.itcast.service.cargo.impl;

import cn.itcast.dao.city.CityDao;
import cn.itcast.domain.city.City;
import cn.itcast.domain.city.CityExample;
import cn.itcast.service.cargo.CityService;
import com.alibaba.dubbo.config.annotation.Service;
import org.springframework.beans.factory.annotation.Autowired;

import java.io.UnsupportedEncodingException;
import java.net.URLDecoder;
import java.util.List;

@Service
public class CityServiceImpl implements CityService {

    @Autowired
    private CityDao cityDao;

    @Override
    public City findLocation(String cityName) throws Exception {
        CityExample cityExample = new CityExample();
        cityExample.createCriteria().andCityEqualTo(cityName);
        List<City> cities = cityDao.selectByExample(cityExample);
        City city = cities.get(0);
        return city ;
    }
}

dao层

接口

package cn.itcast.dao.city;

import cn.itcast.domain.city.City;
import cn.itcast.domain.city.CityExample;

import java.util.List;

public interface CityDao {
    /**
     * This method was generated by MyBatis Generator.
     * This method corresponds to the database table city
     *
     * @mbg.generated
     */
    int insert(City record);

    /**
     * This method was generated by MyBatis Generator.
     * This method corresponds to the database table city
     *
     * @mbg.generated
     */
    int insertSelective(City record);

    /**
     * This method was generated by MyBatis Generator.
     * This method corresponds to the database table city
     *
     * @mbg.generated
     */
    List<City> selectByExample(CityExample example);
}

映射xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="cn.itcast.dao.city.CityDao">
  <resultMap id="BaseResultMap" type="cn.itcast.domain.city.City">
    <!--
      WARNING - @mbg.generated
      This element is automatically generated by MyBatis Generator, do not modify.
    -->
    <result column="city" jdbcType="VARCHAR" property="city" />
    <result column="jing" jdbcType="VARCHAR" property="jing" />
    <result column="wei" jdbcType="VARCHAR" property="wei" />
  </resultMap>
  <sql id="Example_Where_Clause">
    <!--
      WARNING - @mbg.generated
      This element is automatically generated by MyBatis Generator, do not modify.
    -->
    <where>
      <foreach collection="oredCriteria" item="criteria" separator="or">
        <if test="criteria.valid">
          <trim prefix="(" prefixOverrides="and" suffix=")">
            <foreach collection="criteria.criteria" item="criterion">
              <choose>
                <when test="criterion.noValue">
                  and ${criterion.condition}
                </when>
                <when test="criterion.singleValue">
                  and ${criterion.condition} #{criterion.value}
                </when>
                <when test="criterion.betweenValue">
                  and ${criterion.condition} #{criterion.value} and #{criterion.secondValue}
                </when>
                <when test="criterion.listValue">
                  and ${criterion.condition}
                  <foreach close=")" collection="criterion.value" item="listItem" open="(" separator=",">
                    #{listItem}
                  </foreach>
                </when>
              </choose>
            </foreach>
          </trim>
        </if>
      </foreach>
    </where>
  </sql>
  <sql id="Base_Column_List">
    <!--
      WARNING - @mbg.generated
      This element is automatically generated by MyBatis Generator, do not modify.
    -->
    city, jing, wei
  </sql>
  <select id="selectByExample" parameterType="cn.itcast.domain.city.CityExample" resultMap="BaseResultMap">
    <!--
      WARNING - @mbg.generated
      This element is automatically generated by MyBatis Generator, do not modify.
    -->
    select
    <if test="distinct">
      distinct
    </if>
    <include refid="Base_Column_List" />
    from city
    <if test="_parameter != null">
      <include refid="Example_Where_Clause" />
    </if>
    <if test="orderByClause != null">
      order by ${orderByClause}
    </if>
  </select>
  <insert id="insert" parameterType="cn.itcast.domain.city.City">
    <!--
      WARNING - @mbg.generated
      This element is automatically generated by MyBatis Generator, do not modify.
    -->
    insert into city (city, jing, wei
      )
    values (#{city,jdbcType=VARCHAR}, #{jing,jdbcType=VARCHAR}, #{wei,jdbcType=VARCHAR}
      )
  </insert>
  <insert id="insertSelective" parameterType="cn.itcast.domain.city.City">
    <!--
      WARNING - @mbg.generated
      This element is automatically generated by MyBatis Generator, do not modify.
    -->
    insert into city
    <trim prefix="(" suffix=")" suffixOverrides=",">
      <if test="city != null">
        city,
      </if>
      <if test="jing != null">
        jing,
      </if>
      <if test="wei != null">
        wei,
      </if>
    </trim>
    <trim prefix="values (" suffix=")" suffixOverrides=",">
      <if test="city != null">
        #{city,jdbcType=VARCHAR},
      </if>
      <if test="jing != null">
        #{jing,jdbcType=VARCHAR},
      </if>
      <if test="wei != null">
        #{wei,jdbcType=VARCHAR},
      </if>
    </trim>
  </insert>
</mapper>

domain

package cn.itcast.domain.city;

import java.io.Serializable;

public class City implements Serializable {
    /**
     *
     * This field was generated by MyBatis Generator.
     * This field corresponds to the database column city.city
     *
     * @mbg.generated
     */
    private String city;

    /**
     *
     * This field was generated by MyBatis Generator.
     * This field corresponds to the database column city.jing
     *
     * @mbg.generated
     */
    private String jing;

    /**
     *
     * This field was generated by MyBatis Generator.
     * This field corresponds to the database column city.wei
     *
     * @mbg.generated
     */
    private String wei;

    /**
     * This method was generated by MyBatis Generator.
     * This method returns the value of the database column city.city
     *
     * @return the value of city.city
     *
     * @mbg.generated
     */
    public String getCity() {
        return city;
    }

    /**
     * This method was generated by MyBatis Generator.
     * This method sets the value of the database column city.city
     *
     * @param city the value for city.city
     *
     * @mbg.generated
     */
    public void setCity(String city) {
        this.city = city == null ? null : city.trim();
    }

    /**
     * This method was generated by MyBatis Generator.
     * This method returns the value of the database column city.jing
     *
     * @return the value of city.jing
     *
     * @mbg.generated
     */
    public String getJing() {
        return jing;
    }

    /**
     * This method was generated by MyBatis Generator.
     * This method sets the value of the database column city.jing
     *
     * @param jing the value for city.jing
     *
     * @mbg.generated
     */
    public void setJing(String jing) {
        this.jing = jing == null ? null : jing.trim();
    }

    /**
     * This method was generated by MyBatis Generator.
     * This method returns the value of the database column city.wei
     *
     * @return the value of city.wei
     *
     * @mbg.generated
     */
    public String getWei() {
        return wei;
    }

    /**
     * This method was generated by MyBatis Generator.
     * This method sets the value of the database column city.wei
     *
     * @param wei the value for city.wei
     *
     * @mbg.generated
     */
    public void setWei(String wei) {
        this.wei = wei == null ? null : wei.trim();
    }
}