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

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

　　如何使用百度地图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为例，简单介绍一下：

  1.  <!DOCTYPE html>
  2.  <html>
  3.    <head>
  4.    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  6.    <style type="text/css">
  7.    body, html,#allmap {width: %;height: %;overflow: hidden;margin:;font-family:"微软雅黑";}
  8.    </style>
  9.    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4">
  10.    </script>
  11.    <title>地图展示</title>
  12.    </head>
  13.  <body>
  14.    <div id="allmap" style="width:800px;height:600px"></div>
  15.  </body>
  16.  </html>
  17.  <script type="text/javascript">
  18.    //百度地图API功能
  19.    var map = new BMap.Map("allmap"); //创建Map实例
  20.    var point = new BMap.Point(116.404, 39.915);//初始化地图,设置中心点坐标和地图级别
  21.    map.centerAndZoom(point, );
  22.    map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
  23.    map.setCurrentCity("北京"); //设置地图显示的城市 此项是必须设置的
  24.    map.enableScrollWheelZoom(true);//开启鼠标滚轮缩放
  25.    //创建标注
  26.    function addMarker(point){
  27.      var marker = new BMap.Marker(point);
  28.      map.addOverlay(marker);
  29.    }
  30.    addMarker(point);
  31.  </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. Uart的Verilog建模

    开发工具:Quartus II 9.1: 仿真软件:Questa Sim 10.0c: 硬件平台:Terasic DE2-115(EP2C35F672C6): 外设:MAX3232: 3个工程文件:& ...

  2. 【Robot Framework】robot framework 学习以及selenium、appnium、requests实践（一）

    话说之前自己写了个selenium的自动化框架,然后又研究了下RF,觉得RF这种基于关键字驱动的框架更为容易上手,当然在做一些比较繁琐的验证时,似乎还不是太灵活,不如自己写几行python来的实惠(也 ...

  3. ziparchiver添加后编译出错

    Build setting里面compile source as改为Objective-c

  4. jQuery基础 -- 如何判断页面元素存在与否

    在传统的Javascript里,当我们对某个页面元素进行某种操作前,最好先判断这个元素是否存在.原因是对一个不存在的元素进行操作是不允许的.例如: document.getElementById(&q ...

  5. SQL笔记 [SQL判断是否存在] [长期更新] (-2015.4)

    --判断某个存储过程是否存在if exists (select * from sysobjects where id = object_id(N'[p_CreateTable]') and OBJEC ...

  6. Angular $http解析通过接口获得的json数据

    刚接触angular不久,对很多东西都不了解,今天需要用angular通过接口得到json数据,折腾了好久,总算是能获取到数据了,下面是部分源码,仅供参考: HTML部分: <body ng-a ...

  7. Python函数中的参数（一）

    函数传递参数时的简要关键点: 1.参数的传递是通过自动将对象赋值给本地变量名来实现的.函数参数在实际中只是Python赋值的一个实例.因为引用是以指针的形式实现的,所有的参数实际上都是通过指针进行传递 ...

  8. linux grep命令详解

    linux grep命令详解 简介 grep (global search regular expression(RE) and print out the line,全面搜索正则表达式并把行打印出来 ...

  9. shell_基础知识

    参考: http://blog.csdn.net/kaizi318/article/details/9343551 开头程序必须以下面的行开始(必须方在文件的第一行):#!/bin/sh符号#!用来告 ...

  10. 借助 MySQLTuner 优化 MySQL 性能（转载的一篇文章）

    MySQLTuner 是一个 Perl 脚本,可以用来分析您的 MySQL 性能,并且基于收集到的信息给出相应的优化建议.这样子,您就可以调整 my.cnf 从而优化您的 MySQL 设置. 这边只是 ...