`
流浪的我
  • 浏览: 34104 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

百度地图使用心得

 
阅读更多

1 在使用百度地图是,首先的申请密钥(ak)才能成功加载API JS文件。

       ak的使用方法:<script src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥" type="text/javascript"></script>
 
2 移动端使用地图:
        将地图容器高设置为100%,使其充满整个屏幕,或者您也可以计算浏览器窗口的大小并进行设置。         
        添加meta标签  , <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 这样做是为了让页面以正常比例进行显示并且禁止用户缩放页面的操作。
 
3 异步加载地图:  
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8"/>  
  5. <title>异步加载</title>  
  6. <script type="text/javascript">  
  7. function initialize() {  
  8.   var mp = new BMap.Map('map');  
  9.   mp.centerAndZoom(new BMap.Point(121.491, 31.233), 11);  
  10. }  
  11.    
  12. function loadScript() {  
  13.   var script = document.createElement("script");  
  14.   script.src = "http://api.map.baidu.com/api?v=2.0&ak=您的密钥&callback=initialize";//此为v2.0版本的引用方式  
  15.   // http://api.map.baidu.com/api?v=1.4&ak=您的密钥&callback=initialize"; //此为v1.4版本及以前版本的引用方式  
  16.   document.body.appendChild(script);  
  17. }  
  18.    
  19. window.onload = loadScript;  
  20. </script>  
  21. </head>  
  22. <body>  
  23.   <div id="map" style="width:500px;height:320px"></div>  
  24. </body>  
  25. </html>
 
4 非百度地图的坐标需要转换成百度坐标
<script type="text/javascript">
    var points = [new BMap.Point(116.3786889372559,39.90762965106183),
                  new BMap.Point(116.38632786853032,39.90795884517671),
                  new BMap.Point(116.39534009082035,39.907432133833574),
                  new BMap.Point(116.40624058825688,39.90789300648029),
                  new BMap.Point(116.41413701159672,39.90795884517671)
    ];
     //地图初始化
    var bm = new BMap.Map("allmap");
    bm.centerAndZoom(new BMap.Point(116.378688937,39.9076296510), 15);
 
    //坐标转换完之后的回调函数
    translateCallback = function (data){
      if(data.status === 0) {
        for (var i = 0; i < data.points.length; i++) {
            bm.addOverlay(new BMap.Marker(data.points[i]));
            bm.setCenter(data.points[i]);
        }
      }
    }
    setTimeout(function(){
        var convertor = new BMap.Convertor();
        convertor.translate(points, 1, 5, translateCallback)
    }, 1000);
</script>
 
5 给地图添加控件:
      使用Map.addControl()方法向地图添加控件。在此之前地图需要进行初始化。
      代码:
              var map =new BMap.Map("容器id");
         map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);    //中心点坐标 ,层级
         map.addControl(new BMap.NavigationControl());      //添加地图控件
map.addControl(new BMap.NavigationControl());    //添加平移缩放控件
         map.addControl(new BMap.ScaleControl());         //添加比例尺控件
         map.addControl(new BMap.OverviewMapControl());    //添加缩略地图控件
         map.addControl(new BMap.MapTypeControl());        //添加地图类型控件
         map.disable3DBuilding();
	 map.centerAndZoom(point, 14); 
         map.enableScrollWheelZoom();                      //添加滚轮放大缩小
 
      添加自定义控件      
             添加自定义控件与添加其他控件方法一致,调用map.addControl()方法即可。
    // 创建控件实例    
    var myZoomCtrl = new ZoomControl();

// 添加到地图当中 map.addControl(myZoomCtrl);

 
6 控件的位置:
      控件的位置是由anchor和offset属性一起控制的;
      anchor允许的值为:
         BMAP_ANCHOR_TOP_LEFT 表示控件定位于地图的左上角。

         BMAP_ANCHOR_TOP_RIGHT 表示控件定位于地图的右上角。

         BMAP_ANCHOR_BOTTOM_LEFT 表示控件定位于地图的左下角。

         BMAP_ANCHOR_BOTTOM_RIGHT 表示控件定位于地图的右下角。

 
    offset:
              var opts ={offset:new BMap.Size(150,5)}
         map.addControl(new BMap.ScaleControl(opts)); 
7 地图添加覆盖物:
       Overlay:覆盖物的抽象基类,所有的覆盖物均继承此类的方法。

        Marker:标注表示地图上的点,可自定义标注的图标。

        Label:表示地图上的文本标注,您可以自定义标注的文本内容。

        Polyline:表示地图上的折线。

        Polygon:表示地图上的多边形。多边形类似于闭合的折线,另外您也可以为其添加填充颜色。

        Circle: 表示地图上的圆。

        InfoWindow:信息窗口也是一种特殊的覆盖物,它可以展示更为丰富的文字和多媒体信息。注意:同一时刻只能有一个信息窗口在地图上打开。

注:可以使用map.addOverlay方法向地图添加覆盖物,使用map.removeOverlay方法移除覆盖物,注意此方法不适用于InfoWindow。

 

分享到:
评论

相关推荐

    百度地图轨迹-路书

    百度地图轨迹-路书是百度地图提供的一项服务,它允许用户记录、查看和分享他们的行驶轨迹。这项功能对于自驾游爱好者、户外运动者、物流运输人员以及需要跟踪移动路线的各类工作者来说非常实用。通过百度路书,用户...

    百度地图地方小吃搜索 v1.1.1.rar

    度娘搜搜网根据研究百度地图搜索API的一些心得,实现度娘百度地图搜索api-智能地方小吃搜索PHP源码,以百度地图搜索API范例的方式发布,,并且不断更新中,度娘地方小吃地图搜索的功能主要集中在动态的用户IP地址...

    基于百度SDK的地图软件开发心得.docx

    基于百度SDK的地图软件开发心得.docx基于百度SDK的地图软件开发心得.docx基于百度SDK的地图软件开发心得.docx基于百度SDK的地图软件开发心得.docx基于百度SDK的地图软件开发心得.docx基于百度SDK的地图软件开发心得....

    基于百度SDK的地图软件开发心得.pdf

    本文主要探讨了在使用百度地图SDK开发安卓手机地图应用时遇到的一个问题,即如何正确地在地图图层上绘制自定义几何图形,并且避免因对象复用导致的错误。 首先,开发者在尝试复制并运行百度SDK示例代码,通过`...

    百度地图地方小吃搜索 v1.1.1

    度娘搜搜网根据研究百度地图搜索API的一些心得,实现度娘百度地图搜索api-智能地方小吃搜索PHP源码,以百度地图搜索API范例的方式发布,,并且不断更新中,度娘地方小吃地图搜索的功能主要集中在动态的用户IP地址...

    一款期末大作业、防百度地图aqq

    在这个项目中,可能涉及到对百度地图API的使用限制或替代,学习者可以借此了解如何与地图服务进行交互,以及如何处理地图数据。 - 安卓:项目基于安卓系统开发,意味着它需要遵循Android开发规范,包括使用Android ...

    基于Java的百度地图开发设计源码与笔记分享

    该项目为Java语言编写的百度地图开发设计源码,集成了372个文件,涵盖175个PNG图片、120个JPG图片、33个Java源代码文件、18个XML配置文件、14...主要记录了百度地图开发的详细过程和心得,适用于开发者学习和参考使用。

    百度地图毕业设计源码-Joomla-Tutorial:这是针对Joomla初学者定制的初学者使用教程

    百度地图毕业设计源码 Joomla使用教程 这是针对国内Joomla用户/爱好者/开发者定制的用户使用教程,这个教程旨在为Joomla学员了解Joomla的产品整体及管理使用,帮助开发者了解Joomla的结构逻辑,从而能够介入开发。...

    崂山驴友轨迹路网地图png

    用户在使用地图的同时,可以访问这个平台获取更多实用信息,与其他户外爱好者交流心得,提高户外活动的安全性和趣味性。 总的来说,"崂山驴友轨迹路网地图png"是户外爱好者规划崂山徒步旅行的重要工具,它结合了...

    水经注地图下载器mdwn.rar

    这款软件支持多种地图源,包括常见的Google Maps、Bing Maps、高德地图、百度地图等,同时也支持OpenStreetMap等开放地图数据。用户可以根据自己的需求选择合适的地图源,进行地图数据的下载。这些数据可以用于地理...

    搜索引擎使用心得[归纳].pdf

    Google的界面设计曾有一段时间的调整,将视频、图片和地图等分类搜索目录移至左上角,这可能对某些用户造成不便,从而转向了百度。百度的搜索框下方的目录分类更符合部分用户的使用习惯,使得百度在中国市场保持了较...

    百度地图毕业设计源码-My-self-driving-car-note:我的无人驾驶笔记~

    百度地图毕业设计源码 这是一个我根据Udacity课程以及网络上的其他资源,结合我自己在学习中的心得体会所构成的笔记。希望能够给一些希望转行自动驾驶的朋友们一点点帮助。由于时间有限与工作繁忙,一次无法更新太多...

    手绘圣诞树地图 - 百度.pdf

    - **社区交流**:加入相关的艺术社群,与其他创作者交流心得、分享作品,有助于开拓视野、激发灵感。 综上所述,“手绘圣诞树地图”不仅是一种简单的艺术创作形式,更是传递节日快乐、增进人际交往的重要媒介。通过...

    wordpress优化心得参考.pdf

    - baidusitemapgenerator和googlexmlsitemap插件分别生成百度和谷歌的站点地图,帮助搜索引擎更好地索引网站。对于主要依赖百度流量的淘宝客单品站,baidusitemapgenerator可能效果有限。 5. **robots.txt优化**:...

    sportFriend:基于百度地图的运动交友平台

    3. 活动发布:用户可以创建新的运动活动,设定活动名称、时间、地点、运动类型等信息,使用百度地图API来定位和展示活动地点,方便其他用户查找和参加。 4. 活动搜索与加入:用户可以根据关键词、地点、时间等条件...

    百度2013求职宝典

    - 百度的核心业务主要包括搜索引擎服务、广告推广、云计算、地图服务等多个领域。 - **行业地位与竞争对手** - **行业地位**:百度在国内搜索引擎市场上占据领先地位,市场份额较大。 - **竞争对手**:主要竞争...

    baidumapdemo.zip

    【描述】:该压缩包内的“baidumapdemo”项目是为了帮助开发者更好地理解和使用百度地图API,它提供了丰富的示例代码,用于演示如何在实际应用中集成百度地图服务。通过这个项目,开发者可以学习到如何实现地图上的...

    网络推广工作心得.docx

    【网络推广工作心得】 网络推广是一项综合性的技术工作,旨在利用互联网平台提升企业或产品的知名度,吸引潜在客户,促进销售和品牌建设。以下是对网络推广的深入解析: 1. **网站优化**: - **网站代码优化**:...

Global site tag (gtag.js) - Google Analytics