百度地图API使用-初涉
百度地图API使用-初涉
原创地址：https://blog.csdn.net/QQ826688096/article/details/89113966
注册百度开发者平台
这几天接到个需求，就是给app端签到后的数据，在查看的时候进行位置的重定位。我一听，好高大上的感脚啊，我就研究了下，嗨，竟然研究了一上午，发现了不少新鲜东西，特记录一下下，给大家捋一下思路。
注册百度开发者平台账号
1 打开百度，然后按下图操作：
2 点击“申请密钥”后，会让你输入你的真实姓名等基本信息，如实输入后，会出现下面界面，创建一个AK：
注意：
1） 应用名称：这个名称就是用来给你自己记录一下，申请的这个AK的值，是用于哪个项目的，方便你自己记录和辨别，因为你可以申请很多个AK值。当你申请了多个后，会有一个AK的列表。
2） 应用类型：这里因为我是网站类型的，所以这里必须选择“浏览器端”。当你不选择浏览器端的时候，系统会给你一些提示的，建议一定要多看看。
3） Referer白名单：这里是以后部署完项目后，那些访问地址可以访问你这个AK值，只有在这个白名单里面的IP地址值才可以访问，其他的都会返回错误信息。这里因为我是测试，所以我写了192.168.1.111，因为这是我个人电脑IP地址。当部署到正式地址后，需要类似于后缀名似的模糊地址，下图：
点击确定，AK列表
进入开发者模式
这时候，把鼠标移到当前页面最上方的“开发文档”页签上：
然后，选择 “JavaScript API”
然后，点击 “DEMO详情”
百度开放的N多 开发者案例
就会看到下面这界面，全是案例：
你也可以这样
访问：http://lbsyun.baidu.com/
然后，往下拖动，看到下面这里：
这几个都是很有用的功能，可以直接拿到简单的百度地图的api代码，教你如何使用。
我的成功案例
这里，我给你一个我个人实现的成功案例。（给定几个地址后，我会在页面生成地图，并标记出地图的位置来）：
Jsp代码：
<%@ page language="java" isELIgnored="false"
contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
#mapdiv{width:100%;height:500px;}
p{margin-left:5px; font-size:14px;}
/*隐藏百度地图的版权信息*/
.anchorBL{
display:none;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的AK值"></script>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<title>百度地图ApiDemo</title>
</style>
</head>
<body>
<div id="mapdiv" style="width: 50%; float: right;">
<!-- 【这里是展示百度地图的body】 -->
</div>
</body>
</html>
<script type="text/javascript">
//百度地图API功能
// 创建Map实例
map = new BMap.Map("mapdiv");
// 初始化地图,设置中心点坐标和地图级别
map.centerAndZoom(new BMap.Point(116.21645635689414, 40.2217235498323), 17);
// 添加带有定位的导航控件
var navigationControl = new BMap.NavigationControl({
// 靠左上角位置
anchor : BMAP_ANCHOR_TOP_LEFT,
// LARGE类型
type : BMAP_NAVIGATION_CONTROL_LARGE,
// 启用显示定位
enableGeolocation : true
});
map.addControl(navigationControl);
// 设置地图显示的城市 此项是必须设置的
map.setCurrentCity("北京");
/** 开启鼠标滚轮缩放 2019-4-8 11:16:04*/
map.enableScrollWheelZoom(true);
var data_info = [
//[116.417854,39.921988,"地址：北京市东城区王府井大街88号乐天银泰百货八层"],
//[116.406605,39.921585,"地址：北京市东城区东华门大街"],
//[116.412222,39.912345,"地址：北京市东城区正义路甲5号"]
];
/*
1.通过Ajax方式从后台获取地址信息
2.通过接口Api，将地址信息转化为图标
3.在前台通过坐标进行定位
4.将地址信息转化为坐标实例
访问URL:http://api.map.baidu.com/geocoder/v2/?output=json&ak=你从百度申请到的Key&address=北京市
*/
$(function() {
var url1 = "<%=request.getContextPath()%>/api/getAddress";
$.ajax(url1, {
async : false,
success : function(data) {
$.each(data, function(i, v) {
var url = "http://api.map.baidu.com/geocoder/v2/";
$.ajax(url, {
data : {
'address' : v.address,
'output' : 'json',
'ak' : '你的AK值'
},
async : false,
dataType : 'jsonp',
crossDomain : true,
success : function(data) {
data_info.push([ data.result.location.lng, data.result.location.lat, v.name + "：" + v.address ]);
for (var i = 0; i < data_info.length; i++) {
map.centerAndZoom(new BMap.Point(data_info[i][0], data_info[i][1]), 18);
// 创建标注
var marker = new BMap.Marker(new BMap.Point(data_info[i][0], data_info[i][1]));
var content = data_info[i][2];
map.addOverlay(marker); // 将标注添加到地图中
addClickHandler(content, marker);
//跳动的动画
marker.setAnimation(BMAP_ANIMATION_BOUNCE);
}
}
});
});
}
});
});
var opts = {
width : 250, // 信息窗口宽度
height : 80, // 信息窗口高度
title : "位置信息", // 信息窗口标题
enableMessage : true //设置允许信息窗发送短息
};
function addClickHandler(content, marker) {
marker.addEventListener("click", function(e) {
openInfo(content, e)
}
);
}
function openInfo(content, e) {
var p = e.target;
var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
var infoWindow = new BMap.InfoWindow(content, opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow, point); //开启信息窗口
}
</script>
jsp中关键的一点是，已入百度的api
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的AK值"></script>
然后就是地图需要一个HTML元素作为容器，这样才能展现到页面上。这里我们创建了一个div元素，名字随便取了一个：mapdiv
后台对应的java代码：
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
/**
* @方法描述 百度地图接口使用规则
* @初次开发 平传胜
* @开发日期 2019年4月8日下午12:52:17
*/
@Controller
@RequestMapping("/api")
public class ApiController {
/**
* 百度地图接口（访问应用AK：你的AK值）
* http://api.map.baidu.com/geocoder/v2/?address=北京市海淀区上地十街10号&output=json&ak=你的AK值&callback=showLocation
*/
@RequestMapping("/apishow")
public String apiShow(HttpServletRequest request, HttpServletResponse response) throws Exception {
System.out.println("进入百度地图api的测试案例页面");
return "baiduApi/baiduapi";
}
/**
* @方法描述 获取指定数据的定位信息
* @初次开发 平传胜
* @开发日期 2019年4月8日下午3:42:54
*/
@RequestMapping("/getAddress")
@ResponseBody
public List<Map<String,String>> getAddress() throws Exception {
List<Map<String,String>> list=new ArrayList<Map<String,String>>();
Map<String,String> map3=new HashMap<String,String>();
map3.put("name","平传胜");
map3.put("address","北京市海淀区知春路29号院-8号楼");
list.add(map3);
return list;
}
}
结果如下图：
图中的红点是会跳动的哦~
写的匆忙，日后修改。
好了，先写到这里。
2019-04-08 22:31:49
写博客，除了方便他人提升自己外，更多的是为了在将来回头看自己写的博客时回味一下当时奋斗的心情。
