百度地图调用

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html{width: 100%;height: 100%;margin:0; font-size: 12px;  font-family:"微软雅黑";}
        #allmap{height:400px;width:800px;}
        #r-result{width:100%; font-size:14px;}
    </style>
        <!-- 设置地图ak, api key 申请的密钥 -->
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=XXXX"></script>   
    <title>百度地图</title>
</head>
<body>
    <div id="allmap" ></div>
</body>
</html>
<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
    // 定义标注
    var map = new BMap.Map("allmap");
    var point = new BMap.Point(108.945587,34.168887);
    map.centerAndZoom(point,18);
    var marker = new BMap.Marker(point);        // 创建标注    
    map.addOverlay(marker);                     // 将标注添加到地图中


    //定义标注图标
    function theLocation(){
        var city = document.getElementById("cityName").value;
        if(city != ""){
            map.centerAndZoom(city,18);      // 用城市名设置地图中心点,显示比例级别
        }
    }
    //鼠标滚动缩放
    map.enableScrollWheelZoom(true);
    var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角,添加比例尺
    var top_left_navigation = new BMap.NavigationControl();  //左上角,添加默认缩放平移控件
    var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}); //右上角,仅包含平移和缩放按钮

    // 添加定位控件
    var geolocationControl = new BMap.GeolocationControl();
    geolocationControl.addEventListener("locationSuccess", function(e){
    // 定位成功事件
    var address = '';
    address += e.addressComponent.province;
    address += e.addressComponent.city;
    address += e.addressComponent.district;
    address += e.addressComponent.street;
    address += e.addressComponent.streetNumber;
    alert("当前定位地址为:" + address);
    });
    geolocationControl.addEventListener("locationError",function(e){
    // 定位失败事件
    alert(e.message);
    });
  //添加定位到地图
  function addGeolocation(){map.addControl(geolocationControl);}
    var marker = new BMap.Marker(new BMap.Point(108.945587,34.168887)); // 创建点
    map.centerAndZoom(point,18);//初始化地图,设置中心坐标点和地图级数
    var marker = new BMap.Marker(point);//创建标注
    map.addOverlay(marker);//方法addOverlay() 

    // 信息窗口
    var opts = {    
        width : 250,     // 信息窗口宽度    
        height: 60,     // 信息窗口高度 
        title : "<font size='3' color='#cc5522'>XXX文化传播有限公司</font>"  // 信息窗口标题   
    }    
    var infoWindow = new BMap.InfoWindow('地址:x'x曲西街摩登小镇143号', opts);  // 创建信息窗口对象    
    map.openInfoWindow(infoWindow, map.getCenter());      // 打开信息窗口  
</script>
posted @ 2021-09-16 11:09  S流星  阅读(193)  评论(0编辑  收藏  举报