百度地图:卫星模式

1.第一种

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的key"></script>

<div style="width:100%;height:100vh;border:#ccc solid 1px;font-size:12px" id="map"></div>

<script type="text/javascript">

        var map = new BMap.Map("map", {mapType:BMAP_SATELLITE_MAP});

        var point = new BMap.Point(119.305724, 26.092186);

        map.centerAndZoom(point, 18);

        map.addControl(new BMap.NavigationControl());  //tab 地图卫星切换

        map.addControl(new BMap.MapTypeControl());      //tab 地图卫星切换

        var marker = new BMap.Marker(point);

        map.addOverlay(marker);

</script>

2.第二种

<script type="text/javascript">

    //创建和初始化地图函数:

    function initMap() {

      createMap();//创建地图

      setMapEvent();//设置地图事件

      addMapControl();//向地图添加控件

      addMapOverlay();//向地图添加覆盖物

    }

    function createMap() {

      var map = new BMap.Map("map", { mapType: BMAP_HYBRID_MAP });

      map.centerAndZoom(new BMap.Point(107.328895, 33.139306), 15);

      // map.addControl(new BMap.MapTypeControl()); //切换模式

      map.enableScrollWheelZoom();//启用地图滚轮放大缩小

    }

    function setMapEvent() {

      map.enableDragging();

    }

    function addClickHandler(target, window) {

      target.addEventListener("click", function () {

        target.openInfoWindow(window);

      });

    }

    function addMapOverlay() {

      var markers = [

        { content: "新四季广场", title: "", imageOffset: { width: -46, height: -21 }, position: { lat: 33.154179, lng: 107.327817 } },

        { content: "博雅新区", title: "", imageOffset: { width: -46, height: -21 }, position: { lat: 33.163609, lng: 107.324439 } },

        { content: "博雅新居", title: "", imageOffset: { width: -46, height: -21 }, position: { lat: 33.164032, lng: 107.324511 } },

        { content: "胜利新村", title: "", imageOffset: { width: -46, height: -21 }, position: { lat: 33.160587, lng: 107.350742 } },

        { content: "三合镇政府", title: "", imageOffset: { width: -46, height: -21 }, position: { lat: 33.139548, lng: 107.362096 } },

        { content: "博望小学", title: "", imageOffset: { width: -46, height: -21 }, position: { lat: 33.175577, lng: 107.301012 } },

        { content: "江湾社区", title: "", imageOffset: { width: -46, height: -21 }, position: { lat: 33.141241, lng: 107.303168 } }

      ];

      for (var index = 0; index < markers.length; index++) {

        var point = new BMap.Point(markers[index].position.lng, markers[index].position.lat);

        var marker = new BMap.Marker(point, {

          icon: new BMap.Icon("http://api.map.baidu.com/lbsapi/createmap/images/icon.png", new BMap.Size(20, 25), {

            imageOffset: new BMap.Size(markers[index].imageOffset.width, markers[index].imageOffset.height)

          })

        });

        var label = new BMap.Label(markers[index].title, { offset: new BMap.Size(25, 5) });

        var opts = {

          width: 200,

          title: markers[index].title,

          enableMessage: false

        };

        var infoWindow = new BMap.InfoWindow(markers[index].content, opts);

        marker.setLabel(label);

        addClickHandler(marker, infoWindow);

        map.addOverlay(marker);

      };

    }

    //向地图添加控件

    function addMapControl() {

      var scaleControl = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT });

      scaleControl.setUnit(BMAP_UNIT_IMPERIAL);

      map.addControl(scaleControl);

      var navControl = new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE });

      map.addControl(navControl);

      var overviewControl = new BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: true });

      map.addControl(overviewControl);

    }

    var map;

    initMap();

  </script>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

_木棠

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值