当前位置： 文江博客话题详情

如何同时显示MapView和StreetView？

发布于 2024-12-07 04:29:12 字数 195 浏览 4 评论 0原文

我想显示一个 MapView，可用于选择要由 StreetView 在单独区域中显示的点。我知道 API 不允许在单个进程中使用多个 MapView。

如何使 StreetView 显示在与 MapView 不同的区域中？

我已经能够毫无问题地获取静态街景，但我想要动态街景和地图视图。

ATDHVAANNKCSE（提前致谢）

原文

I want to display a MapView that may be used to select a point to be displayed by StreetView in a separate area. I know that the API disallows multiple MapViews in a single process.

How can I cause StreetView to display in a different area than that which displays MapView?

I have been able to grab a static streetview without any problems, but I want to have dynamic StreetView and MapView.

aTdHvAaNnKcSe (THANKS in ADVANCE)

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（3）

美人如玉 2024-12-14 04:29:12

您可以在 WebView< 中加载 360 度全景 Google 街景 /代码>。

尝试以下活动，其中 google-street-view 和 google-map 可以在单个 Activity 中同时导航：

public class StreetViewActivity extends Activity {

    private WebView webView;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mappingWidgets();
    }

    private void mappingWidgets() {

        webView = (WebView) findViewById(R.id.webView);
        webView.getSettings().setJavaScriptEnabled(true);

        webView.getSettings().setLoadWithOverviewMode(true);
        webView.getSettings().setUseWideViewPort(true);
        webView.getSettings().setSupportZoom(false);  


        // If you want to load it from assets (you can customize it if you want)
        //Uri uri = Uri.parse("file:///android_asset/streetviewscript.html");

        // If you want to load it directly
        Uri uri = Uri.parse("https://google-developers.appspot.com/maps/documentation/javascript/examples/full/streetview-simple");
        webView.loadUrl(uri.toString());
    }
}

您可以将其作为静态 HTML 页面放在应用程序的资产文件夹中，然后您可以根据您的需要修改它的 java 脚本使用 Google 街景 API。

在这里，我发布了示例 streetviewscript.html，您可以将其放入应用程序的资产文件夹中并根据您的需要进行自定义：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Google Maps JavaScript API v3 Example: Street View Layer</title>
    <link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
    <script>

      function initialize() {
        var fenway = new google.maps.LatLng(42.345573,-71.098326);
        var mapOptions = {
          center: fenway,
          zoom: 14,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(
            document.getElementById('map_canvas'), mapOptions);
        var panoramaOptions = {
          position: fenway,
          pov: {
            heading: 34,
            pitch: 10,
            zoom: 1
          }
        };
        var panorama = new  google.maps.StreetViewPanorama(document.getElementById('pano'),panoramaOptions);
        map.setStreetView(panorama);
      }
    </script>
  </head>
  <body onload="initialize()">
    <div id="map_canvas" style="width: 800px; height: 800px"></div>
    <div id="pano" style="position:absolute; left:810px; top: 8px; width: 800px; height: 800px;"></div>
  </body>
</html>

编辑： 要同时导航两个街景视图，请加载来自资产的以下 HTML ：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Google Maps JavaScript API v3 Example: Street View Events</title>

    <STYLE type="text/css"> 
        body, html { height:100%; padding:0; margin:0;} 
        #pano { float:left }
        #pano1 { float:right }
    </STYLE>
    <link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>

      var cafe = new google.maps.LatLng(37.869085,-122.254775);

      var heading_value = 270;
      var pitch_value = 0;
      var zoom_value = 1;

      function initialize() {

        var panoramaOptions = {
          position: cafe,
          pov: {
            heading: heading_value,
            pitch: pitch_value,
            zoom: zoom_value
          },
          visible: true
        };

        var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), panoramaOptions);
        var panorama2 = new google.maps.StreetViewPanorama(document.getElementById('pano1'), panoramaOptions);  

        google.maps.event.addListener(panorama, 'pano_changed', function() {
            var panoCell = document.getElementById('pano_cell');
            panoCell.innerHTML = panorama.getPano();
            panorama2.setPano(panorama.getPano());
        });

        google.maps.event.addListener(panorama, 'links_changed', function() {
            var linksTable = document.getElementById('links_table');
            while(linksTable.hasChildNodes()) {
              linksTable.removeChild(linksTable.lastChild);
            };
            var links =  panorama.getLinks();
            panorama2.setLinks(panorama.getLinks());
            for (var i in links) {
              var row = document.createElement('tr');
              linksTable.appendChild(row);
              var labelCell = document.createElement('td');
              labelCell.innerHTML = '<b>Link: ' + i + '</b>';
              var valueCell = document.createElement('td');
              valueCell.innerHTML = links[i].description;
              linksTable.appendChild(labelCell);
              linksTable.appendChild(valueCell);
            }
        });

        google.maps.event.addListener(panorama, 'position_changed', function() {
            var positionCell = document.getElementById('position_cell');
            positionCell.firstChild.nodeValue = panorama.getPosition();
            panorama2.setPosition(panorama.getPosition());
        });

        google.maps.event.addListener(panorama, 'pov_changed', function() {
            var headingCell = document.getElementById('heading_cell');
            var pitchCell = document.getElementById('pitch_cell');
            headingCell.firstChild.nodeValue = panorama.getPov().heading;
            panorama2.setPov(panorama.getPov());
            pitchCell.firstChild.nodeValue = panorama.getPov().pitch;
        });
    }
    </script>
  </head>
  <body onload="initialize()">

    <div style="width:100%; height :100%;  background-color:Lime;">
        <div id="pano" style="width:50%; height:100%; background-color:Blue;">
        </div>
        <div id="pano1" style="width:50%; height:100%; background-color:Gray;">
        </div>
    </div>
      <div id="panoInfo" style="width: 425px; height: 240 px;float:left; display: none;">
        <table>
            <tr>
                <td><b>Position</b></td><td id="position_cell"> </td>
            </tr>
            <tr>

                    <td><b>POV Heading</b></td><td id="heading_cell">270</td>
                </tr>
                <tr>
                    <td><b>POV Pitch</b></td><td id="pitch_cell">0.0</td>
                </tr>
                <tr>
                    <td><b>Pano ID</b></td><td id="pano_cell"> </td>
                </tr>
                <table id="links_table"></table>
            </table>
        </div>
      </body>
    </html>

You can load 360 degree panoramic Google street-view in your WebView.

Try following activity in which both google-street-view and google-map can be navigated simultaneously in single Activity :

public class StreetViewActivity extends Activity {

    private WebView webView;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mappingWidgets();
    }

    private void mappingWidgets() {

        webView = (WebView) findViewById(R.id.webView);
        webView.getSettings().setJavaScriptEnabled(true);

        webView.getSettings().setLoadWithOverviewMode(true);
        webView.getSettings().setUseWideViewPort(true);
        webView.getSettings().setSupportZoom(false);  


        // If you want to load it from assets (you can customize it if you want)
        //Uri uri = Uri.parse("file:///android_asset/streetviewscript.html");

        // If you want to load it directly
        Uri uri = Uri.parse("https://google-developers.appspot.com/maps/documentation/javascript/examples/full/streetview-simple");
        webView.loadUrl(uri.toString());
    }
}

You can place this as static HTML page in assets folder of your application and then you can modify it's java-script according to your needs using Google street-view API.

Here I am posting sample streetviewscript.html that you can put in assets folder of your application and customize it according to your needs :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Google Maps JavaScript API v3 Example: Street View Layer</title>
    <link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
    <script>

      function initialize() {
        var fenway = new google.maps.LatLng(42.345573,-71.098326);
        var mapOptions = {
          center: fenway,
          zoom: 14,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(
            document.getElementById('map_canvas'), mapOptions);
        var panoramaOptions = {
          position: fenway,
          pov: {
            heading: 34,
            pitch: 10,
            zoom: 1
          }
        };
        var panorama = new  google.maps.StreetViewPanorama(document.getElementById('pano'),panoramaOptions);
        map.setStreetView(panorama);
      }
    </script>
  </head>
  <body onload="initialize()">
    <div id="map_canvas" style="width: 800px; height: 800px"></div>
    <div id="pano" style="position:absolute; left:810px; top: 8px; width: 800px; height: 800px;"></div>
  </body>
</html>

Edit : For simultaneously navigating two street views, load following HTML from assets :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Google Maps JavaScript API v3 Example: Street View Events</title>

    <STYLE type="text/css"> 
        body, html { height:100%; padding:0; margin:0;} 
        #pano { float:left }
        #pano1 { float:right }
    </STYLE>
    <link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>

      var cafe = new google.maps.LatLng(37.869085,-122.254775);

      var heading_value = 270;
      var pitch_value = 0;
      var zoom_value = 1;

      function initialize() {

        var panoramaOptions = {
          position: cafe,
          pov: {
            heading: heading_value,
            pitch: pitch_value,
            zoom: zoom_value
          },
          visible: true
        };

        var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), panoramaOptions);
        var panorama2 = new google.maps.StreetViewPanorama(document.getElementById('pano1'), panoramaOptions);  

        google.maps.event.addListener(panorama, 'pano_changed', function() {
            var panoCell = document.getElementById('pano_cell');
            panoCell.innerHTML = panorama.getPano();
            panorama2.setPano(panorama.getPano());
        });

        google.maps.event.addListener(panorama, 'links_changed', function() {
            var linksTable = document.getElementById('links_table');
            while(linksTable.hasChildNodes()) {
              linksTable.removeChild(linksTable.lastChild);
            };
            var links =  panorama.getLinks();
            panorama2.setLinks(panorama.getLinks());
            for (var i in links) {
              var row = document.createElement('tr');
              linksTable.appendChild(row);
              var labelCell = document.createElement('td');
              labelCell.innerHTML = '<b>Link: ' + i + '</b>';
              var valueCell = document.createElement('td');
              valueCell.innerHTML = links[i].description;
              linksTable.appendChild(labelCell);
              linksTable.appendChild(valueCell);
            }
        });

        google.maps.event.addListener(panorama, 'position_changed', function() {
            var positionCell = document.getElementById('position_cell');
            positionCell.firstChild.nodeValue = panorama.getPosition();
            panorama2.setPosition(panorama.getPosition());
        });

        google.maps.event.addListener(panorama, 'pov_changed', function() {
            var headingCell = document.getElementById('heading_cell');
            var pitchCell = document.getElementById('pitch_cell');
            headingCell.firstChild.nodeValue = panorama.getPov().heading;
            panorama2.setPov(panorama.getPov());
            pitchCell.firstChild.nodeValue = panorama.getPov().pitch;
        });
    }
    </script>
  </head>
  <body onload="initialize()">

    <div style="width:100%; height :100%;  background-color:Lime;">
        <div id="pano" style="width:50%; height:100%; background-color:Blue;">
        </div>
        <div id="pano1" style="width:50%; height:100%; background-color:Gray;">
        </div>
    </div>
      <div id="panoInfo" style="width: 425px; height: 240 px;float:left; display: none;">
        <table>
            <tr>
                <td><b>Position</b></td><td id="position_cell"> </td>
            </tr>
            <tr>

                    <td><b>POV Heading</b></td><td id="heading_cell">270</td>
                </tr>
                <tr>
                    <td><b>POV Pitch</b></td><td id="pitch_cell">0.0</td>
                </tr>
                <tr>
                    <td><b>Pano ID</b></td><td id="pano_cell"> </td>
                </tr>
                <table id="links_table"></table>
            </table>
        </div>
      </body>
    </html>
回复 原文
横笛休吹塞上声 2024-12-14 04:29:12

如何使 StreetView 显示在与 MapView 不同的区域中？

街景仅在设备上作为其自己的活动（来自其自己的应用程序）提供，因此无法与您自己的任何小部件一起显示。

How can I cause StreetView to display in a different area than that which displays MapView?

Street View is only available on the device as its own activity (from its own application) and therefore cannot be displayed alongside any of your own widgets.

回复 原文
诠释孤独 2024-12-14 04:29:12

在 Android 上，请查看示例街景全景图和地图，网址为 https:// Developers.google.com/maps/documentation/android/code-samples。但我不确定它是否也适用于自定义街景。

On Android have a look at the sample Street View Panorama and Map available at https://developers.google.com/maps/documentation/android/code-samples. But i am not sure if it will also do for custom street views.

回复 原文
~没有更多了~

关于作者

深居我梦

暂无简介

文章
评论
26 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

夢野间

文章 0 评论 0

百度③文鱼

文章 0 评论 0

小草泠泠

文章 0 评论 0

zhuwenyan

文章 0 评论 0

weirdo

文章 0 评论 0

坚持沉默

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文