javascript - 让 javascript 谷歌地图发挥更多作用 "native"

Question

我给了cordova一个诚实的机会(通过ionic cli)，它在功能上运行得很好，但UX尖叫着非原生。这是我当前的实现:

Here's an example from where I got my initial maps code

index.html

...
<script src="http://maps.googleapis.com/maps/api/js?sensor=true&amp;libraries=geometry"></script>
...

templates/map.html

...
<div id="map" data-tap-disabled="true"></div>
...

map Ctrl

.controller('MapCtrl', function($scope, $ionicLoading, $compile) {
  function initialize() {
    var myLatlng = new google.maps.LatLng(43.07493,-89.381388);

    var mapOptions = {
      center: myLatlng,
      zoom: 16,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map"),
        mapOptions);

    google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map,marker);
    });

    $scope.map = map;
  }
  //google.maps.event.addDomListener(window, 'load', initialize);
  ionic.Platform.ready(initialize);
});

如何在 MapCtrl 中启动标记

    var marker = new google.maps.Marker({
      map: $scope.map,
      position: o.getLatLng(),
      icon: {
        url: thumb, // "img/somethumb.png"
        scaledSize: new google.maps.Size(62, 62), //size
        // origin: new google.maps.Point(0, 0), //origin
        anchor: new google.maps.Point(30, 108) //anchor
      }
    });

在我让用户体验在性能更好的设备上变得更加友好的过程中，我时不时地发现一些有用的东西，然后结果证明它是一个没有多大帮助的黑客。必须有某种方法可以从这段代码中获得更原生的感觉。以下是我想解决的一些问题:

• 只有用户在捏合/缩放后释放所有触摸后，才会加载新 map 图像
• 只有用户在捏合/缩放后释放所有触摸后，标记才会调整大小
• 使用位图图像而不是矢量(html5 Canvas ？)

我确信还有更多需要改进的地方，但现在我要从小事做起。我可以做哪些事情来使 API 具有更原生的感觉？

Answer 1

1. 新 map 图像...此行为不仅在移动设备上，而且在桌面上也有。这是为了节省资源(假设您已经完成了许多 native 应用程序，但尚未遇到此要求。

2. 标记不会调整大小...这被认为是一个很好的选择，但不是必需的，这种行为不会妨碍应用程序的可用性。最终是一个应用程序而不是游戏。

3. 位图与矢量，应用程序必须支持多种设备。当位图效果良好时为什么要制作 2 个版本？查看某些开发了矢量/html5版本的浏览器要求和限制http://simplemaps.com/us