zoukankan      html  css  js  c++  java
  • 在网页中嵌入带标识的百度地图


    最近在做一个网站,需要嵌入经销商的位置和信息。搜索了很多资料,终于完成了功能,给大家分享一下。
    地图功能:按标尺缩放,鼠标滑动缩放,添加标注和 信息。
    具体步骤:
    1:首先到百度地图API,申请密钥。(如果没有百度账户得先注册一个)
    2:百度地图API的功能做得比较分散,像标注、缩放等都是需要自己一步步找代码的。我把代码整理了一下,给大家复制一下,应该是最简洁的了
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=申请的密钥"></script>
    </head>
    <body>
    <div style="500px;height:500px;margin:0 auto" id="allmap"></div>
    <script type="text/javascript">
        var map = new BMap.Map("allmap");    
        var point = new BMap.Point(116.384, 39.987);  // 需要标注的位置的经纬度  
        map.centerAndZoom(point, 15);  // 中心位置和缩放倍数
        map.enableScrollWheelZoom();   // 添加滚动轴
        map.addControl(new BMap.NavigationControl());   // 添加左上角的标尺工具
        map.addControl(new BMap.NavigationControl());    
        map.addControl(new BMap.ScaleControl());    
        map.addControl(new BMap.OverviewMapControl());    
        map.addControl(new BMap.MapTypeControl());    
        map.setCurrentCity("北京"); 
        
        var opts = {    
             width : 200,     // 信息窗口宽度    
            height: 20,     // 信息窗口高度    
             title : "健翔桥东华亭家园"  // 信息窗口标题   
        }    
        var infoWindow = new BMap.InfoWindow("xxx公司", opts);  // 创建信息窗口对象    
        map.openInfoWindow(infoWindow, map.getCenter());      // 打开信息窗口 
        var marker = new BMap.Marker(point);        // 创建标注,即地图上的小红点    
        map.addOverlay(marker);                             
    </script>

  • 相关阅读:
    Fluent 18.0新功能之:其他
    【小白的CFD之旅】小结及预告
    【小白的CFD之旅】19 来自计算网格的困惑
    【小白的CFD之旅】18 控制方程基础
    【小白的CFD之旅】23 串行与并行
    【小白的CFD之旅】22 好网格与坏网格
    JS ES6的变量的结构赋值
    JS中some()和every()和join()和concat()和pop(),push(),shift(),unshfit()和map()和filter()
    JS(原生js和jq方式)获取元素属性(自定义属性),删除属性(自定义属性)
    javascript中this的指向问题
  • 原文地址:https://www.cnblogs.com/BeacherGong/p/3158390.html
Copyright © 2011-2022 走看看