欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

table 切换地图

程序员文章站 2022-07-13 14:30:59
...
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=6Ig6mec2CoTQqMxMGZpRXajW"></script>
<script>
$(document).ready(function(){
//内容切换
$(".tablet li").click(function(){
var idx = $(this).index();
$(this).addClass("cur").siblings().removeClass("cur");
$(".servcont").eq(idx).addClass("cur").siblings(".servcont").removeClass("cur");
if(idx!=2){
return;
}
var map = new BMap.Map("allmap");
var point = new BMap.Point(116.401736,39.917462);
map.centerAndZoom(point,15);
// 创建地址解析器实例
var myGeo = new BMap.Geocoder();
// 将地址解析结果显示在地图上,并调整地图视野
var longitude=document.getElementById("longitude").value;
var latitude=document.getElementById("latitude").value;
if(longitude && latitude ){
var new_point = new BMap.Point(longitude,latitude);
var marker = new BMap.Marker(new_point);  // 创建标注
map.panTo(new_point);
var label = new BMap.Label("${project.vname}",{offset:new BMap.Size(25,5)});
marker.setLabel(label);
marker.addEventListener("click",getAttr);
map.addOverlay(marker);              // 将标注添加到地图中
function getAttr(){
var p = marker.getPosition();
map.centerAndZoom(p, 15);
}
}else{
myGeo.getPoint("${project.extent.address}", function(point){
if (point) {
map.centerAndZoom(point, 15);
var marker = new BMap.Marker(point);  // 创建标注
map.addOverlay(marker);              // 将标注添加到地图中
var label = new BMap.Label("${project.vname}",{offset:new BMap.Size(25,5)});
marker.setLabel(label);
marker.addEventListener("click",getAttr);
function getAttr(){
var p = marker.getPosition();       //获取marker的位置
map.centerAndZoom(p, 15);
}
}else{
alert("您的地址没有解析到结果!");
}
}, "北京");
}
map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]}));
map.addControl(new BMap.NavigationControl());        // 添加平移缩放控件
map.addControl(new BMap.ScaleControl());             // 添加比例尺控件
map.addControl(new BMap.OverviewMapControl());       //添加缩略地图控件
map.enableScrollWheelZoom();                         //启用滚轮放大缩小
map.disable3DBuilding();

})
})

// 缩略图滚动
$(document).ready(function(){
var esleng = $(".thumbs li").length;
var eswidth = esleng*95;
var offset = 0;
var offlimit = 475 - eswidth;
$(".thumbs li").click(function(){
var imgsrc = $(this).children("img").attr("src");
$(".currshow img").attr("src",imgsrc);
$(".currshow a").attr("href",imgsrc);
$(this).addClass("cur").siblings("li").removeClass("cur");
})
if(offlimit>=0) {
$(".thumbs .mini_slider").addClass("hide");
} else {
$(".thumbs ul").css("width",eswidth+"px");
$(".thumbs .mini_slider").click(function(){
if($(this).hasClass("useless")){
return false;
} else {
if($(this).hasClass("prev")){
offset+=95;
} else if($(this).hasClass("next")){
offset-=95;
}
$(".thumbs ul").animate({marginLeft:offset+"px"},500,function(){
if(offset>=0) {
$(".thumbs .prev").addClass("useless");
}
if(offset<=offlimit) {
$(".thumbs .next").addClass("useless");
}
if(offset<0) {
$(".thumbs .prev").removeClass("useless");
}
if(offset>offlimit) {
$(".thumbs .next").removeClass("useless");
}
});
}
});
}
});

</script>
  • table 切换地图
            
    
    博客分类: 项目地图web前端java开发 JavaScripthtml 
  • 大小: 234.3 KB
相关标签: JavaScript html