Google mapでMarkerがカスタムアイコンを使う
15581 ワード
プロジェクトではgoogleマップに車両アイコンを表示する、現在の車両の方位をアイコンヘッドの指向で表すため、google mapで提供するアイコンを使用することはできず、カスタムの車両アイコンを使用する必要がある.
(1)アイコンファイルを準備する:
Markerアイコンは.png透明フォーマットでなければなりません.
360度を16方位に分け、正北、北から東、東北、東から北、正東、時計回りに北へ西へ.
photoshop平面画像処理ソフトでは、まず32 x 32サイズの真北方向の車両アイコンを作成し、png透明フォーマットに保存し、時計回りに24.5度回転し、残りのアイコンを作成します.
(2)状態htmlページスクリプトは以下の通りである.
(3) 取得する車両位置決め情報に基づいて、上のスクリプトのvar vMarkerとvarイメージに関する情報を更新し、一時htmlスクリプトファイルを生成し、WebBrowserコンポーネントに表示する.
(4) 位置決め情報が更新場合は、スクリプトファイルを再一時的に行うだけでよい.
ここで、アイコンファイルのパスを複数回デバッグして、C://img//car.pngというフォーマットに設定することが分かる.
参考までに記録する
(1)アイコンファイルを準備する:
Markerアイコンは.png透明フォーマットでなければなりません.
360度を16方位に分け、正北、北から東、東北、東から北、正東、時計回りに北へ西へ.
photoshop平面画像処理ソフトでは、まず32 x 32サイズの真北方向の車両アイコンを作成し、png透明フォーマットに保存し、時計回りに24.5度回転し、残りのアイコンを作成します.
(2)状態htmlページスクリプトは以下の通りである.
<
html
xmlns
="http://www.w3.org/1999/xhtml"
>
<
head
>
<
meta
name
="viewport"
content
="initial-scale=1.0, user-scalable=no"
/>
<
meta
http-equiv
="content-type"
content
="text/html; charset=utf-8"
/>
<
script
type
="text/javascript"
src
="http://maps.google.cn/maps/api/js?sensor=false"
>
</
script
>
<
title
>
Google Maps
</
title
>
<
style
type
="text/css"
>
html
{
height
:
100%
;
}
body
{
height
:
100%
;
margin
:
0px
;
padding
:
0px
;
}
#map_canvas
{
width
:
100%
;
height
:
100%
;
margin
:
1px auto
;
}
</
style
>
<
script
type
="text/javascript"
>
function
initialize() {
var
myOptions
=
{
zoom:
15
,
center:
new
google.maps.LatLng(
31.97224
,
118.81835
),
mapTypeId: google.maps.MapTypeId.HYBRID
//
ROADMAP, SATELLITE, HYBRID, TERRAIN
}
var
map
=
new
google.maps.Map(document.getElementById(
"
map_canvas
"
), myOptions);
var
vMarker
=
[
"
=car1
=2011-7-9 11:33:36
=0
=
=31.972, =118.818
"
,
31.97224
,
118.81835
,
0
];
//
replace Marker
var
pos
=
vMarker;
var
image
=
'
D://C#.Projects//GoogleGPS//bin//Debug//GoogleCar//car16.png
'
;
var
myLatLng
=
new
google.maps.LatLng(pos[
1
], pos[
2
]);
var
marker
=
new
google.maps.Marker({
position: myLatLng,
map: map,
title: pos[
0
],
icon: image,
zIndex: pos[
3
]
});
}
</
script
>
</
head
>
<
body
onload
="initialize()"
>
<
div
id
="map_canvas"
></
div
>
</
body
>
</
html
>
(3) 取得する車両位置決め情報に基づいて、上のスクリプトのvar vMarkerとvarイメージに関する情報を更新し、一時htmlスクリプトファイルを生成し、WebBrowserコンポーネントに表示する.
(4) 位置決め情報が更新場合は、スクリプトファイルを再一時的に行うだけでよい.
ここで、アイコンファイルのパスを複数回デバッグして、C://img//car.pngというフォーマットに設定することが分かる.
参考までに記録する