开发者社区> 程序界小强> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

jsp页面使用百度地图定位

简介: 版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010741376/article/details/47338993 ...
+关注继续查看
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010741376/article/details/47338993

css样式:

<style type="text/css">
    *{margin:0;padding:0;}
.theme-buy{margin-top:7%;text-align:center;}
.theme-signin{font-size:15px;}
.theme-popover-mask{z-index:1;position:absolute;left:0;top:0;width:100%;height:100%;background:#000;opacity:0.5;filter:alpha(opacity=50);-moz-opacity:0.5;display:none;}
.theme-popover{z-index:9;position:absolute;top:50%;left:50%;width:880px;height:400px;margin:-180px 0 0 -330px;border-radius:5px;border:solid 2px #e4e4e4;background-color:#fff;display:none;box-shadow:0 0 10px #666;background:#fff;}
.theme-poptit{border-bottom:1px solid #ddd;padding:12px;position:relative;height:24px;}
.theme-poptit .close{float:right;color:#999;padding:5px;margin:-2px -5px -5px;font:bold 14px/14px simsun;text-shadow:0 1px 0 #ddd}
.theme-poptit .close:hover{color:#444;}
.theme-popbod{width:600px;height:300px;}
 
#allmap{width:880px;height:400px;}
</style>

js代码:

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=GXkbjcszaqwT3Wqq7piaAEeu"></script>
    <script type="text/javascript" src="<%=path%>/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function($){
 
    $('.theme-login').click(function(){
        $('.theme-popover-mask').show();
        $('.theme-popover-mask').height($(document).height());
        $('.theme-popover').show();
        
        var Longitude=113.45;
	var Latitude=23.02;
        
        var map = new BMap.Map("allmap");
        map.centerAndZoom(new BMap.Point(Longitude, Latitude), 14);
        map.enableScrollWheelZoom(true);//缩放
        var new_point=new BMap.Point(Longitude,Latitude);

        var myIcon = new BMap.Icon("<%=path%>/image/position.png", new BMap.Size(24,24));
        var marker1 = new BMap.Marker(new_point,{icon:myIcon});  // 创建标注
        map.addOverlay(marker1);              // 将标注添加到地图中
        map.panTo(new_point);
        
        
         
    });
    $('.theme-poptit .close').click(function(){
        $('.theme-popover-mask').hide();
        $('.theme-popover').hide();
    });
    $('.theme-popover-mask').click(function(){
    $('.theme-poptit .close').click();
});
 
});
</script>
HTML:

<body>
     <div class="theme-buy">
    <a class="theme-login" href="javascript:;">点击查看效果</a>
</div>
 
<div class="theme-popover-mask"></div>
 
<div class="theme-popover">
    <div class="theme-poptit">
        <a href="javascript:;" title="关闭" class="close" style="text-decoration: none;">×</a>
        <h3>地图定位</h3>
    </div>
    <div class="theme-popbod">
        <div id="allmap"></div>
    </div>
</div>
</body>
源码Demo下载:http://download.csdn.net/detail/u010741376/8973469

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
使用 NextJS 和 TailwindCSS 重构我的博客
这是笔者第三次重构博客应用。本文主要是笔者记录重构博客所用的知识和记录,希望以后每周或者每两周能够有一篇文章,记录和总结知识。
73 0
Bootstrap 4/3 页面基础模板 与 兼容旧版本浏览器
Bootstrap 4/3 页面基础模板 与 兼容旧版本浏览器
157 0
PC端使用百度地图查询经纬度
PC端使用百度地图查询经纬度
87 0
jstat和jmap使用
jstat和jmap使用
3026 0
使用CSS定位页面的“footer”
colorandy读者提出这样一个关于页面布局的问题: “如果有一个footer层,我想让他固定出现在整个页面的最下方,不随着页面中的内容而变化,CSS中要怎样设?比如里面是一些版权信息。因为我整页的内容比较少,footer老跟着内容跑到上面去,很不美观。
760 0
+关注
程序界小强
一个不仅仅会写代码的码农。。。
122
文章
1
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载