javascript - 到达谷歌地图中的标记时显示自定义媒体-6ren

javascript - 到达谷歌地图中的标记时显示自定义媒体

转载作者：行者123 更新时间：2023-11-28 02:36:48

25

4

我正在使用 HTML 和 JavaScript 构建移动应用程序，我希望在用户到达我在 map 上设置的自定义标记时显示视频、照片或音频。到目前为止我的代码如下。我的问题是如何识别用户在我的标记周围以及如何在用户到达该位置时显示音频、视频、照片或文本？该媒体很可能存储在我设置的 SQL 服务器上。如果有人能指出我正确的方向，或者让我知道如何做到这一点，我将不胜感激。

谢谢!

到目前为止我的代码:

    <!doctype  html>
    <html>
    <head>
        <title>Application Demo</title>
        <meta name="viewport" conmtent="width=device-width, initial-scale=1.0,     user-scalable=no">
        <meta charset="utf-8">
            <style>
                html, body, #mapcanvas {
                    margin: 0;
                    padding: 0;
                    height: 98%;
                    }
            </style>
            <script src="https://maps.googleapis.com/maps/api/js?    v=3.exp&sensor=false"></script>
             <script>
      var map;

      var coords = new google.maps.LatLng(36.995698, -86.762123);
      function initialize() {
        var mapOptions = {
          zoom: 18,
          center: coords,
          mapTypeId: google.maps.MapTypeId.HYBRID

            };
        map = new google.maps.Map(document.getElementById('mapcanvas'),
            mapOptions);
        var marker = new google.maps.Marker({
            position: coords,
            map: map,
            title: 'ITE',
            });
            }
    </script>
    </head>
    <body onload="initialize()">
        <div id="mapcanvas"></div>
        <div>
                <p>Maps provided by Google Maps</p>
        </div>
    </body>
</html>

最佳答案

我认为您可以出于您的目的喜欢此代码。

<!DOCTYPE html>
<html>
  <head>
    <title>Application Demo</title>
    <meta name="viewport" conmtent="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #mapcanvas {
        margin: 0;
        padding: 0;
        height: 98%;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
      var map;
      var positions = [
        {lat : 36.995, lng : -86.764, "id" : "12345", pos : null, marker : null},
        {lat : 36.996, lng : -86.762, "id" : "67890", pos : null, marker : null}
      ];

      function initialize() {
        var coords = new google.maps.LatLng(36.995698, -86.762123);
        var mapOptions = {
          zoom : 18,
          center : coords,
          mapTypeId : google.maps.MapTypeId.HYBRID
        };
        map = new google.maps.Map(document.getElementById('mapcanvas'), mapOptions);
        google.maps.event.addListenerOnce(map, "bounds_changed", watchStart);

        var i;
        for (i = 0; i < positions.length; i++) {
          positions[i].pos = new google.maps.LatLng(positions[i].lat, positions[i].lng);
        }

      }

      //Check Geolocation API of HTML5
      function watchStart() {
        if (navigator.geolocation) {
          navigator.geolocation.watchPosition(showPosition);
        } else {
          alert("Geolocation is not supported by this browser.");
        }
      }

      function createMarker(options) {
        var marker = new google.maps.Marker(options);
        google.maps.event.addListener(marker, "click", onMarker_clicked);
        return marker;
      }

      function onMarker_clicked() {
        alert(this.get("id"));
      }


      function showPosition(position) {
        var nowPos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
        map.panTo(nowPos);

        var distance, bounds = map.getBounds();
        for (var i = 0; i < positions.length; i++) {
          if (bounds.contains(positions[i].pos)) {
            if (!positions[i].marker) {
              //The markers which are inside of the map.
              positions[i].marker = createMarker({
                position : positions[i].pos,
                map : map,
                id : positions[i].id
              });
            }
          } else if (positions[i].marker){
            //The markers which are out side of the map.
            positions[i].marker.setMap(null);
            delete positions[i].marker;
          }
        }
      }
    </script>
  </head>
  <body onload="initialize()">
    <div id="mapcanvas"></div>
    <div>
      <p>
        Maps provided by Google Maps
      </p>
    </div>
  </body>
</html>

关于javascript - 到达谷歌地图中的标记时显示自定义媒体，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13353772/

25

4

0

文章推荐： c++ - 在 FLTK 中使用 GLUT

文章推荐： jquery - 一个接一个地选择列表中的每个元素的效果

文章推荐： JavaScript 邮政编码验证

文章推荐： javascript - 如何检测浏览器询问用户设备权限？

java - JFrame 中的 JPanel 中的 JScrollPane 中的 JTextPane
我想做的是让 JTextPane 在 JPanel 中占用尽可能多的空间。对于我使用的 UpdateInfoPanel: public class UpdateInfoPanel extends JP
java - JFrame 中的 JPanel 中的 JTextArea 中的 JScrollPane 出现问题
我在 JPanel 中有一个 JTextArea，我想将其与 JScrollPane 一起使用。我正在使用 GridBagLayout。当我运行它时，框架似乎为 JScrollPane 腾出了空间，但
ios - iOs Xcode 中的 UIViewController 中的 UIView 中的 UITableView
我想在 xcode 中实现以下功能。我有一个 View Controller 。在这个 UIViewController 中，我有一个 UITabBar。它们下面是一个 UIView。将 UITab
sql - 与 SQL 中的 STUFF 等效的函数(MySQL 中的 GROUP_CONCAT/Oracle 中的 LISTAGG)
有谁知道Firebird 2.5有没有类似于SQL中“STUFF”函数的功能？我有一个包含父用户记录的表，另一个表包含与父相关的子用户记录。我希望能够提取用户拥有的“ROLES”的逗号分隔字符串，而
Mirth 中的 Json 解析或 Mirth 中的 Json 或 Mirth 中的 HL7 到 JSON
我想使用 JSON 作为 mirth channel 的输入和输出，例如详细信息保存在数据库中或创建 HL7 消息。简而言之，输入为 JSON 解析它并输出为任何格式。最佳答案 var objec
python - 如果文件 1 中的 A 列 = 文件 2 中的 A 列，则替换为文件 2 中的 B 列
通常我会使用 R 并执行 merge.by，但这个文件似乎太大了，部门中的任何一台计算机都无法处理它! (任何从事遗传学工作的人的附加信息)本质上，插补似乎删除了 snp ID 的 rs 数字，我只剩
Javascript 中的 HAML 中的 Javascript
我有一个以前可能被问过的问题，但我很难找到正确的描述。我希望有人能帮助我。在下面的代码中，我设置了varprice，我想添加javascript变量accu_id以通过rails在我的数据库中查找记
HTML 中的 SVG 中的 HTML
我有一个简单的 SVG 文件，在 Firefox 中可以正常查看 - 它的一些包装文本使用 foreignObject 包含一些 HTML - 文本包装在 div 中:
ruby - Ruby 中的 If block 中的 "Or"
所以我正在为学校编写一个 Ruby 程序，如果某个值是 1 或 3，则将 bool 值更改为 true，如果是 0 或 2，则更改为 false。由于我有 Java 背景，所以我认为这段代码应该有效:
amazon-web-services - 如何从账户 A 中的 Lambda(VPC 中的 Lambda)调用账户 B(VPC 中的此 Lambda)中的 AWS Lambda 函数
我做了什么: 我在这些账户之间创建了 VPC 对等连接互联网网关也连接到每个 VPC 还配置了路由表(以允许来自双方的流量) 情况1: 当这两个 VPC 在同一个账户中时，我成功测试了从另一个 La
php - 如何获取 column1 中的 value1 和 column2 中的 value2 但 column1 中的 value2 在 column2 中没有 value1 的行？
我有一个名为 contacts 的表: user_id contact_id 10294 10295 10294 10293 10293 10294 102
php - Magento 中的 foreach 中的 getChildHtml
我正在使用 Magento 中的新模板。为避免重复代码，我想为每个产品预览使用相同的子模板。特别是我做了这样一个展示: $products = Mage::getModel('catalog/pro
protocols - Elixir 中的 "for"中的 "defimpl"实际上检查了什么？
“for”是否总是检查协议(protocol)中定义的每个函数中第一个参数的类型？编辑(改写): 当协议(protocol)方法只有一个参数时，根据该单个参数的类型(直接或任意)找到实现。当协议(p
javascript - PHP 中的 JavaScript 中的 PHP
我想从我的 PHP 代码中调用 JavaScript 函数。我通过使用以下方法实现了这一点: echo ' drawChart($id); '; 这工作正常，但我想从我的 PHP 代码中获取数据，我使
javascript - html 中的 html 中的 JavaScript
这个问题已经有答案了: Event binding on dynamically created elements? (23 个回答) 已关闭 5 年前。我有一个动态表单，我想在其中附加一些其他 h
javascript - componentDidMount() 中的 .map 中的 setState
我正在尝试找到一种解决方案，以在 componentDidMount 中的映射项上使用 setState。我正在使用 GraphQL连同 Gatsby返回许多 data 项目，但要求在特定的 pat
android - ScrollView 中的 View 中的 OnTouchListener
我在 ScrollView 中有一个 View 。只要用户按住该 View ，我想每 80 毫秒调用一次方法。这是我已经实现的: final Runnable vibrate = new Runnab
android - GetStringUTFChars 中的 dvmDecodeIndirectRef 中的 dvmAbort
我用 jni 开发了一个 android 应用程序。我在 GetStringUTFChars 的 dvmDecodeIndirectRef 中得到了一个 dvmabort。我只中止了一次。为什么会这
android - Activity 中的 FragmentPagerAdapter 中的 RecyclerView
当我到达我的 Activity 时，我调用 FragmentPagerAdapter 来处理我的不同选项卡。在我的一个选项卡中，我想显示一个 RecyclerView，但他从未出现过，有了断点，我看到
android - Activity 中的 DialogFragment 中的 RecyclerView
当我按下 Activity 中的按钮时，会弹出一个 DialogFragment。在对话框 fragment 中，有一个看起来像普通 ListView 的 RecyclerView。我想要的行为是当

首页

博学

6Ren·AI

商城

javascript - 到达谷歌地图中的标记时显示自定义媒体