这篇博客介绍了如何通过网页实现百度地图与高德地图的坐标转换，以及如何在地图上显示标记点和封闭区域。首先展示了一个取经纬度的页面，使用百度地图API获取坐标并转为高德地图格式存储。接着，展示了显示地图的页面，利用高德地图API将之前获取的标记点和区域显示出来。文中还提供了用于坐标转换和地图操作的相关JS方法。
直接上代码
先编写一个取经纬度页面(该页面使用的是百度地图坐标转高德地图坐标)，将得到的经纬度存到数据库等待使用：
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<title>根据地址查询经纬度</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
</head>
<body style="background:#CBE1FF">
<form class="layui-form my-form-class">
<div style="width:745px;margin:auto;">
要查询的地址：
市：<input id="city" type="text" th:value="${city}"/>
区域：<input id="text_" type="text" th:value="${positionName}"/>
<input type="button" value="查询" onclick="searchStationName();"/>
<br>
查询结果(经纬度)：<input id="result_" type="text" th:value="${position}"/>
<div id="container"
style="position: absolute;
margin-top:30px;
width: 600px;
height: 500px;
top: 50;
border: 1px solid gray;
overflow:hidden;">
</div>
</div>
<div class="form-inline my-page-btn" style="padding-left: 120px;">
<button lay-submit type="button" id="sure" lay-filter="sure" class="btn btn-default btn-sm btnMargin"><img
src="/images/tick.png"/>确定
</button>
<button type="button" id="close" class="btn btn-default btn-sm btnMargin"><img src="/images/cancel.png"/>关闭
</button>
</div>
</form>
</body>
<div th:include="include :: footer"></div>
<script type="text/javascript">
var points = null;
var map = new BMap.Map("container");
map.centerAndZoom("北京", 12);//这里是初始地图所显示的城市
map.enableScrollWheelZoom(true); //启用滚轮放大缩小，默认禁用
map.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用
map.addControl(new BMap.NavigationControl()); //添加默认缩放平移控件
map.addControl(new BMap.OverviewMapControl()); //添加默认缩略地图控件
var localSearch = new BMap.LocalSearch(map);
localSearch.enableAutoViewport(); //允许自动调节窗体大小
var showArea = function (city, area) {
queryHouse(area, city, "填你自己的百度密钥", function (data) {
if (data.message == 'ok') {
var houses = data.results;
if (houses && houses.length > 0) {
var house = houses[0];
queryHouseOutline(house.uid, function (houseOutline) {
var geo = houseOutline.content.geo;
var geoObj = parseGeo(geo);
points = coordinateToPoints(map, geoObj.points);//得到该区域封闭区域的所有经纬度
//console.log(points[0].lng+"-"+points[0].lat);
});
}
}
});
};
function searchStationName() {
showArea($("#city").val(), $("#text_").val());
map.clearOverlays();//清空原来的标注
var keyword = document.getElementById("text_").value;
localSearch.setSearchCompleteCallback(function (searchResult) {
var poi = searchResult.getPoi(0);
//将百度坐标转换成高德坐标
var bdDecrypt = bd_decrypt(poi.point.lng,poi.point.lat);
document.getElementById("result_").value = bdDecrypt.lng + "," + bdDecrypt.lat;//将标记点经纬度显示在文本框
map.centerAndZoom(poi.point, 17);
var marker = new BMap.Marker(new BMap.Point(poi.point.lng, poi.point.lat)); //创建标注点
map.addOverlay(marker);
var content = document.getElementById("text_").value + "<br/><br/>经度：" + poi.point.lng + "<br/>纬度：" + poi.point.lat;
var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>" + content + "</p>");
marker.addEventListener("click", function () {
this.openInfoWindow(infoWindow);
});
// marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
});
localSearch.search(keyword);
}
searchStationName();
layui.use(['form', 'layer', 'jquery'], function () {
var form = layui.form
, layer = layui.layer,
$ = layui.jquery;
;
var index = parent.layer.getFrameIndex(window.name);
$("#close").click(function () {
parent.layer.close(index); //再执行关闭
});
$("#sure").click(function () {
var arr = [];
for (p in points) //将多个点循环存入数组，得到polygon面
{
if(typeof(points[p].lng) != "undefined"){
//将百度坐标转换成高德坐标
var bdDecrypt = bd_decrypt(points[p].lng,points[p].lat);
arr.push(bdDecrypt.lng+" "+bdDecrypt.lat);
}
}
var positionName = $("#city").val() + "-" + $("#text_").val();
var position = $("#result_").val();
//将得到的值传到父页面(此页面为子页面)
$("#position", window.parent.frames[0].document).val(position);
$("#positionName", window.parent.frames[0].document).val(positionName);
$("#polygon", window.parent.frames[0].document).val(arr);
parent.layer.close(index);
});
})
</script>
</html>编写显示地图页面，将标记点和封闭区域显示出来：
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en" th:include="include :: header">
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"/>
<link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>
<title></title>
<style type="text/css"></style>
<title>地图</title>
</head>
<body>
<div class="demo_main">
<div style="min-height: 700px; width: 100%;" id="map">
</div>
<div id="myPageTop">
<table>
<tr>
<td>
<label>请输入关键字：</label>
</td>
</tr>
<tr>
<td>
<input id="tipinput" autocomplete="off"/>
</td>
</tr>
</table>
</div>
</div>
<div th:include="include :: footer"></div>
<script type="text/javascript"
src="https://webapi.amap.com/maps?v=1.4.15&key=你的高德密钥&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script>
<script th:inline="javascript">
var markerArrs = [[${allSmallArea}]];
var markerArr = JSON.parse(markerArrs);//转成json数据格式
var map = new AMap.Map('map', {//设置地图中心点
center: [117.000923, 36.675807],
zoom: 11,
// pitch:75, // 地图俯仰角度，有效范围 0 度- 83 度
// viewMode:'3D' // 地图模式
});
AMap.plugin('AMap.ToolBar', function () {//启用滚轮放大缩小
var toolbar = new AMap.ToolBar();
map.addControl(toolbar);
});
var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
for (var i = 0; i < markerArr.length; i++) { //多个构造点标记
var p;
var pos0 = markerArr[i].position.substring(6).split(" ")[0];
var pos1 = markerArr[i].position.substring(6).split(" ")[1].replace(')', '');
var marker = new AMap.Marker({
icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
position: [pos0, pos1],
map: map
});
addInfoWindow(markerArr[i]);
if (typeof (markerArr[i].polygon) != "undefined" || markerArr[i].polygon != null) { //显示多个封闭区域
p = markerArr[i].polygon.substring(9).replace("))","");
var points = coordinateToPointsByGD(map, p);
var polygon1 = new AMap.Polygon({
path: points,
strokeColor: 'red',
strokeWeight: 2,
fillOpacity: .5
});
map.add([polygon1]);
map.setFitView();
}
}
//点击标记点显示窗口信息
function addInfoWindow(poi) {
//窗口标题
var title = '<div style="font-weight:bold;color:#CE5521;font-size:14px">' + poi.haName + '</div>';
//窗口信息
var html = [];
html.push('<p style="font-size:12px;line-height:1.8em">' + "地址：" + poi.addr + "</br> 小区编号：" + poi.areaNo + '</br></p>');
marker.content = title + html;
marker.on('click', markerClick);
//marker.emit('click', {target: marker});//默认显示
}
function markerClick(e) {
infoWindow.setContent(e.target.content);
infoWindow.open(map, e.target.getPosition());
}
map.setFitView();
//输入提示
var autoOptions = {
input: "tipinput"
};
var auto = new AMap.Autocomplete(autoOptions);
var placeSearch = new AMap.PlaceSearch({
map: map
}); //构造地点查询类
AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发
function select(e) {
placeSearch.setCity(e.poi.adcode);
placeSearch.search(e.poi.name); //关键字查询查询
}
</script>
</body>
</html>下面是用到的js方法：
/**
* 模糊查询小区信息
* @param {} house 小区名称
* @param {} city 城市名称
* @param {} ak 百度地图ak
* @param {} callback 回调函数，该函数可以接收到请求的返回值
*/
var queryHouse = function (house, city, ak, callback) {
var baseURL = 'http://api.map.baidu.com/place/v2/search?output=json&scope=2';
var url = baseURL + "&q=" + house + "®ion=" + city + "&ak=" + ak;
callback && (window.queryHouseCallback = callback);
$.ajax({
type: "get",
async: false,
url: url,
dataType: "jsonp",
jsonpCallback: "queryHouseCallback",
success: function (datas) {
}
});
};
//地图相关(百度)
var queryHouseOutline = function (hid, callback) {
var baseURL = 'http://map.baidu.com/?reqflag=pcmap&coord_type=3&from=webmap&qt=ext&ext_ver=new&l=18';
var url = baseURL + "&uid=" + hid;
callback && (window.queryHouseOutlineCallback = callback);
$.ajax({
type: "get",
async: false,
url: url,
dataType: "jsonp",
jsonpCallback: "queryHouseOutlineCallback",
success: function (datas) {
}
});
};
//百度坐标转高德（传入经度、纬度）
function bd_decrypt(bd_lng, bd_lat) {
var X_PI = Math.PI * 3000.0 / 180.0;
var x = bd_lng - 0.0065;
var y = bd_lat - 0.006;
var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * X_PI);
var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * X_PI);
var gg_lng = z * Math.cos(theta);
var gg_lat = z * Math.sin(theta);
return {lng: gg_lng, lat: gg_lat}
}
//将拿到的经纬度字符串逗号分割并存入数组
var coordinateToPointsByGD = function (map, coordinate) {
var points = [];
if (coordinate) {
var arr = coordinate.split(",");
if (arr) {
for (var i = 0; i < arr.length; i++) {
var coord = arr[i].split(" ");
points.push(new AMap.LngLat(coord[0], coord[1]));
}
}
}
return points;
};效果演示：
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
