最近客户提了一个需求，要在网站中添加百度地图的显示，其实原来是有谷歌地图的，但由于谷歌在大陆遭到封杀，只好再给用户增加一个选择了。

下面我将自己最近整理的一些知识分享给大家。

　　如何使用百度地图API：

1、要先引用API库的链接：

　　eg：<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>　　

　　　　<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
　　百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口，可帮助您在网站中构建功能丰富、交互性强的地图应用，支持PC端和移动端

基于浏览器的地图应用开发，且支持HTML5特性的地图开发。

　　该套API免费对外开放。自v1.5版本起，需先申请密钥（ak）才可使用，接口（除发送短信功能外）无使用次数限制。

　　打开该链接：http://developer.baidu.com/map/index.php?title=jspopular

　　这里面有很多Demo，可以自己先看一下。

2、以百度提供的Demo为例，简单介绍一下：

 <!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: %;height: %;overflow: hidden;margin:;font-family:"微软雅黑";}

   </style>

   <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4">

   </script>

   <title>地图展示</title>

   </head>

 <body>

   <div id="allmap" style="width:800px;height:600px"></div>

 </body>

 </html>

 <script type="text/javascript">

   //百度地图API功能

   var map = new BMap.Map("allmap"); //创建Map实例

   var point = new BMap.Point(116.404, 39.915);//初始化地图,设置中心点坐标和地图级别

   map.centerAndZoom(point, );

   map.addControl(new BMap.MapTypeControl());   //添加地图类型控件

   map.setCurrentCity("北京"); //设置地图显示的城市 此项是必须设置的

   map.enableScrollWheelZoom(true);//开启鼠标滚轮缩放

   //创建标注

   function addMarker(point){

     var marker = new BMap.Marker(point);

     map.addOverlay(marker);

   }

   addMarker(point);

 </script>

　　将上面的代码复制下来，保存为.html文件，然后运行，会显示为和百度地图一样的页面。

　　效果截图如下：

　　

　　先整理这么多，这些都是比较简单的，一些入门知识，等以后接触更多的话，再继续和大家分享。

C#调用百度地图API经验分享（一）的更多相关文章

  1. C#调用百度地图API经验分享（四）

    这一篇,记录一下我调用的地图API实现的功能.下面介绍的都是一些片段的节选,不能直接复制就运行.在实现之前肯定要加载地图,先放一个webbroser控件,然后如下: private void Form ...

  2. C#调用百度地图API经验分享（三）

    这一篇我将跟大家分享一下我自己在开发过程中总结出的一些操作地图的方法,属性,及思路,希望可以让大家少走弯路. 1.定位 一般百度的示例DEMO里开始初始化地图时用的都是map.centerAndZoo ...

  3. C#调用百度地图API经验分享（二）

    接着上一篇,将上一篇代码的js提取出来:<script type="text/JavaScript">var map = new BMap.Map("allm ...

  4. 调用百度地图Api实现的查看地图功能的小插件

    1. 功能 bMap.js 可根据地理位置调用出百度地图,采用弹出框形式 2.用法 var city = '青岛市'; var address = '香港中路'; bMap.init({ city : ...

  5. 【c#】Form调用百度地图api攻略及常见问题

    首先,在Form中调用百度地图api,我们需要使用webbrowser控件,这个在前面的文章中已经讲过了,可以参照(http://blog.csdn.net/buptgshengod/article/ ...

  6. HTML5调用百度地图API获取当前位置并直接导航目的地的方法

    <!DOCTYPE html> <html lang="zh-cmn-Hans">     <meta charset="UTF-8&quo ...

  7. HTML5 调用百度地图API地理定位

    <!DOCTYPE html> <html> <title>HTML5 HTML5 调用百度地图API地理定位实例</title> <head&g ...

  8. 跨平台移动开发_PhoneGap 使用Geolocation基于所在地理位置坐标调用百度地图API

    使用Geolocation基于所在地理位置坐标调用百度地图API 效果图 示例代码 <!DOCTYPE html> <html> <head> <title& ...

  9. HTML5调用百度地图API进行地理定位实例

    自从HTML5的标准确定以后,越来越多的网站使用HTML5来进行开发.虽然对HTML5支持的浏览器不是很多,但是依然抵挡不了大伙对HTML5开发的热情.今天为大家带来的是使用HTML5调用百度地图AP ...

随机推荐

  1. [踏得网]HTML5在线教程阅读进度记录

    2017年1月3日18:12:19http://techbrood.com/h5b2a?p=html-canvas-states 2017年1月3日17:10:11http://techbrood.c ...

  2. ios中strong和weak的解释理解

    来自stackoverflow解释的挺有意思的 Imagine our object is a dog, and that the dog wants to run away (be dealloca ...

  3. Hibernate getCurrentSession()和openSession()的区别

    通过getCurrentSession()创建的Session会绑定到当前线程上:openSession()不会. 通过getCurrentSession()获取Session,首先是从当前上下文中寻 ...

  4. logstash 因为jdk版本不对造成索引时间戳失败

    版本 logstash 1.5.0 RC2 JDK 1.7.15 Logstash推荐使用JDK 1.7.75 每次启动都是会有部分的数据无法替换日志中的时间戳,导致日志时间戳被认定为当前读取时间. ...

  5. [DFNews] 入侵汽车控制刹车和油门？——速度与激情6 的节奏？

    原文跳转: http://arstechnica.com/security/2013/07/disabling-a-cars-brakes-and-speed-by-hacking-its-compu ...

  6. .net一次连接执行多条sql语句

    方法一: string SQLString="select 1; select 2;"; using (OdbcConnection connection = new OdbcCo ...

  7. 28. Triangle && Pascal's Triangle && Pascal's Triangle II

    Triangle Given a triangle, find the minimum path sum from top to bottom. Each step you may move to a ...

  8. simulate windows touch input

    更多信息请参考页面http://social.technet.microsoft.com/wiki/contents/articles/6460.simulating-touch-input-in-w ...

  9. 转：Connection: close和Connection: keep-alive有什么区别？

    原文:http://www.cnblogs.com/TinyMing/p/4597136.html 一.问题现象: 一个JSP页面,居然要耗时40多秒.网页中有大量的图片的CSS问题解决: 原因也找了 ...

  10. 洛谷P3371 【模板】单源最短路径

    P3371 [模板]单源最短路径 282通过 1.1K提交 题目提供者HansBug 标签 难度普及/提高- 提交  讨论  题解 最新讨论 不萌也是新,老司机求带 求看,spfa跑模板40分 为什么 ...