百度地图自己添加 标识地点 代码

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

    <style type="text/css">

        body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}

        #allmap{width:100%;height:500px;}

        p{margin-left:5px; font-size:14px;}

    </style>

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=eniNDkjbZhqB4Ro7MkEO15p3"></script>

    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

    <title>给多个点添加信息窗口</title>

</head>

<body>

    <div id="allmap"></div>

</body>

</html>

<script type="text/javascript">

    // 百度地图API功能    

    map = new BMap.Map("allmap");

    map.centerAndZoom(new BMap.Point(108.707509,34.345373), 15);

    map.enableScrollWheelZoom(true);

    map.disableDragging();     //禁止拖拽

    setTimeout(function(){

       map.enableDragging();   //两秒后开启拖拽

       //map.enableInertialDragging();   //两秒后开启惯性拖拽

    }, 2000);

    var data_info = [

                     [108.706808,34.374272,"地址:北京市东城区王府井大街88号乐天银泰百货八层"],

                     [108.702128,34.374119,"地址:北京市东城区东华门大街"],

                     [108.701562,34.372056,"地址:北京市东城区正义路甲5号"],

                     [108.70997,34.374395,"地址:111111111111"]

                    ];

    var opts = {

                width : 250,     // 信息窗口宽度

                height: 80,     // 信息窗口高度

                title : "信息窗口" , // 信息窗口标题

                enableMessage:true//设置允许信息窗发送短息

               };

    for(var i=0;i<data_info.length;i++){

        var marker = new BMap.Marker(new BMap.Point(data_info[i][0],data_info[i][1]));  // 创建标注

        var content = data_info[i][2];

        map.addOverlay(marker);               // 将标注添加到地图中

        addClickHandler(content,marker);

    }

    function addClickHandler(content,marker){

        marker.addEventListener("click",function(e){

            openInfo(content,e)}

        );

    }

    function openInfo(content,e){

        var p = e.target;

        var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);

        var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象 

        map.openInfoWindow(infoWindow,point); //开启信息窗口

    }

</script>

 

你可能感兴趣的:(百度地图)