0
点赞
收藏
分享

微信扫一扫

调用地图api接口

Hyggelook 2022-05-26 阅读 80

复制粘贴运行,即可看到效果

<!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,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}


    </style>


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


    <title>添加动画标注点</title>


</head>


<body>


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


</body>


</html>


<script type="text/javascript">


 if(navigator.geolocation) {


    navigator.geolocation.getCurrentPosition(


        function (position) {  


            var longitude = position.coords.longitude;  


            var latitude = position.coords.latitude;  


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


            var point = new BMap.Point(longitude, latitude);


            map.centerAndZoom(point, 15);


            var marker = new BMap.Marker(point);  // 创建标注


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


            marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画


         },


            function (e) {


             var msg = e.code;


             var dd = e.message;


             console.log(msg)


             console.log(dd)


        }


      ) 


   }


</script>


举报

相关推荐

0 条评论