无法在 Web 视图内的地图上添加标记

Unable to add marker on map inside webview

本文关键字：地图 添加 加标记 Web 视图      更新时间：2023-09-26

我是Webview的初学者，尝试通过$interval在Webview上动态绘制标记。我正在使用谷歌地图 api v3 和以下角度谷歌地图库 ng-map.js：

<html style="overflow: auto !important;" ng-app="myApp">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=weather,visualization,panoramio"></script>
<script src="JS/angular.min.js"></script>
<script src="JS/ng-map.min.js"></script>
<script>
 var app = angular.module('myApp', ['ngMap']);
 app.controller("PolylineComplexCtrl", function (NgMap, $interval, $scope) {
    $interval(function (position) {
        navigator.geolocation.getCurrentPosition(function (position) {
            new google.maps.Marker({
                position : {
                    lat : position.coords.latitude,
                    lng : position.coords.longitude
                },
                map : $scope.map,
                draggable : false,
                animation : google.maps.Animation.BOUNCE
            });
        });
    }, 1000);
    var vm = this;
    vm.path = [[41.879535, -87.624333]];
    vm.addMarkerAndPath = function (event) {
        vm.path.push([event.latLng.lat(), event.latLng.lng()]);
    };
 });
</script>
</head>
<body ng-controller="PolylineComplexCtrl as vm">
  <ng-map zoom="7" center="21.1500,79.0900" on-click="vm.addMarkerAndPath()">
    <shape name="polyline" id="foo"
      path="{{vm.path}}"
      stroke-color="#FF0000"
      stroke-opacity="1.0"
      stroke-weight="3">
    </shape>
  </ng-map>
</body>
</html>

一切都在浏览器上运行良好，但是当我在网络视图上运行它时，它不起作用。我错过了什么？

也许您在移动设备上收听地图点击事件时遇到问题，所以我建议查看这些帖子：

ng-map点击在移动设备上不起作用

如何在谷歌地图中为标记绑定触摸事件？

相关文章：