Create your Gitee Account
Explore and code with more than 12 million developers,Free private repositories !:)
Sign up
文件
This repository doesn't specify license. Please pay attention to the specific project description and its upstream code dependency when using it.
Clone or Download
jquerymap.html 13.29 KB
Copy Edit Raw Blame History
zhu.jianxin authored 2018-05-21 15:08 . add
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta charset="UTF-8">
<title>地图</title>
<link type="text/css" rel="stylesheet" href="css/style.css">
<script src="./js/jquery-1.12.4.min.js"></script>
<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&key=7LVBZ-LDH3S-PXSOG-6XRG5-APHYH-JVBIS&libraries=place"></script>
<script src="./js/template.js"></script>
</head>
<body >
<div id="search" style="display:none">
<span class="cancel">返回</span>
<input type="text" value="" id="text">
<span class="confirm">确认 </span>
</div>
<div id="container"></div>
<div class="btn-float">
<div class="lis"><img src="./images/lis.png" width="54" height="54"></div>
<div class="quy"><img src="./images/quy.png" width="54" height="54"></div>
<div class="defalut"><img src="./images/defalut.png" width="54" height="54"></div>
</div>
<div class="praylay" style="display: block;"></div>
<div class="ivu-modal">
<div class="ivu-modal-content">
<div class="ivu-modal-body">
<div class="ivu-modal-confirm">
<div class="ivu-modal-confirm-head">
<div class="ivu-modal-confirm-head-title">提示信息</div></div>
<div class="ivu-modal-confirm-body"><div>您还未登录,请先行登录!</div></div>
<div class="ivu-modal-confirm-footer">
<button type="button" class="ivu-btn ivu-btn-primary ivu-btn-large">确定</button>
</div>
</div>
</div>
</div>
</div>
<div class="ivu-modal-wrap" style="display: none">
<div class="ivu-modal">
<div class="ivu-modal-content">
<a href="javascript:;" class="ivu-modal-close"></a>
<div class="ivu-modal-header">
<p class="title">
<i class="ivu-icon ivu-icon-ios-paper"></i>
<span style="font-size: 20px;font-weight:600">地区列表</span>
</p>
</div>
<div class="ivu-modal-body">
<ul class="alist" id="Place">
</ul>
<script type="text/html" id="PlaceTpl">
{{each cityJson}}
{{if $value.type == 1}}
<li class="linkage cityactive" data-id="{{$value.id}}">{{$value.name}}</li>
{{else if $value.type == 2}}
<li class="linkage countactive" data-id="{{$value.id}}">{{$value.name}}</li>
{{else}}
<li data-id="{{$value.id}}">{{$value.name}}</li>
{{/if}}
{{/each}}
</script>
</div>
<div class="ivu-modal-footer"></div>
</div>
</div>
</div>
<div class="ele_intro_box">
<div class="ele_intro">
<em class="intro_close"></em>
<span class="intro_txt">该地块无养分数据</span>
<em class="intro_close2"></em>
</div>
</div>
<script>
//封装函数
//address:输入的地址;
//id:地图渲染的容器;
//key:你的秘钥;
var timerClass = 0;
function init(address,id,key){
$.ajax({
type:'get',
url:'http://apis.map.qq.com/ws/geocoder/v1/?address='+address+'&key='+key+'&output=jsonp',
dataType:'jsonp',
jsonp:'callback',
success:function(data) {
if(data.status == 0){
var posi=data.result.location;
var center = new qq.maps.LatLng(posi.lat,posi.lng);
var map = new qq.maps.Map(id,{
center: center,
zoom: 12
});
//实例化自动完成
var ap = new qq.maps.place.Autocomplete(document.getElementById('text'));
//调用Poi检索类。用于进行本地检索、周边检索等服务。
var searchService = new qq.maps.SearchService({
map : map
});
//添加监听事件
qq.maps.event.addListener(ap, "confirm", function(res){
searchService.search(res.value);
});
//调用地址解析类
geocoder = new qq.maps.Geocoder({
complete : function(result){
map.setCenter(result.detail.location);
var marker = new qq.maps.Marker({
map:map,
position: result.detail.location,
//设置Marker被添加到Map上时的动画效果为从天而降
animation:qq.maps.MarkerAnimation.DROP
});
}
});
// //文本标注
// var label = new qq.maps.Label({
// position: center,
// map: map,
// content:'文本标注'
// });
//创建marker
var marker = new qq.maps.Marker({
position: center,
map: map,
//animation: qq.maps.MarkerAnimation.BOUNCE
//设置Marker被添加到Map上时的动画效果为从天而降
animation:qq.maps.MarkerAnimation.DROP
//设置Marker被添加到Map上时的动画效果为落下
//animation:qq.maps.MarkerAnimation.DOWN
//设置Marker被添加到Map上时的动画效果为升起
//animation:qq.maps.MarkerAnimation.UP
});
//绑定单击事件添加参数
//var timer = null;
qq.maps.event.addListener(map, 'click', function(event) {
alert('您点击的位置为: [' + event.latLng.getLat() + ', ' + event.latLng.getLng() + ']');
// clearInterval(timer)
// timerClass++;
// var htmlIntor = '';
// htmlIntor +='<div class="ele_intro index_'+timerClass+'">';
// htmlIntor +=' <em class="intro_close"></em>';
// htmlIntor +=' <span class="intro_txt">该地块无养分数据</span>';
// htmlIntor +=' <em class="intro_close2"></em>';
// htmlIntor +='</div>';
// $('.ele_intro_box').append(htmlIntor)
// if(timer){
// return;
// }else{
// debounce(timerIntro(), 100);
// }
});
}else{
alert('出错了,请输入正确的地址!!!')
}
}
});
}
// function timerIntro(){
// var introBoxWidth = $('.ele_intro').outerWidth();
// timer = setInterval(function(){
// if($('.ele_intro').length !== 0){
// $('.ele_intro:first').stop().animate({'margin-left':introBoxWidth +'px'},500,function(){
// $(this).remove();
// });
// console.log('test');
// }else{
// clearInterval(timer)
// }
// },3000)
// }
// function debounce(fn, delay) { //滚动防抖动
// // debounce函数用来包裹我们的事件在事件触发的两秒后,我们包裹在debounce中的函数才会被触发
// // 持久化一个定时器 loadTimer
// var loadTimer = null;
// // 闭包函数可以访问 loadTimer
// return function() {
// // 通过 'this' 和 'arguments'
// // 获得函数的作用域和参数
// var context = this;
// var args = arguments;
// // 如果事件被触发,清除 loadTimer 并重新开始计时
// clearTimeout(loadTimer);
// loadTimer = setTimeout(function() {
// fn.apply(context, args);
// }, delay);
// }
// }
//回到原始位置函数
function codeAddress(parameter) {
//通过getLocation();方法获取位置信息值
geocoder.getLocation(parameter);
}
//点击事件
var condiv=document.getElementById('container');
//异步加载
window.onload=function() {
init('北京市朝阳区',condiv,'AJTBZ-W2MWK-WZHJT-AFN2S-ZKBVV-E7FCW');
$('.defalut').click(function(){
codeAddress('北京市朝阳区')
//init('北京市朝阳区北四环中路27号盘古大观写字楼A座17F',div1,'AJTBZ-W2MWK-WZHJT-AFN2S-ZKBVV-E7FCW');
});
//点击确认
$('.confirm').click(function(){
var txtAdress = $('#text').val();
codeAddress(txtAdress)
})
var cityJson = [
{
name: '打洛镇',
type: '1',
id: 1
}, {
name: '布郎和乡',
type: '1',
id: 2
}, {
name: '勐宋乡',
type: '1',
id: 3
}
];
var countyJson = [
{
name: '贺开村委会',
type: '2',
id: 11
}, {
name: '曼蚌村委会',
type: '2',
id: 22
}, {
name: '纳京河村委会',
type: '2',
id: 33
}
];
var villageJson = [
{
name: '贺开村',
type: '3',
id: 111
}, {
name: '曼蚌村',
type: '3',
id: 222
}, {
name: '纳京河村',
type: '3',
id: 333
}
];
//点击行政区域
$('.quy').click(function(){
event.preventDefault();
//做演示用,实际项目会有接口
$('#Place').html(template('PlaceTpl',{'cityJson':cityJson}))
//做演示用,实际项目会有接口end
getJson({
id:'',
type:''
},function(res){
console.log(res);
$('#Place').html(template('PlaceTpl',{'cityJson':data}))
})
$('.praylay').show();
$('.ivu-modal-wrap').show();
})
//点击每一个li
var cityTxt = '',
countTxt = '',
village = '';
$('body').on('click', '#Place li', function(event) {
event.preventDefault();
if($(this).hasClass('linkage')){
if($(this).hasClass('cityactive')){
//做演示用,实际项目会有接口
$('#Place').html(template('PlaceTpl',{'cityJson':countyJson}))
//做演示用,实际项目会有接口end
cityTxt = $(this).text();
console.log(cityTxt)
getJson({
id:'',
type:''
},function(res){
console.log(res);
$('#Place').html(template('PlaceTpl',{'cityJson':data}))
})
}else if($(this).hasClass('countactive')){
//做演示用,实际项目会有接口
$('#Place').html(template('PlaceTpl',{'cityJson':villageJson}))
//做演示用,实际项目会有接口end
countTxt = $(this).text();
console.log(countTxt)
getJson({
id:'',
type:''
},function(res){
console.log(res);
$('#Place').html(template('PlaceTpl',{'cityJson':data}))
})
}
} else {
village = cityTxt + countTxt + $(this).text();
console.log(village)
$('.praylay').hide();
$('.ivu-modal-wrap').hide();
codeAddress(village) //目前village获取数据是假的,可以用作 '北京市海淀区' 来做测试
}
});
//关闭地区弹窗
$('.ivu-modal-close').click(function(){
$('.praylay').hide();
$('.ivu-modal-wrap').hide();
})
//ajax接口地方
function getJson(json,callback){
$.ajax({
url: '/path/to/file',
type: 'default GET (Other values: POST)',
dataType: 'default: Intelligent Guess (Other values: xml, json, script, or html)',
data: json
})
.done(function(data) {
callback&&callback(data);
})
.fail(function() {
console.log("error");
})
}
//提示框3秒以后隐藏
function timerIntro(){
var timer = null;
var introBoxWidth = $('.ele_intro').outerWidth();
timer = setTimeout(function(){
$('.ele_intro').animate({'margin-left':introBoxWidth +'px'},500,function(){
$(this).remove();
});
},3000)
}
timerIntro()
}
</script>
</body>
</html>
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化