Trường hợp các bạn muốn làm một map, với nhiều địa điểm trên bản đồ, sau khi thực hiện được, vướng mắc gặp phải là co giãn trên nhiều thiết bị di động không được. Tọa độ bị sai lệch đi rõ rệt.Vậy khắc phục bằng cách gì?
B1: Đầu tiên tại thẻ head cho thẻ meta sau:
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1">
Để cho nó cho phép co giãn trên các thiết bị di động
B2: Chèn tiếp code sau để cho ảnh full màn hình
<style>
img[usemap] {
border: none;
height: auto;
max-width: 100%;
width: auto;
}
</style>
B3: Trong thẻ body, thiết lập hiển thị như sau
<img src="./test_files/gtdt2.png" usemap="#Map" alt="">
<map name="Map" id="Map">
<area shape="poly" coords="166, 102, 395, 102, 396, 1, 166, 1" href="/nganhdien.aspx" target="_blank">
<area shape="poly" coords="684, 89, 1011, 90, 1012, 223, 684, 222" href="/nganhtudonghoa.aspx" target="_blank">
<area shape="poly" coords="681, 277, 936, 278, 935, 408, 682, 408" href="/nganhcokhi.aspx" target="_blank">
<area shape="poly" coords="517, 421, 796, 421, 798, 560, 516, 559" href="/nganhoto.aspx" target="_blank">
<area shape="poly" coords="0, 305, 249, 306, 249, 459, 2, 458" href="/nganhxaydung.aspx" target="_blank">
<area shape="poly" coords="2, 154, 232, 156, 231, 283, 3, 283" href="/nganhmoitruong.aspx" target="_blank">
</map>
B4: Thêm các đoạn Script sau
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="http://dst.udn.vn/Scripts/imageMapResizer.min.js"></script>
<script type="text/javascript">
$('map').imageMapResize();
</script>