谈谈百度地图API使用(标注,自定义控件,信息窗口,拖... )

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>标注点</title>

    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }

        a, img {
            border: 0;
        }

        body {
            font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";
        }

        .demo {
            width: 850px;
            margin: 20px auto;
        }

        #l-map {
            height: 400px;
            width: 600px;
            float: left;
            border: 1px solid #bcbcbc;
        }

        #r-result {
            height: 400px;
            width: 230px;
            float: right;
        }

        html, body {
            margin: 0;
            padding: 0;
        }

        .iw_poi_title {
            color: #CC5522;
            font-size: 14px;
            font-weight: bold;
            overflow: hidden;
            padding-right: 13px;
            white-space: nowrap;
        }

        .iw_poi_content {
            font: 12px arial,sans-serif;
            overflow: visible;
            padding-top: 4px;
            white-space: -moz-pre-wrap;
            word-wrap: break-word;
        }

        .btnbz {
            text-align: center;
        }
    </style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
        function msg(print) {
            var objprint = print;
            var objcity = document.getElementById("txtcity");
            if (confirm("是否确定将当前坐标点位置标注为:" + objcity.value + "?")) {
                alert("ok");
            }
        }
    </script>
</head>
<body>

    <div class="demo">

        <p style="height: 40px;">
            输入城市:<input id="txtCity" type="text" />
            <button>获取坐标</button>
            坐标:<input id="txtPoint" type="text" />
        </p>

        <div id="l-map"></div>
        <div id="r-result"></div>

    </div>

    <script type="text/javascript">
        // 百度地图API功能


        var map = new BMap.Map("l-map");            // 创建Map实例
        map.centerAndZoom(new BMap.Point(114.465567, 22.607958), 17);
        addMapControl();
        setMapEvent();
        var icon = new BMap.Icon(‘pin.png‘, new BMap.Size(20, 32), {});
        var mkr;

        function ZoomControl() {
            // 默认停靠位置和偏移量
            this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;
            this.defaultOffset = new BMap.Size(10, 10);
        }

        // 通过JavaScript的prototype属性继承于BMap.Control
        ZoomControl.prototype = new BMap.Control();

        // 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回
        // 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中
        ZoomControl.prototype.initialize = function (map) {

            // 创建一个DOM元素
            var div = document.createElement("div");
            // 添加文字说明
            div.appendChild(document.createTextNode("标注"));
            // 设置样式
            div.style.cursor = "pointer";
            div.style.border = "1px solid gray";
            div.style.backgroundColor = "white";
            div.style.color = "red";
            // 绑定事件
            div.onclick = function show(e) {
                if (mkr == null) {
                    mkr = new BMap.Marker(map.getCenter(), {
                        icon: icon,
                        enableDragging: true,//开启拖动效果
                        raiseOnDrag: true//开启拖动效果
                    });
                    map.addOverlay(mkr);
                }
                else {
                    map.removeOverlay(mkr);
                    mkr = new BMap.Marker(map.getCenter(), {
                        icon: icon,
                        enableDragging: true,//开启拖动效果
                        raiseOnDrag: true//开启拖动效果
                    });
                    map.addOverlay(mkr);
                }

                //监听拖动位置并显示到文本框
                mkr.addEventListener(‘dragend‘, function show1(e) {//监听拖动位置
                    //alert(e.point.lng + ‘, ‘ + e.point.lat);
                    document.getElementById("txtPoint").value = e.point.lng + "," + e.point.lat;//在地图上单击之后把经纬度显示到文本   
                    var varprint = e.point.lng + ‘, ‘ + e.point.lat;
                    var infoWindow = new BMap.InfoWindow("<b class=‘iw_poi_title‘ title=‘当前位置坐标‘>当前位置坐标</b><div class=‘iw_poi_content‘>坐标地址:" + e.point.lng + ‘, ‘ + e.point.lat + "<br/>输入名称:<input type=‘text‘ id=‘txtcity‘/><div class=‘btnbz‘><input type=‘button‘ value=‘创建标注点‘ onclick=‘msg();‘/></div></div>");
                    map.openInfoWindow(infoWindow, e.point); //开启信息窗口
                })
            }
            // 添加DOM元素到地图中
            map.getContainer().appendChild(div);
            // 将DOM元素返回
            return div;
        }
        // 创建控件
        var myZoomCtrl = new ZoomControl();
        // 添加到地图当中
        map.addControl(myZoomCtrl);


        var local = new BMap.LocalSearch("全国", {
            renderOptions: {
                map: map,
                panel: "r-result",
                autoViewport: true,
                selectFirstResult: false
            }
        });


        //地图事件设置函数:
        function setMapEvent() {
            map.enableDragging();//启用地图拖拽事件,默认启用(可不写)
            map.enableScrollWheelZoom();//启用地图滚轮放大缩小
            map.enableDoubleClickZoom();//启用鼠标双击放大,默认启用(可不写)
            map.enableKeyboard();//启用键盘上下左右键移动地图
        }

        //地图控件添加函数:
        function addMapControl() {
            //向地图中添加缩放控件
            var ctrl_nav = new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE });
            map.addControl(ctrl_nav);
            //向地图中添加缩略图控件
            var ctrl_ove = new BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 0 });
            map.addControl(ctrl_ove);
            //向地图中添加比例尺控件
            var ctrl_sca = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT });
            map.addControl(ctrl_sca);
        }

        //点击按钮“获取坐标”,产生的事件
        function getPoint() {
            var city = document.getElementById("txtCity").value;
            local.search(city);                 // 初始化地图,设置城市和地图级别。
            //启用滚轮放大缩小
        }
    </script>
</body>
</html>

谈谈百度地图API使用(标注,自定义控件,信息窗口,拖... ),布布扣,bubuko.com

谈谈百度地图API使用(标注,自定义控件,信息窗口,拖... )

上一篇:winfrom程序文本框第一次选中问题


下一篇:windows2003 iis php 配置后无法执行php页面