地图: 使用百度地图

1. 初始化

      html,
      body {
        height: 100%;
      }
      #container {
        height: 100%;
      }
      /* 隐藏logo */
      .anchorBL {
        display: none;
      }

    <div id="container"></div>
    <script
      type="text/javascript"
      src="http://api.map.baidu.com/api?v=3.0&ak=QkOjavGG5gLQVpWsadP3EssXnElC1e6Q"
    ></script>
    <script>
      // 一：创建地图实例
      var map = new BMap.Map('container', {
        enableBizAuthLogo: true
      })
      var point = new BMap.Point(116.404, 39.915) // 创建点坐标
      map.centerAndZoom(point, 15) // 初始化地图，设置中心点坐标和地图级别

      // 开启鼠标滚轮缩放
      map.enableScrollWheelZoom(true)
      // 二：标注
      var myicon = new BMap.Icon(
        'http://webmap0.map.bdstatic.com/wolfman/static/common/images/us_cursor_9517a2b.png', // 百度图片
        new BMap.Size(10, 22), // 视窗大小
        {
          imageSize: new BMap.Size(144, 92), // 引用图片实际大小
          imageOffset: new BMap.Size(-10, 0) // 图片相对视窗的偏移
        }
      )
      // 三：添加控件 -- 开始
      // 添加控件 -- 结束
      var marker = new BMap.Marker(point, { icon: myicon })
      map.addOverlay(marker)
    </script>