百度地图API的一点应用

来源：互联网发布：儿童编程入门教程编辑：程序博客网时间：2024/05/16 10:29

记录一下，以后要用

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>创建可拖拽的标注</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
</head>
<body>
<div style="width:800px;height:560px;border:1px solid gray" id="container"></div>
<div id="divPosition"></div>
<input type="hidden" id="hidX" />
<input type="hidden" id="hidY" />
<button onclick="AddMarker();">Add Marker</button> 
<button onclick="SavePosition();">Save Position</button>
</body>
</html>
<script type="text/javascript">
    var map = new BMap.Map("container");
    map.centerAndZoom("北京市");

    //map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);     // 初始化地图,设置中心点坐标和地图级别
    map.addControl(new BMap.NavigationControl());               // 添加平移缩放控件
    map.enableScrollWheelZoom();
    var marker = new BMap.Marker();
    var gc = new BMap.Geocoder();

    var opts = {
        width: 250,     // 信息窗口宽度
        height: 100,     // 信息窗口高度
        title: "位置" // 信息窗口标题
    }
    var infoWindow;

    map.addEventListener('load', function () {
        map.setZoom(15);
    });

    function AddMarker() {
        var point = map.getCenter();
        var myIcon = new BMap.Icon("http://xxxxxxxxx/myicon.png", new BMap.Size(24, 24));

        marker = new BMap.Marker(point, { icon: myIcon }); // 设置自己的图标
        marker.enableDragging(true);                        // 设置标注可拖拽
        marker.addEventListener("dragend", function (e) {
            document.getElementById("hidX").value = e.point.lng;
            document.getElementById("hidY").value = e.point.lat;
        })
        // 点击标记物的时候，进行某些操作，当然，也可以在拖动的时候进行处理
        marker.addEventListener("click", function (e) {
            var pt = e.point;
            gc.getLocation(pt, function (rs) {
                var addComp = rs.addressComponents;
                var _p = addComp.province + " " + addComp.city + " " + addComp.district + " " + addComp.street + " " + addComp.streetNumber;
                document.getElementById("divPosition").innerHTML = _p;
            });
        });
        map.addOverlay(marker);
        marker.setLabel(new BMap.Label("您在这里",{offset:new BMap.Size(-12,-24)}));
    }

    function SavePosition() {
        alert("你的位置：" + document.getElementById("hidX").value + "|" + document.getElementById("hidY").value);
    }

</script>
</body>
</html>

另：发现marker.setTitle这个方法好像不好使