需求
java后台异步传查询数据库中的多个地区经纬度，地图动态展示出来。
数据
代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>智新年票综合管理系统</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<jsp:include page="include/css.jsp"/>
<style>
html, body, #container {
height: 100%;
width: 100%;
}
.amap-icon img{
width: 25px;
height: 34px;
}
</style>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<jsp:include page="include/header.jsp"/>
<jsp:include page="include/sider.jsp">
<jsp:param name="menu" value="map"/>
</jsp:include>
<div class="content-wrapper">
<section class="content">
<div class="box">
<div class="box-header with-border">
<h3 class="box-title">地图展示</h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip"
title="Collapse">
<i class="fa fa-minus"></i></button>
<button type="button" class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove">
<i class="fa fa-times"></i></button>
</div>
</div>
<div class="box-body">
<div class="input-card" style="display: none;">
<h4>地图自适应</h4>
<input id="setFitView" type="button" class="btn" value="地图自适应显示" />
</div>
<div id="container" style="width: 1070px;height:500px;" class="center-block"></div>
<div class="info">
<div id="centerCoord"></div>
<div id="tips"></div>
</div>
</div>
</div>
</section>
</div>
<jsp:include page="include/footer.jsp"></jsp:include>
</div>
<jsp:include page="include/js.jsp"></jsp:include>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=0f6eb4c67d25f56e944caafeb67d9dc3"></script>
<script>
var map = new AMap.Map('container', {
resizeEnable: true,
center: [116.397428, 39.90923],
zoom: 13
});
map.clearMap(); // 清除地图覆盖物
var markers = [];
$.ajax({
url:'/list',
type: "GET",
async: false, //设置为同步请求
success: function (data) {
if (data.state == "success") {
var json = data.data;
for(var i = 0; i < json.length; i++){
var store = json[i];
var j = i+1;
markers.push({icon:'//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-'+ j + '.png',position:[store.storeLongitude,store.storeLatitude]});
}
// markers = [{
// icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-1.png',
// position: [116.205467, 39.907761]
// }, {
// icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-2.png',
// position: [116.368904, 39.913423]
// }, {
// icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-3.png',
// position: [116.305467, 39.807761]
// }];
console.log(markers);
} else {
layer.msg(data.message);
}
},
error: function () {
layer.msg("系统异常");
}
});
/*
var markers = [{
icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-1.png',
position: [116.205467, 39.907761]
}, {
icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-2.png',
position: [116.368904, 39.913423]
}, {
icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-3.png',
position: [116.305467, 39.807761]
}];
*/
// 添加一些分布不均的点到地图上,地图上添加三个点标记，作为参照
markers.forEach(function(marker) {
new AMap.Marker({
map: map,
icon: marker.icon,
position: [marker.position[0], marker.position[1]],
offset: new AMap.Pixel(-13, -30)
});
});
var center = map.getCenter();
var centerText = '当前中心点坐标：' + center.getLng() + ',' + center.getLat();
document.getElementById('centerCoord').innerHTML = centerText;
document.getElementById('tips').innerHTML = '11111111！';
// 添加事件监听, 使地图自适应显示到合适的范围
AMap.event.addDomListener(document.getElementById('setFitView'), 'click', function() {
var newCenter = map.setFitView();
document.getElementById('centerCoord').innerHTML = '当前中心点坐标：' + newCenter.getCenter();
document.getElementById('tips').innerHTML = '通过setFitView，地图自适应显示到合适的范围内,点标记已全部显示在视野中！';
});
$(document).ready(function(){
$("setFitView").trigger("click")//自动实现点击
// $("#setFitView").load("");//load加载
document.getElementById('setFitView').click();
});
</script>
</body>
</html>
效果展示
问题汇总
js数组循环赋值
markers.push
ajax无法给全局变量赋值
在ajax中是无法给js中的全局变量赋值的，因为ajax默认是异步请求（当要赋值时，此时的值没有拿到，所以赋值不成功）。例如：
function test(){
var result=0;
$.ajax({
type: "POST",
url: "ajax/checkfor1.php?action=reg_checkEmail",
data: {email:email},
dataType: 'text',
success: function(data){
results=data;
},
error: function() {
alert("异常！");
}
});
}
执行时会发现赋不进去值
解决办法1：将ajax请求设置为同步请求
function test(){
var result=0;
$.ajax({
type: "POST",
url: "ajax/checkfor1.php?action=reg_checkEmail",
data: {email:email},
dataType: 'text',
async: false, //设置为同步请求
success: function(data){
results=data;
},
error: function() {
alert("异常！");
}
});
}
解决办法2：不使用js全局变量存数据而是用隐藏的html标签存数据
function test(){
var result=0;
$.ajax({
type: "POST",
url: "ajax/checkfor1.php?action=reg_checkEmail",
data: {email:email},
dataType: 'text',
success: function(data){
$('#datastore').append('<div data='+data+'></div>');//使用一个div标签，定义一个自定义属性data来存储数据
},
error: function() {
alert("异常！");
}
});
}
加载多个markers无法显示图标
大量图标应采用加载海量点API
https://lbs.amap.com/api/javascript-api/example/marker/massmarks
自动添加点击事件
$(document).ready(function(){
// $("#setFitView").load("");//load加载
document.getElementById('setFitView').click();
});
参考：
https://lbs.amap.com/api/javascript-api/example/marker/adaptive-show-multiple-markers
扫一扫
608
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
