java百度地图的使用
引入百度地图
在html引入百度地图
<#include "${rc.contextPath}/view/baiduMap/showBasestationMap.html"/>下面是需要引入的百度地图官方的html与js
showBasestationMap.html
<!DOCTYPE html>
<html>
<head>
<#include "${rc.contextPath}/view/common/header.html"/>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>鼠标拾取地图坐标</title>
<style type="text/css">
#myPageTop {
position: absolute;
top: 0px;
left: 10px;
background: #fff none repeat scroll 0 0;
border: 1px solid #ccc;
margin: 10px auto;
padding:6px;
font-family: "Microsoft Yahei", "微软雅黑", "Pinghei";
font-size: 14px;
}
#myPageTop label {
margin: 0 20px 0 0;
color: #666666;
font-weight: normal;
}
#myPageTop input {
width: 170px;
}
#myPageTop .column2{
padding-left: 25px;
}
</style>
<script type="text/javascript" src="${rc.contextPath}/view/baiduMap/js/showBasestationMap.js" charset="utf-8"></script>
</head>
<body>
<div id="cardMap" style="position: relative;">
<!-- <div class="Bmap_tit" style=""><i>-</i>地图定位</div> -->
<!-- <span id="sureLocation" style="display:inline-block; padding: 0px 5px; height:18px; line-height:18px; border-radius:2px; border:1px #306C98 solid; margin-left:10px; color:#ffffff; background:#306C98; margin-top:-24px; margin-left:100px;">确认定位</span> -->
<div id="allmap" style="height:490px;"></div>
<div id="myPageTop">
<table>
<tr>
<td>
<label>按关键字搜索：</label>
</td>
<td class="column2">
<label>左击获取经纬度：</label>
</td>
</tr>
<tr>
<td>
<input type="text" placeholder="请输入关键字进行搜索" id="tipinput">
</td>
<td class="column2">
<input type="text" readonly="true" id="lnglat">
</td>
</tr>
</table>
</div>
<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
</div>
</body>
</html>showBasestationMap.js
// 百度地图API功能
$(function(){
loadScript();
})
function loadScript() {
var script = document.createElement("script");
script.src = "http://api.map.baidu.com/api?v=2.0&ak=PNhhMFEMvIgiZ8LO09zFNeBd3pHtnM7r&callback=initialize";
document.body.appendChild(script);
}
function initialize(){
var map = new BMap.Map("allmap"); // 创建Map实例
map.centerAndZoom(new BMap.Point(116.397428,39.90923), 16); // 初始化地图,设置中心点坐标和地图级别
map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
// map.setCurrentCity("西安"); // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
function G(id) {
return document.getElementById(id);
}
var ac = new BMap.Autocomplete({ //建立一个自动完成的对象
"input" : "tipinput",
"location" : map
});
ac.addEventListener("onhighlight", function(e) { //鼠标放在下拉列表上的事件
var str = "";
var _value = e.fromitem.value;
var value = "";
if (e.fromitem.index > -1) {
value = _value.province + _value.city + _value.district + _value.street + _value.business;
}
str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
value = "";
if (e.toitem.index > -1) {
_value = e.toitem.value;
value = _value.province + _value.city + _value.district + _value.street + _value.business;
}
str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
G("searchResultPanel").innerHTML = str;
});
var myValue;
ac.addEventListener("onconfirm", function(e) { //鼠标点击下拉列表后的事件
var _value = e.item.value;
myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
setPlace();
});
function setPlace(){
map.clearOverlays(); //清除地图上所有覆盖物
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);
}
map.addEventListener("click",function(e){
document.getElementById("lnglat").value = e.point.lng + ',' + e.point.lat;
$("input[name='x']").val(e.point.lng);
$("input[name='y']").val(e.point.lat);
});
debugger;
mapLocation(map);
}
function mapLocation(map) {
debugger;
var x = $("input[name='x']").val();
var y = $("input[name='y']").val();
if (x != "" && y != "") {
//建立坐标点：
// lng：经度 lat：纬度
var points = [
{"lng":x,"lat":y,"url":"http://www.baidu.com","id":1,"name":"p1"},
];
addMarker(points,map);
}
}
//创建标注点并添加到地图中
function addMarker(points,map) {
//循环建立标注点
for(var i=0, pointsLen = points.length; i<pointsLen; i++) {
var point = new BMap.Point(points[i].lng, points[i].lat); //将标注点转化成地图上的点
// var marker = new BMap.Marker(point); //将点转化成标注点
var myIcon = new BMap.Icon(CONTEXT_PATH + "/view/basestation/normal/images/zx.png", new BMap.Size(300,157)); //定义自己的标注
var marker = new BMap.Marker(point,{icon:myIcon});
map.addOverlay(marker); //将标注点添加到地图上
marker.setAnimation(BMAP_ANIMATION_BOUNCE);
marker.enableDragging(); //设置其可拖拽
marker.addEventListener("dragend", function(e){
layer.confirm('是否更改为当前地址？', { btn: ['是','否'] //按钮
}, function() {
document.getElementById("lnglat").value = e.point.lng + ',' + e.point.lat;
$("input[name='x']").val(e.point.lng);
$("input[name='y']").val(e.point.lat);
layer.closeAll('dialog');
});
});
//添加监听事件
(function() {
var thePoint = points[i];
marker.addEventListener("click",
//显示信息的方法
function() {
showInfo(this,thePoint);
});
})();
}
}
function showInfo(thisMarker,point) {
//获取点的信息
var sContent =
'<ul style="margin:0 0 5px 0;padding:0.2em 0">'
+'<li style="line-height: 26px;font-size: 15px;">'
+'<span style="width: 50px;display: inline-block;">id：</span>' + point.id + '</li>'
+'<li style="line-height: 26px;font-size: 15px;">'
+'<span style="width: 50px;display: inline-block;">名称：</span>' + point.name + '</li>'
+'<li style="line-height: 26px;font-size: 15px;"><span style="width: 50px;display: inline-block;">查看：</span><a href="'+point.url+'">详情</a></li>'
+'</ul>';
var infoWindow = new BMap.InfoWindow(sContent); //创建信息窗口对象
thisMarker.openInfoWindow(infoWindow); //图片加载完后重绘infoWindow
}