百度地图 实现标注,缩放,比例尺,切换类型功能

<script type="text/javascript">
    //百度地图异步加载
    function loadJScript() {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "http://api.map.baidu.com/api?v=2.0&ak=nSxiPohfziUaCuONe4ViUP2N&callback=init";
        document.body.appendChild(script);
    }
    function init() {

    // 百度地图API功能
    var map = new BMap.Map("map");    // 创建Map实例
    var point = new BMap.Point(109.703707,28.267073);
    map.centerAndZoom(point, 28);  // 初始化地图,设置中心点坐标和地图级别
    //添加地图类型控件
    map.addControl(new BMap.MapTypeControl({
        mapTypes:[
            BMAP_NORMAL_MAP,
            BMAP_HYBRID_MAP
        ]}));     
    map.setCurrentCity("吉首");          // 设置地图显示的城市 此项是必须设置的
 
    
    var marker = new BMap.Marker(point);  // 创建标注
    map.addOverlay(marker);              // 将标注添加到地图中

    var label = new BMap.Label("吉首市网格化指挥中心",{offset:new BMap.Size(-50,-30)});
    label.setStyle({
        borderRadius:"3px",
        padding:"3px",
        borderColor:"#3c8be7",
        fontSize:"14px"
    });
    marker.setLabel(label);

    var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角,添加比例尺
    var top_left_navigation = new BMap.NavigationControl();  //左上角,添加默认缩放平移控件
    
    //添加控件和比例尺
    map.addControl(top_left_control);        
    map.addControl(top_left_navigation);      
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    }  

    window.onload = loadJScript;  //异步加载地图
</script>


猜你喜欢

转载自blog.csdn.net/u013365404/article/details/80653319
今日推荐