zoukankan      html  css  js  c++  java
  • 一个简单的地图实现

    创建一个地图的步骤:

     1、HTML生命为<!DOCTYPE >

    2、引入百度的jjs的ap:<script type="text/javascript" src="http://api.map.baidu.com/api?key=79d13dd2c1076b1ad827484228ee4dea&v=1.1&services=true" ></script>

    3、声明地图在哪个id下(不设置大小不显示):

    <style type="text/css">
    #container{
    height:500px;
    width: 500px;
    }
    </style>
    View Code

    4、在body中写一个div,id为上述的id名称。

    5、在div之外,写一个js代码:

    1 var map = new BMap.Map("id名称");//创建一个放置地图的容器
    2 var point = new BMap.Point(116.404, 39.915)//定位
    3 map.centerAndZoom(point,11);//11位地图显示级别

    完整的代码:

     1 <!DOCTYPE >
     2 <html>
     3 
     4     <head>
     5         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     6         <title>地图初级</title>
     7         <script type="text/javascript" src="http://api.map.baidu.com/api?key=79d13dd2c1076b1ad827484228ee4dea&v=1.1&services=true"></script>
     8         <style type="text/css">
     9             #container {
    10                 height: 500px;
    11                 width: 500px;
    12             }
    13         </style>
    14     </head>
    15 
    16     <body>
    17         <div id="container"></div>
    18         <script type="text/javascript">
    19             /*
    20              * 在container容器中创建一个地图,参数container为div的id属性
    21              */
    22             var map = new BMap.Map("container");
    23             /**
    24              * 定位
    25              */
    26             var point = new BMap.Point(116.404, 39.915);
    27             /**
    28              * 将point移动到浏览器中心,并且地图级别调整为15;
    29              */
    30             map.centerAndZoom(point, 11);
    31         </script>
    32     </body>
    33 
    34 </html>
  • 相关阅读:
    server域名与IIS的目录安全性
    机械臂生成URDF文件操作过程
    ROS2 学习参考链接
    solidworks 导入urdf 到ubuntu 在rviz 和 gazebo 显示
    vscode koroFileHeader插件配置
    python 获取当前类中非私有方法
    solidworks 导出urdf 在python ikpy库 使用注意点
    solidworks 打开step 文件并导出文件
    ikpy joint和 link区别
    python 导入包错误
  • 原文地址:https://www.cnblogs.com/swfzzz/p/8424449.html
Copyright © 2011-2022 走看看