ユーザー定義のラベル座標を実装するための Google Map API アップデート_JavaScript スキル

デモのアドレス: http://www.yaohaixiao.com/Effects/google-map.html

コードをコピー コードは次のとおりです:

if(GoogleMap の種類 === '未定義'){
var GoogleMap = {};
}
(function(){
if (!document.getElementById(") fpsap")) {
return false;
}
else {
// Google マップ コントロールを作成できるかどうか
var isSupport = new GBrowserIsCompatibility();
if (isSupport ) {
var mapContainer = document.getElementById("fgmap");
// GoogleMAP マップ インスタンスを作成します
var map = new GMap2(mapContainer);// マップのデフォルトの縮尺レベル
var perviewLevel = 14;
// 大きな地図のズーム レベル コントロール
varlargeMapControl = new GLargeMapControl();
//地図のサムネイル コントロール
varoverviewMapControl = new GOverviewMapControl(); // スケール コントロール
varscaleControl = new GScaleControl();
//マップ タイプ選択コントロール
var mapTypeControl = new GMapTypeControl();//住所座標コンバータ
var geocoder = new GClientGeocoder();
// 最後のクエリのアドレス
var lastAddress = '';
// 最後のクエリの座標
var lastPoint = null; control
var lastMarker = null;
//ユーザーがマークした最後の座標点

GoogleMap.mapMsg = []; / 地図を作成します
GoogleMap.Map = function(lat, lng){
var point = new GLatLng(lat, lng)
map.addMapType(G_PHYSICAL_MAP);
map.setCenter( point) , perviewLevel);

map.enableDoubleClickZoom();
map.enableContinuousZoom();

map.addControl(largeMapControl); .addControl(overviewMapControl);
map.addControl(mapTypeControl)
};

// マーカーを作成します
GoogleMap.createMarker; latlng, マーカーオプション){
var マーカー = マーカーオプション ? 新しい GMarker(latlng) :
マーカーを返します; >//カスタム マーク オプション
/* ===================================== == =============================================== == =============================================== == ==============================================
パラメータ説明:
定数: G_DEFAULT_ICON タグで使用されるデフォルトのアイコン。
image String アイコンの前景画像の URL。
shadow String アイコンのシャドウ画像 URL。
iconSize GSize アイコンの前景画像のピクセル サイズ。
shadowSize GSize 影画像のピクセル サイズ。
iconAnchor GPoint アイコン画像の左上隅を基準とした、地図上のこのアイコンのアンカー ポイントのピクセル座標。
infoWindowAnchor GPoint アイコン画像の左上隅を基準とした、このアイコン上の情報ウィンドウのアンカー ポイントのピクセル座標。
printImage 文字列 マップの印刷に使用される前景アイコン画像の URL。 image によって提供されるメイン アイコン イメージと同じサイズである必要があります。
mozPrintImage String Firefox/Mozilla でマップを印刷するときに使用される前景アイコン画像の URL。 image によって提供されるメイン アイコン イメージと同じサイズである必要があります。
printShadow String マップの印刷時に使用される影画像の URL。ほとんどのブラウザでは PNG 画像を印刷できないため、画像形式は GIF にする必要があります。
transparent String Internet Explorer でクリック イベントをキャプチャするときに使用される透明な前景アイコン画像の URL。この画像は、不透明度 1% の 24 ビット PNG 形式のメイン アイコン画像である必要がありますが、サイズと形状はメイン アイコンと同じです。
imageMap 数値配列 イメージ マップの x/y 座標を表す整数配列。ブラウザー (Internet Explorer 以外) でアイコン イメージのクリック可能な部分を指定するために使用されます。
maxHeight Integer ドラッグ時にマーカーが視覚的に垂直に「上昇」する距離 (ピクセル単位) を指定します。 (2.79以降)
dragCrossImage String アイコンをドラッグした際のクロスイメージのURLを指定します。 (2.79以降)
dragCrossSize GSize アイコンをドラッグした際の十字画像のピクセルサイズを指定します。 (2.79 以降)
dragCrossAnchor GPoint アイコンをドラッグするときの十字イメージのピクセル座標オフセット (iconAnchor を基準とした) を指定します。（自 2.79 开始）
========================================= ================================================= ================================================= =========================================== */
GoogleMap。 setCustomIcon = function(IconOptions){
var myIcon = new GIcon(G_DEFAULT_ICON), i;
for (i in IconOptions) {
switch (i) {
case 'iconSize':
case 'shadowSize':
case 'dragCrossSize':
myIcon[i] = new GSize(IconOptions[i][0], IconOptions[i][1]);
休憩;
case 'iconAnchor':
case 'infoWindowAnchor':
case 'infoShadowAnchor':
case 'dragCrossAnchor':
myIcon.iconAnchor = new GPoint(IconOptions[i][0], IconOptions[i][1]);
休憩;
デフォルト:
myIcon[i] = IconOptions[i];
休憩;
}

}
myIcon を返す;
};

// 用户自定义标注
GoogleMap.customMarkPoint = function(){
var marker = null;
var markPoint = cusLastPoint ? new GLatLng(cusLastPoint[0],cusLastPoint[1]) : new GLatLng(lastPoint[0],lastPoint[1]);
var markOptions = {
icon: GoogleMap.setCustomIcon({
image: 'http://www.yaohaixiao.com/Effects/img/icon13.png'
}),
ドラッグ可能: true
};

マーカー = GoogleMap.createMarker(markPoint, markOptions);
GEvent.addListener(marker, "dragstart", function(){
map.closeInfoWindow();
});
GEvent.addListener(marker, "dragend", function(){
var custPoint = marker.getPoint();
var markTip = '

markTip = '

用户地图标注

';
markTip = '

現在の经纬度：(' custPoint. lat() ',' custPoint.lng() ')
';
markTip = 'この商户の位置に新しい位置を設定しますか?

'; = '

marker.openInfoWindowHtml(markTip);
map.addOverlay(marker);
};

// 保存用户自定义坐标
GoogleMap.MapOk = function(){
var SavedPoint = lastMarker.getPoint();
var lat = SavePoint.lat()、lng = SavePoint.lng();
var markTip = document.getElementById('cusMarkTip');
markTip.innerHTML = '

正在上传您保存的坐标信息...

';
if (タイマー) {
clearTimeout(タイマー);
}
var timer = setTimeout(function(){
map.clearOverlays();
var marker = GoogleMap.createMarker(savedPoint);
if (GoogleMap.mapMsg) {
GEvent.addListener(marker, "click", function(){
var msg = '', j;
msg = '

' GoogleMap.mapMsg [1][0] '

';
for (var j = 1; j msg = GoogleMap.mapMsg[1] [j] "
";
msg = "";
map.openInfoWindowHtml(savedPoint, msg);

map.addOverlay(marker);
map.setCenter(savedPoint);
cusLastPoint = [lat,lng]; 2000);
};

// 取消用户自定坐标操作
GoogleMap.MapCancel = function(){
map.removeOverlay(lastMarker);
map.closeInfoWindow();
};

// 通过地址获得坐标
GoogleMap.getAddresslatlng = function(response){
var place = response.Placemark[0];
var point = new GLatLng(place.Point.co座標[1], place.Point.co座標[0]);
return [place.Point.coowned[1], place.Point.coowned[0], point, place];
};

// 注釈座標と関連する説明情報
GoogleMap.MarkerMap = function(lat, lng){
var marker = null;
var point = new GLatLng(lat, lng);
GoogleMap.Map(lat, lng);

マーカー = this.createMarker(point);
if (GoogleMap.mapMsg) {
GEvent.addListener(marker, "click", function(){
var msg = '', j;
msg = '

' GoogleMap.mapMsg[1][0] '

';
for (var j = 1; j msg = GoogleMap.mapMsg[1][j] "
";
msg = "";メッセージ);
});
}
map.addOverlay(marker);
};

// 将查询地址を地图に追加
GoogleMap.addAddressToMap = function(response){
map.clearOverlays();
if (!response || response.Status.code != 200) {
alert("对不起、我们解析不到该地址的经纬度坐标！");
}
else {
var マーカー = null, point = GoogleMap.getAddresslatlng(response);
var address = point[3].address, lat = point[0], lng = point[1];
GoogleMap.mapMsg = (GoogleMap.mapMsg !== '' && (lastAddress === GoogleMap.mapMsg[0])) ? address, ('経度:' point[1]), ('Latitude:' point[0])]];
GoogleMap.MarkerMap(lat, lng);
lastPoint = [lat,lng]; 🎜>}
};

// クエリ座標を地図に追加します
GoogleMap.addPointToMap = function(cPoint){
map.clearOverlays(); var marker = null , lat = cPoint[0], lng = cPoint[1];
GoogleMap.MarkerMap(lat, lng);

; / 住所/座標を使用して地図上にマーカーを表示します
GoogleMap.showLocation = function(cPoint){
if (typeof cPoint === 'string') {
geocoder.getLocations(cPoint, this.addAddressToMap) );
lastAddress = cPoint;
}
GoogleMap.addPointToMap(cPoint);

GEvent.addListener(window, ' unload', GUnload);
}
else {
alert("申し訳ありませんが、お使いのブラウザはマップの作成をサポートしていません!")
}
}
});

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：XML のカプセル化と解析 (JavaScript および C#)_JavaScript スキル次の記事：XML のカプセル化と解析 (JavaScript および C#)_JavaScript スキル

関連記事

続きを見る

• Bootstrap リスト グループ コンポーネントの詳細な分析
• JavaScript関数のカリー化の詳細説明
• JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)
• Angularjs は WeChat UI (weui) を統合します
• JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル

福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！

私たちについて免責事項Sitemap

© php.cn All rights reserved