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

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

　　如何使用百度地图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. 【转载】芯片级拆解51、AVR、MSP430、凌阳61、PIC，5种单片机，多张显微照片

    先秀一张解剖照,放大裁剪,小米1S微距拍摄,800万像素摄像头很给力!今天等待被拆的是5个单片机芯片:(1)凌阳16位单片机SPCE061A ,这是我接触的第一个单片机,最高主频49MHz,32KB的 ...

  2. C语言面试题

    #include <stdio.h> int main() { ] = {, , , , }; ); // <==> (unsigned int)&a+sizeof(* ...

  3. BeanFactory 和ApplicationContext（Bean工厂和应用上下文）

    Bean工厂(BeanFactory接口),提供了基础的依赖注入支持. 应用上下文(ApplicationContext接口),建立在Bean工厂基础之上,提供了系统架构服务. Application ...

  4. SVN服务器详细权限控制

    版权声明:本文为博主原创文章,未经博主允许不得转载. 下面是我配置SVN服务器的过程,现在把我所配置的方法,记录下来,以供其他有需要的朋友参考,需要改进的地方,请指教! 一 环境 操作系统:windo ...

  5. WWDC2014之iOS使用动态库 framework【转】

    from:http://www.cocoachina.com/industry/20140613/8810.html JUN 12TH, 2014 苹果的开放态度 WWDC2014上发布的Xcode6 ...

  6. c#版在pc端发起微信扫码支付

    等了好久,微信官方终于发布了.net的demo. 主要代码: /** * 生成直接支付url,支付url有效期为2小时,模式二 * @param productId 商品ID * @return 模式 ...

  7. js实现多个图片淡入淡出，框架

    单个淡入淡出已经写过,可以看看上几遍的博文 <style> *{ margin:0; padding:0; } div{ height:100px; width:100px; backgr ...

  8. jsp动作标签概述

    *Jsp动作标签概述: >动作标签的作用是用来简化java脚本 >jsp动作标签是JavaWeb内置的动作标签,它们是已经定义好的动作标签,我们可以拿来直接使用. >JavaWeb一 ...

  9. leetcode 169

    169. Majority Element Given an array of size n, find the majority element. The majority element is t ...

  10. 在MySQL中阻止UPDATE语句没有添加WHERE条件的发生

    如果在生产环境中使用UPDATE语句更新表数据,此时如果忘记携带本应该添加的WHERE条件,那么..Oh,no…后果可能不堪设想.那么有没有什么办法可以阻止这样的事情发生,又不使用任何的审核工具呢.. ...