百度地图浅析如何使用百度地图

Posted David Wu

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了百度地图浅析如何使用百度地图相关的知识，希望对你有一定的参考价值。

概述

读者在使用百度地图API之前，需要申请一个密钥，读者可以点击这里阅读百度地图JavaScript API的详细教程。

百度地图javascript API语法

web开发的语法就是javaScript。

javaScript 类参考

点击我阅读JavaScript 类参考。

一个简单的地图Demo

<!DOCTYPE html>
<html>
  <head>
    <title>demo</title>
    
        <meta name="content-type" content="text/html; charset=UTF-8">
        <!-- In order to better support the mobile terminal -->
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

    <!-- reference baidu map api js -->
    <script src="http://api.map.baidu.com/api?v=2.0&ak=UfuZjklxjf6BmZvIIdW9c5hjDGvtO9bw"></script>
    
  </head>
  <body>
  <!-- must set width and height -->
  <div id="container" style="width:70%;height:400px"></div>
  <script>
    //create map
    var map=new BMap.Map("container");
    
    //initialize map
    var point1=new BMap.Point(104.074091,30.665783);
    map.centerAndZoom(point1,12);
    
    //add marker on map
    var point2=new BMap.Point(104.158603,30.642172);
    var marker=new BMap.Marker(point2);
    map.addOverlay(marker);
    
    //addPanoramaConverageLayer on map
    var pclyer=new BMap.PanoramaCoverageLayer();
    map.addTileLayer(pclyer);
    
    //add panoramaControl on map
    var pnrm=new BMap.PanoramaControl();
    map.addControl(pnrm);
    
    //add overviewControl on map
    var overviewControl = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:true});
    map.addControl(overviewControl);    
  </script>
  </body>
</html>

 

总结：

  1. 自己的密钥可以在API控制台查看。
  2. BMap是作为整JavaScript API的命名空间，所有的JavaScript API类都必需在前面加上“BMap.”，要引用javaScript API之外的类就需要用别的命名空间。
  3. JavaScript API中的类大部分都有监听事件，因此可以通过addEventListener()来监听: 
    map.addEventListener("click",function(e){
  console.log(e.point.lng+","+e.point.lat);
});
  4. addEventListener()中的函数参数可以有以下几种属性：
    1. e.point.lng
    2. e.point.lat
    3. e.pixel.x
    4. e.pixel.y
    5. e.bounds
    6. e.size

以上是关于百度地图浅析如何使用百度地图的主要内容，如果未能解决你的问题，请参考以下文章

如何在网页中调用百度地图api

用C#编写百度地图Android手机应用程序（第3讲）

要在自己的网站上用百度地图，怎么申请API，网址是啥

如何在百度地图api（js）中的百度信息框添加“详情”的链接。。。类似 下面的图片

如何使用百度地图API

百度地图个性在线编辑器怎么改文字