工作关系我会较高的频率使用高德地图，高德地图本身提供了一些功能，如测量距离等，其他一些三方网站也有提供一些功能如：坐标转换等功能。但分散在不同的网站，使用起来多有不便。为此，我决定自己学习高德JS API，以满足自己的使用需求。

引入JS API入口

首先注册成为开发者，申请JS API KEY.然后使用以下语法引入JS API入口.

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.4&key=您申请的key值"></script>

创建地图

选定地图的div容器

HTML
<div id="container" style="width:500px; height:300px"></div>

要在页面上显示地图我们需要一个div元素作为地图的容器。在上述示例中，我们定义名为 "container" 的 div，并使用样式属性设置其大小。

创建一个AMap.MAP对象。

    javascript
    var map = new AMap.Map('container', {
        resizeEnable: true,
        zoom:11,
        center: [116.397428, 39.90923]
 });

在这里我们设置地图中心为116.397428, 39.90923。完整的HTML文件如下，将其保存为mapdemo.html,使用浏览器打开这个文件，确保连接Internet，就可以看见地图了。

HTML
<!DOCTYPE HTML>
  <head>
    <meta charset="utf-8">
    <style type="text/css">
      body,html,#container{
        height: 100%;
        margin: 0px;
      }
    </style>
    <title>高德地图示例</title>
  </head>
  <body>
    <div id="container" tabindex="0"></div>
    <script type="text/javascript" src="**http://webapi.amap.com/maps?v=1.4.4**&key=您申请的key值"></script>
    <script type="text/javascript">
        var map = new AMap.Map('container',{
            resizeEnable: true,
            zoom: 10,
            center: [116.397428, 39.90923]
        });
    </script>
  </body>
</html>

标签: none

添加新评论