android加载bingmaps地图-------webview方式

最新推荐文章于 2022-01-19 10:44:31 发布

二分之一人生

最新推荐文章于 2022-01-19 10:44:31 发布

阅读量650

点赞数

分类专栏： android-GIS 文章标签： webview bingmaps android平台 GIS

本文链接：https://blog.csdn.net/qq_32176125/article/details/76066477

版权

android-GIS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

前面介绍到android加载bingmaps是通过导入第三放的library方式来显示地图的，这篇文章主要介绍加载bingmaps的另一种加载方式——通过webview加载；下面是加载的方式：

新建目录assets，然后再次目录中创建一个html文件，在这里我创建的文件名为：fieldView.html,然后再见下面代码写入：

<!DOCTYPE html>
<html style="width:100%;height: 100%;">
<head>
    <title>Bing Maps</title>
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v4.2.0/build/ol.js"></script>
</head>
<body style="position: relative;width:100%;height: 100%;padding:0px; margin:0px;">
<div id="map" class="map" style="position: relative;width:100%;height: 100%;padding:0px; margin:0px;">

<!--<select id="layer-select">-->
    <!--<option value="AerialWithLabels" selected>Aerial with labels</option>-->
    <!--<option value="Road">Road </option>-->
    <!--<option value="land">Ordnance Survey</option>-->
<!--</select>-->
<script>
      var styles = [
        'Road',
        'Aerial',
      ];
      var layers = [];
      var i, ii;
      for (i = 0, ii = styles.length; i < ii; ++i) {
       
        layers.push(new ol.layer.Tile({

          visible: false,
          preload: Infinity,
          source: new ol.source.BingMaps({
            key: '申请的密钥',
            imagerySet: styles[i] <!--地图的模式-->
          })
        }));
      }

      var map = new ol.Map({
        layers: layers,
        loadTilesWhileInteracting: true,
        target: 'map',
        view: new ol.View({
          center: ol.proj.fromLonLat([106.392, 38.603]),
          zoom: 15
        }),
        overlays: [infoDialog]
      });
    layers[1].setVisible(true);<!--显示卫星地图模式-->
    </script>
</div>
</body>
</html>