当前位置： 移动技术网 > IT编程>网页制作>Html5 > 页面中加入地图map

页面中加入地图map

2019年09月04日  | 移动技术网IT编程  | 我要评论

半b连体裤,风声后传,键盘大劫案

1、首先要有密钥ak ，可以自己注册获取或复制别人的 。搜索百度地图api （http://lbsyun.baidu.com/apiconsole/key）

2、地图示例

<head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=weumwivhzbcjzggapa5svoqv"></script> //这里是引入，ak=您的密钥
　　　　<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=你的密钥&s=1"></script> //如果是https的网站，后面要加&s=1 

    </head>
        <style>
            *{margin:0;padding:0;}
            #container{
                margin:50px auto;
                width:800px;height:600px;
                border:2px solid #f65f57;
            } 
        </style>
    <body>
        <div id="container"></div>  //显示地图的div
        <script type="text/javascript">
            var map= new bmap.map('container'); // 创建地图实例  
            var point= new bmap.point(114.059627,22.627415); // 创建点坐标 
            map.centerandzoom(point,16);    // 初始化地图，设置中心点坐标和地图缩放级别 
            map.addcontrol(new bmap.navigationcontrol());  //添加平移缩放控件，左上方位置
            map.addcontrol(new bmap.scalecontrol());//添加比例尺控件，左下方位置
            map.addcontrol(new bmap.maptypecontrol());//地图类型控件，右上方位置
            map.addcontrol(new bmap.overviewmapcontrol()); 
            var marker = new bmap.marker(point); // 创建标注    
            map.addoverlay(marker);   // 将标注添加到地图中
            
            msg = {    
                   width : 300,     // 信息窗口宽度    
                   height: 50,     // 信息窗口高度    
                   title : "公司简介" , // 信息窗口标题   
                   offset:new bmap.size(8,-12) //调位置，相当于css相对定位relative
            }    
            
            // 创建信息窗口对象  ，写文字内容
            var infowindow = new bmap.infowindow("<p>hello world!</p> <div style='color:red;'>客服电话：123456</div>", msg);    
            map.openinfowindow(infowindow, map.getcenter());      // 页面显示信息窗口

        </script>
    </body>

如图：

 

引原文：https://www.cnblogs.com/luhailin/p/6639943.html

 

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网