I have the following HTML that is shown on a WebView in my Android App. It shows a big image (a map) and a pin over it.
<html>
<head lang="en">
<meta charset="UTF-8">
<script> function scrollMap(x, y) {
window.scrollTo(String(x),String(y));
}
function addPin(x, y) {
var pin = document.getElementById("pin");
pin.style.top = String(y - 100) + "px";
pin.style.left = String(x) + "px";
scrollMap(x-800,y-800);
window.JSInterface.doEchoTest(String(x));
}
</script>
</head>
<body>
<div id='mapContainer' style="position:relative">
<img id='map' src="file:///android_res/drawable/....png"/>
<img id='pin' style="position:absolute;" src="file:///android_res/drawable/.....png"/>
</div>
</body>
</html>
Thing is that when the user zooms (using pitch or the zoom controls from the webview) the pin gets bigger. What I want is for the pin to remain the same size always.
I've search the web with no luck. I was hopping to get notified when the zoom took place and resize the image accordingly but don't know how to do that. Any hint? Thanks!
Aucun commentaire:
Enregistrer un commentaire