百度地图JSSDK使用小实例

本文转载自查看原文 2018-01-12 14:58 970 前端JSSDK使用

代码示例　　

 <html>
 <head>
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
     <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
     <script src="http://api.map.baidu.com/getscript?v=1.4&ak=&services=&t=20150522093217"></script>
     <script src="http://ditu.google.cn/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false&_=20150522093217"></script>
     <title>百度地图API使用示例</title>
     <style>
     #mapContainer{
         height:600px;
         width:600px;
         border:1px solid #eee;
         }
     div.top{
           margin-bottom:10px;
           }
     #btn{
           border:0px;
           background-color:66B3FF;
           height:30px;
           color:#FFF;
           }
     </style>
     </head>
 <body>
 <div class="top">
     <span>输入地点：</span><input type="text" id="keyword" />
     <button  onclick="searchAddress()" id="btn">搜索地址</button>
     </div>
 <div id="mapContainer">
     </div>
 </body>
 <script>
     var map;//百度地图实例
     var local;
     //创建经纬度方法
     function createpoint(lon,lat){
         return new BMap.Point(lon,lat);
         };
     function initMap(dom,point){
         map = new BMap.Map(dom);
         map.centerAndZoom(point,15);
         map.enableScrollWheelZoom();
         local = new BMap.LocalSearch(map,{renderOptions:{map: map}});
         }
      function searchAddress(){
        var keyAddress = $("#keyword").val();
        local.search(keyAddress);
      }
     $(function(){
         var point = createpoint(116.404,39.915);
         initMap("mapContainer",point);

         });
     </script>
 </html>

官方参考文档： http://lbsyun.baidu.com/index.php?title=jspopular

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 百度地图BMap API实例百度地图的js导入及使用 Vue CLI 3 使用百度地图 1、vue里使用百度地图百度地图API基本使用（三）使用OpenLayers显示百度地图百度地图SDK的使用前端的百度地图的api的使用百度地图BMap使用示例在React中使用百度地图