首页 > 移动运营 > 手机建站 > 手机wap网站百度地图动态可以拖动缩放完整代码

手机wap网站百度地图动态可以拖动缩放完整代码

上一篇 下一篇
     最近咱们官网群里(官方群:149560527)有很多朋友咨询关于手机网百度动态地图如何调用,今天把教程发出来,希望能帮助更多的人!直接上图:
手机wap网站百度地图动态可以拖动缩放代码

#p#

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>手机wap网站百度地图动态可以拖动缩放代码</title>
    <style type="text/css">
        html
        {
            height: 100%;
        }
        body
        {
            height: 50%;
            margin: 0px;
            padding: 0px;
        }
        #container
        {
            width:600px;
            height: 500px;
        }
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
</head>
<body onload="loand()">
    <div id="container">
    </div>
    <input id="lng" type="hidden" runat="server" />
    <input id="lat" type="hidden" runat="server" />
    <input id="Button1" type="button" value="标记图标"  runat="server" onclick="getbiaoji()" />
    <script type="text/javascript">

        function getbiaoji() {
            var lng = document.getElementByIdx_x("lng").value;
            var lat = document.getElementByIdx_x("lat").value;

            var map = new BMap.Map("container");
            var point = new BMap.Point(lng, lat);
            var marker = new BMap.Marker(point);
            var opts = {
                width: 250,     // 信息窗口宽度 
                height: 100,     // 信息窗口高度 
                title: "<B>懒人模板</b>"  // 信息窗口标题 
            }
            var infoWindow = new BMap.InfoWindow("简介:懒人模板是全国首家免费手机wap网站模板网站!<BR>电话号码:400-123-456<BR>网址:http://www.lanrenmb.com" + lng + lat, opts);  // 创建信息窗口对象


            marker.enableDragging(); //启用拖拽
            map.addControl(new BMap.NavigationControl()); //左上角控件
            map.enableScrollWheelZoom(); //滚动放大
            map.enableKeyboard(); //键盘放大

            map.centerAndZoom(point, 13); //绘制地图
            map.addOverlay(marker); //标记地图

            map.openInfoWindow(infoWindow, map.getCenter());
        }

        function loand() {
            var map = new BMap.Map("container");
            var point = new BMap.Point(104.083, 30.686); //默认中心点
            var marker = new BMap.Marker(point);
            var opts = {
                width: 250,     // 信息窗口宽度 
                height: 100,     // 信息窗口高度 
                title: "<B>懒人模板</B>"  // 信息窗口标题 
            }
            var infoWindow = new BMap.InfoWindow("简介:懒人模板是全国首家免费手机wap网站模板网站!<BR>电话号码:400-123-456<BR>网址:http://www.lanrenmb.com", opts);  // 创建信息窗口对象


            marker.enableDragging(); //启用拖拽
            marker.addEventListener("dragend", function (e) {
                point = new BMap.Point(e.point.lng, e.point.lat); //标记坐标(拖拽以后的坐标)
                marker = new BMap.Marker(point);

                document.getElementByIdx_x("lng").value = e.point.lng;
                document.getElementByIdx_x("lat").value = e.point.lat;
                infoWindow = new BMap.InfoWindow("当前位置<br />经度:" + e.point.lng + "<br />纬度:" + e.point.lat, opts);

                map.openInfoWindow(infoWindow, point);
            })

            map.addControl(new BMap.NavigationControl()); //左上角控件
            map.enableScrollWheelZoom(); //滚动放大
            map.enableKeyboard(); //键盘放大

            map.centerAndZoom(point, 13); //绘制地图
            map.addOverlay(marker); //标记地图

            map.openInfoWindow(infoWindow, map.getCenter());      // 打开信息窗口     
        }
        
    </script>
</body>
</html>

模板简介:该模板名称为【手机wap网站百度地图动态可以拖动缩放完整代码】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【手机建站】栏目查找您需要的精美模板。

相关搜索
  • 下载密码 lanrenmb
  • 下载次数 36,901次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 10-31
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
  • 移动业界
  • 移动应用
  • 手机建站
  • 移动搜索
  • 热门推荐 更多 >
    微信素材 微信公众平台 自适应 微信模板 单页式简历模板 html5 微信图片 响应式 微信文章 企业网站
    您可能会喜欢的其他模板