zoukankan      html  css  js  c++  java
  • JS版百度地图API

    地图的构建非常简单,官方的API文档也写得很清晰,我只做一总结: 一起jquery,17jquery

    一、引入JS :这个很容易理解,既然是调用JS版的百度地图,肯定得引用外部的JS文件了,而这个文件来自百度的服务器(所以必须得联网,不然就没戏。。),我们以后用到的所有方法都写在这个JS文件当中。

    内容来自17jquery

    17jquery.com

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

    这里的1.4 为JS版百度地图的版本号,目前最新版本为1.4。(理论上这条语句是可以放在html文件中的任何位置,但是一般人们都放在</head>标签之前,不过我曾看到一本书上说放在</body>前,效率是最高的。)

    内容来自17jquery

    二、在你的html文件中新建一个<div>容器 :添加一个id属性(这里为<divid="container"></div>)。这个容器是用来放置百度地图的,地图的大小可以通过调节div的样式实现。 一起jquery,17jquery

    三、新建一个百度地图

    内容来自17jquery

    <script type="text/javascript"> var map = new BMap.Map("container"); // 创建地图实例;("container")就是刚才新建的div的id属性值 var point = new BMap.Point(116.404, 39.915); // 创建点坐标;这个点是由经度和纬度构成的,点可以随意选取 map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别 //map.centerAndZoom("杭州"); //这条语句可以代替上面那一条,系统会自动定位到该城市,城市名可以根据用户需要自己定 //当然,如果这样子写,那就不需新建point点了 </script> 一起jquery,17jquery ~~~~~~~~~~~~~~~~~~~~~~~~这个是分割线~~~~~~~~~~~~~~~~~~~~~~~~~~ 内容来自17jquery

    只要这三步,就可以建立一个百度地图web应用。当然,还需要调节样式之类的。 内容来自17jquery

    下面是一个完整的HTML文件:(该例子来自百度官网) 一起jquery,17jquery

    <!DOCTYPE html><!--HTML5--> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Hello, World</title> <style type="text/css"> html{height:100%} body{height:100%;margin:0px;padding:0px} #container{height:100%} </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script> </head>        <body> <div id="container"></div> <script type="text/javascript"> var map = new BMap.Map("container"); // 创建地图实例 var point = new BMap.Point(116.404, 39.915); // 创建点坐标 map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别 </script> </body> </html>

    下面是我学习中用到的网站:

    http://developer.baidu.com/map/jsdevelop-1.htm
    http://developer.baidu.com/map/js-download.htm
    http://developer.baidu.com/map/static/doc/Reference_of_Baidu_JavaScript_API_v1.4.pdf

    转载请注明出处,尊重原创。http://www.cnblogs.com/jianrong-zheng/。谢谢

  • 相关阅读:
    ACdream 1069 无耻的出题人
    ACdream 1064 完美数
    ACdream 1028 Path
    ACdream 1020 The Game about KILL
    ACdream 1015 Double Kings
    CodeForces
    Codeforces 390A( 模拟题)
    Codeforces 389B(十字模拟)
    Codeforces 389A (最大公约数)
    Codeforces 417 C
  • 原文地址:https://www.cnblogs.com/jianrong-zheng/p/3227129.html
Copyright © 2011-2022 走看看