您现在的位置:首页 >> 前端 >> 内容

百度地图随机生成10个标注点

时间:2017/8/4 17:18:28 点击:

  核心提示:问题描述:利用百度地图随机生成10个标注点直接上代码htmlheadmeta http-equiv=Content-Type content=text/html; charset=utf-8 /met...

问题描述:利用百度地图随机生成10个标注点

直接上代码

<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{height:500px;width:100%;}  
        #r-result{width:100%; font-size:14px;}  
    </style>  
    <script type="text/javascript" src="https://api.map.baidu.com/api?key=&v=1.1&services=true"></script>  
    <title>Random create 10 Markers</title>  
</head>  
<body>  
    <p id="allmap"></p>  
    <p id="r-result">  
        <input type="button" value="点击生成" onclick="theLocation()" />  
    </p>  
</body>  
</html>  
<script type="text/javascript">  
    // 百度地图API功能  
    var map = new BMap.Map("allmap");  
    var a = 117.103949;  
    var b = 36.656588;  
    map.centerAndZoom(new BMap.Point(a,b),10);  
    map.enableScrollWheelZoom(true);  
      
    // 用经纬度设置地图中心点  
    function theLocation(){  
        map.clearOverlays();   
        for(var i =0;i<10;i++){  
            var new_point = new BMap.Point(a+getRandom(),b+getRandom());  
            console.log(new_point);  
            var marker = new BMap.Marker(new_point);  // 创建标注  
            map.addOverlay(marker);              // 将标注添加到地图中  
            map.panTo(new_point);    
        }     
    }  
    function getRandom(){  
        return Math.random() / 2;  
    }  
      
</script>  

有不会的,可以查一下百度地图的API,百度一下就出来了,也可以留言讨论。

作者:网络 来源:tom_tom_to