Question

我目前正在为手机版构建中的IOS和Android开发谷歌地图应用程序，我在地图上进行了webkit-transform，使其看起来像是倾斜。但是它打破了我的所有标记，是否有任何方法可以将标记置于中心位置

CSS -

html, body {
  height: 100%;
  width:100%;
  overflow-y:hidden;
  overflow-x:hidden;
  margin: 0;
  padding: 0;
}

    #map {

        height: 100%;
       -webkit-transform: perspective(1000px) rotate3d(40, 1, 0, 40deg)!important;
       -moz-transform: perspective(1000px) rotate3d(40, 1, 0, 40deg)!important;
       -o-transform: perspective(1000px) rotate3d(40, 1, 0, 40deg)!important;
        transform: perspective(1000px) rotate3d(40, 1, 0, 40deg)!important;
    }

JS -

// JavaScript Document  


      var map,
        earth
      , you
      , pos
      , t_0
      , log = ''
      , url = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAARCAYAAADdRIy+AAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sBHxAxMpOb3XcAAAOBSURBVDjLfZRNa1xlGIav877nY2bOzJnMR77TNIkJpSpBW4qiGGJAECpSEFz0D/gDKrp9wVVBXPkLXLkrqBtBZKJFQaqghbZp09SkTUwyH5mvMzPnvHPOcZEUumj6wL17nmvz3PdtcMoopQRg27btdpYvXQSS7N9/3NZaB0BHKTV83p3xHJAFzFQWVj4bdPjonGsXisIwm35Iy2C40dON0VHrxurD9evAvlKqfypQKeW15l9d/enI+9qr+2fWXplmcbpA0UtT6wx48OSIu4/r3Nqqkjs3tvN+/uiat31vHagppRIA8xnYBPnShRub1reiUU0vX5gnPTlKfjzPzEiKIBPg4GDFNrlmwJ2bW7O981PfXM1mP7b73T+B/wDECSwTRdHi9/L8V9t399Le3BSMT0B+BDIukWkTp1ySfIF4bJzk7ByMlfn3zl76x/RrXwohlpRSRQCplDKAs9uzF6/+/Oveh1GpyOjSAsWJUUbyOTK2hU4EDS05HNocxDYHkaQRG9Dr03hULU8vz9e9o92ttbW1ugA8YGrTz7wT6JhkbJJBdoSelaMTSGoD2O1DLYB2CD1t03dKUJyAyUmCgWbTz6w4jlMA0ibgSim9Wms4S2EEcnk6Ikd7KKkDMoaUgC5QF9CS0MWEdB68IhQK1FrRDIICkDUBUwhh+M3Aw3XBcakmKUoGuAZEBlgG9CVUTWiY0JaAnYFUBtwsfifwyJMAlglorXXsOk6bSGbBJLIk94cwAM5YYNvQT6CewKEFiQNoEwwbTBs3JduABnwT8E3T9MuOfLzRjaeIYpAJ2jJ4aMC2AVb62FrBEGILsAGRQJxAklB2zZ1EJwOgJ4DOcDjcfSnT+8XRIQwGEA6ODWXAUELfPlZsnkRBAFpDEOBEmsW0fzMMwyqgZaVSYXV1NSyFh61mbumtvX5SJpuBnAupp04FQqAHBIAP1Jqwf8DreePepc5v16WU95VSwdN1P47jB5ed29fmDO1TrUOtDZ0TSPNEPU7e3YVagzmh/feSW58KITaUUl0ACVCpVKhUKv67b7+xP1/K/NXxs282+kEhiQEtIBTQS+BIw2ELeVDl5V536wNv+xPXf/K7Uqr+oraxgdF19/Lnjyz3is6mygeYaQwYJ+5b3aC2EHa+W/F/+AJoKKX0C+vrGbABpCzLyvqzK8uJIaPcTuWfMAw10D+tD/8H7d6IDx2EfHUAAAAASUVORK5CYII='
      , head = '["latitude","longitude","precision","time"]'
      , zoom
      , time
      , from
      ;






 google.maps.event.addDomListener(window, 'load', init);

  var styles = [
    {
      stylers: [
        { hue: "#00ffe6" },
        { saturation: -20 }
      ]
    },{
      featureType: "road",
      elementType: "geometry",
      stylers: [
        { lightness: 100 },
        { visibility: "simplified" }
      ]
    },{
      featureType: "road",
      elementType: "labels",
      stylers: [
        { visibility: "off" }
      ]
    }
  ];

    var styledMap = new google.maps.StyledMapType(styles,
    {name: "Styled Map"});


    function init() {
      map = new google.maps.Map( document.getElementById('map')
                               , { zoom: zoom
                                 , mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
    }, disableDefaultUI: true


                                 });
  map.mapTypes.set('map_style', styledMap);
  map.setMapTypeId('map_style');                             

var normal = new google.maps.MarkerImage("normal_patrol_car.png", null, null, null, new google.maps.Size(20,20))    
var bp = new google.maps.MarkerImage("bp.png", null, null, null, new google.maps.Size(25,25))    

            var markerPos = new google.maps.LatLng(-32.79927202979712, 151.64475314319134);
            var marker = new google.maps.Marker({ 
            position: markerPos,
            icon: normal,  
            map: map, });

var markerPos = new google.maps.LatLng(-32.79007957580336, 151.6350670158863);
    var markerthorntonbp = new google.maps.Marker({ 
    position: markerPos,  
    map: map, });

 google.maps.event.addListener(markerthorntonbp, 'click', function() {
    alert('Premium - $1.61  E10 - $1.44');
  });


var circle = new google.maps.Circle({
  map: map,
  radius: 250,  
  fillOpacity: 0.35,
  strokeColor: '#AA0000',
  strokeOpacity: 0.8,
  fillColor: '#AA0000'
});

circle.bindTo('center', marker, 'position');

map.setOptions({
   zoomControl: true
});






      if (navigator.geolocation)
        navigator.geolocation.watchPosition(gotPosition, function() {
          noGeolocation('Error: The Geolocation service failed.');
        }, { enableHighAccuracy: true, maximumAge: 5000, timeout: 10000 });
      else
        noGeolocation('Error: Your browser doesn\'t support geolocation.');
    }

    function gotPosition(position) {
      var at  = position.coords
        , off = at.accuracy
        , z
        ;

      pos = ll(at.latitude, at.longitude);
      if (you) you.setPosition(pos); else {
        t_0 = Math.round(+new Date / 1000);
        you = new google.maps.Marker({ map: map
                                     , position: pos
                                     , icon: marker(url, s(20, 17), p(10, 8))
                                     });


        google.maps.event.addListener(map, 'click', function() {
          location = 'mailto:brad@holzmultimedia.com?subject=GPS%20Track&body='
                   + encodeURIComponent(log + ' ]\n}\n');
        });
      }
      if (!zoom) map.setCenter(pos);

      // zoom in, as precision improves (or out again)
      if (off > 2e3) z = 13;
      if (off < 2e3) z = 14;
      if (off < 900) z = 15;
      if (off < 100) z = 16;
      if (z !== zoom) map.setZoom(zoom = z);

      map.panTo(pos);
      save(at);
    }



    function noGeolocation(message) {
      var opts = { map: map
                 , position: ll(60, 105)
                 , content: message
                 }
        , info = new google.maps.InfoWindow(opts);
      map.setCenter(opts.position);
    }

    function s(w, h) { return new google.maps.Size(w, h); }
    function p(x, y) { return new google.maps.Point(x, y); }
    function ll(y, x) { return new google.maps.LatLng(y, x); }
    function marker(url, size, hotspot, origin) {
      return new google.maps.MarkerImage(url, size, origin || p(0, 0), hotspot);
    }





    function save(at) {
      var lat = at.latitude.toFixed(6) // decimeter precision should be quite enough
        , lng = at.longitude.toFixed(6)
        , pre = at.accuracy.toFixed(0)
        ;
      time = Math.round(new Date / 1000) - t_0;
      log += (log ? ' ,' : '{"time":'+ t_0 +'\n,"head":\n '+ head +'\n,"data":\n [')
           + '[' + lat +','+ lng +','+ pre +','+ time +']\n';
    }

window.onload(alert('this is a test version 0.012'));
// JavaScript Document

Answer 1

问题很容易解释，但不幸的是，我现在还没有很好的解决方案。

看一看：http://take.ms/2E3fV - 这里有一个带有css3比例的谷歌地图之后的示例（而不是像你的情况那样转换）

Google Map click element for marker after css transform

在图像上我标记了矩形，它显示了现在的确切位置，即对谷歌地图标记上的点击操作做出响应。简单地说，当您使用CSS缩放/变换地图时，每个图像也会缩放，但位置坐标（left, right, top, bottom）不会发生变化。

所以，我认为你有同样的问题 - 一切都在转变，但其他css属性不会改变。

Theoreticaly您可以检查Google Map的代码并以任何方式修复此职位，但是：

它不是通用解决方案（例如，不适用于动态引脚）
将来可以更改（类名，甚至整个解决方案）
它比解决方案更糟糕

webkit-transform打破谷歌标记

1 个答案: