H5的新应用-在地图上标识附近加油站的地址

2021-11-23 02:06:52

————————————————————————

<style type="text/css">
       html{height:100%}
       body{height:100%;margin:0px;padding:0px}
       #container{height:100%}
</style>

————————————————————————

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=7ada0390a58b3e01fef08022c073ff78"></script>
       <script type="text/javascript">
           //初始化函数
           function init(){
               navigator.geolocation.getCurrentPosition(function(pos){
                   var x = pos.coords.longitude;//得到经度
                   var y = pos.coords.latitude;//得到纬度
                   var map = new BMap.Map("container");// 创建地图实例
                   var point = new BMap.Point(x, y); // 创建中心点坐标
                   map.centerAndZoom(point, 15);// 初始化地图，设置中心点坐标和地图级别
                   for(var i=0;i<10;i++){       //随机算10个坐标
                       var x2 = x;               //坐标点的位置
                       var y2 = y;
                       if(i % 2 == 0){
                           x2 += 1*i;
                       }
                       if(i % 2 != 0){
                           y2 += 1*i;
                       }
                       var p2 = new BMap.Point(x2, y2);//创建新的点
                       var marker = new BMap.Marker(point);// 创建标注
                       map.addOverlay(marker);       //添加覆盖层
                   }
               });
           }
</script>

————————————————————————

<body onload="init()">
<div id="container"></div>
</body>

—————————————————————————