下記の三つの画像のように進めようと思っているのですが、マーカーが出現してくれません。
コード❶
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>タイトル</title> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="http://maps.google.com/maps/api/js?key=AIzaSyDhcnBXUPKNXl77AkFFwxAQUfNFo2l2iko&sensor=false"></script> <script src="map.js"></script> </head> <body> <style> #mapDiv { position: relative; } .info { position: absolute; top: 30px; right: 0; width: 150px; height: 150px; background-color: #FFFFCC; z-index: 1; } </style> <div id="mapDiv" style="width: 400px; height:400px;"> </div> </body> </html>
コード❷
jQuery(function ($) { var ns = google.maps, myLatlng = new ns.LatLng(35.66, 139.73), mapElement = document.getElementById("mapDiv"), mapOptions = { zoom: 12, center: myLatlng }, map = new ns.Map(mapElement, mapOptions), places = new ns.MVCArray([ new ns.LatLng(35.681391, 139.766103),// 東京 new ns.LatLng(35.689729, 139.700464),// 新宿 new ns.LatLng(35.62876, 139.738999)// 品川 ]); places.forEach(function (place, num) { var marker = new ns.Marker({ position: place, map: map, icon: { url: 'spritesheet.png', origin: new ns.Point(70 * num, 0),// size: new ns.Size(20, 34) } }); }); });
画像取得先で画像をダウンロードし、ダウンロードした画像の中から5項目を選び、ZIPで圧縮し、CSS Sprite Generatorで画像を取得したはずなのですが、うまくいきません。
おそらくCSS Sprite Generatorのアップロードの仕方が間違って居るのだろうと思いますが、「圧縮してそれをこのサイトにアップして一つの画像にして取得する」と言う教科書の概念がよくわかりません。
一応下の画像が、圧縮したファイル(左下)と、圧縮したファイルの中身(右下)と、CSS Sprite Generatorで作ったpng(上)です。
よろしくお願いいたします。
CSS Sprite Generator で作ったとされる png (spritesheet.png) は望んでいる画像とは違うのですか。五つのマーカーが一つの画像になっているように見えますが。
はい、ソースに乗せたようにurlにspritesheet.pngを指定はしているのですが、表示されません。これで普通は表示されるものなのでしょうか?
ソースコードはそちらに表示されていますか?
すみません、「ソースに乗せたように」とのことですが、どの部分のことでしょうか。添付された写真 4 点のうち、最初の三つは参考にされている書籍の内容、最後の一つは画像だけに見えるのですが。
ご自身のソースコードはここに示すことはできないのですか。
すみません、テラテイルの使い方がいまいちよくわからなかったので、直接コードを質問に書きました。
よろしくお願いいたします。
もしかしたら、コードがどこかおかしいのかもしれません。
回答1件
あなたの回答
tips
プレビュー