사용자 정의 라벨 지정 Coordinates_javascript 기술을 구현하기 위한 Google Map API 업데이트

데모 주소: http://www.yaohaixiao.com/ Effects/google-map.html

코드 복사 코드는 다음과 같습니다.

if(typeof GoogleMap === '정의되지 않음'){
var GoogleMap = {};
}
(function(){
if (!document.getElementById(" fgmap")) {
return false;
}
else {
// Google 지도 컨트롤을 만들 수 있는지 여부
var isCompatible = new GBrowserIsCompatible();
if (isCompatible ) {
var mapContainer = document.getElementById("fgmap");
// GoogleMAP 지도 인스턴스 생성
var map = new GMap2(mapContainer)
// 지도의 기본 축척 수준
var perviewLevel = 14;// 대형 지도 확대/축소 수준 제어
var LargeMapControl = new GLargeMapControl()
// 지도 썸네일 제어
var reviewMapControl = new GOverviewMapControl(); / / 스케일 제어
var scaleControl = new
// 지도 유형 선택 제어
var mapTypeControl()
// 주소 좌표 변환기
var geocoder = new GClientGeocoder();
// 마지막 쿼리 주소
var lastAddress = ''
// 마지막 쿼리 좌표
var lastPoint = null; control
var lastMarker = null
//사용자가 표시한 마지막 좌표점
var cusLastPoint = 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(scaleControl)
}// 마커 만들기
GoogleMap.createMarker latlng, markerOptions){
var marker = markerOptions ? new GMarker(latlng);
lastMarker = marker

//사용자 정의 표시 옵션
/* ==================================== == =============================================== == =============================================== == ==============================================
매개변수 설명:
상수: G_DEFAULT_ICON 태그에서 사용하는 기본 아이콘입니다.
image String 아이콘의 전경 이미지 URL입니다.
shadow String 아이콘의 그림자 이미지 URL입니다.
iconSize GSize 아이콘 전경 이미지의 픽셀 크기입니다.
shadowSize GSize 그림자 이미지의 픽셀 크기입니다.
iconAnchor GPoint 아이콘 이미지의 왼쪽 상단을 기준으로 지도에서 이 아이콘 앵커 포인트의 픽셀 좌표입니다.
infoWindowAnchor GPoint 아이콘 이미지의 왼쪽 상단을 기준으로 이 아이콘에 대한 정보 창 앵커 포인트의 픽셀 좌표입니다.
printImage 문자열 지도를 인쇄하는 데 사용되는 전경 아이콘 이미지의 URL입니다. image 에서 제공하는 기본 아이콘 이미지와 크기가 동일해야 합니다.
mozPrintImage 문자열 Firefox/Mozilla로 지도를 인쇄할 때 사용되는 전경 아이콘 이미지의 URL입니다. image 에서 제공하는 기본 아이콘 이미지와 크기가 동일해야 합니다.
printShadow String 지도를 인쇄할 때 사용되는 그림자 이미지의 URL입니다. 대부분의 브라우저에서는 PNG 이미지를 인쇄할 수 없으므로 이미지 형식은 GIF여야 합니다.
transparent String Internet Explorer에서 클릭 이벤트를 캡처할 때 사용되는 투명한 전경 아이콘 이미지의 URL입니다. 이 이미지는 불투명도가 1%인 24비트 PNG 형식의 기본 아이콘 이미지여야 하지만 기본 아이콘과 크기 및 모양이 동일해야 합니다.
imageMap 숫자 배열 이미지 맵의 x/y 좌표를 나타내는 정수 배열로, 브라우저(Internet Explorer가 아님)에서 아이콘 이미지의 클릭 가능한 부분을 지정하는 데 사용됩니다.
maxHeight 정수 마커를 드래그할 때 마커가 시각적으로 수직으로 "상승"하는 거리(픽셀 단위)를 지정합니다. (2.79부터)
dragCrossImage String 아이콘을 드래그할 때 십자가 이미지의 URL을 지정합니다. (2.79부터)
dragCrossSize GSize 아이콘을 드래그할 때 교차 이미지의 픽셀 크기를 지정합니다. (2.79부터)
dragCrossAnchor GPoint 아이콘을 드래그할 때 교차 이미지의 픽셀 좌표 오프셋(iconAnchor 기준)을 지정합니다.（自 2.79开始）
========================================== ================================================= ================================================= ========================================== */
구글맵. setCustomIcon = function(IconOptions){
var myIcon = new GIcon(G_DEFAULT_ICON), i;
for (i in IconOptions) {
스위치 (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];
휴식;
}

}
return 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
};

marker = 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(마커);
};

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

정확한 위치에 있는 광고...

';
if(타이머) {
clearTimeout(타이머);
}
var 타이머 = 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 < GoogleMap.mapMsg[1].length; j ) {
msg = GoogleMap.mapMsg[1] [j] "
";
msg = ""
map.openInfoWindowHtml(savedPoint, msg)
}
map.addOverlay(marker);
map.setCenter(savedPoint)
cusLastPoint =
}, 2000)
};

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

// 通过地址获得坐标
GoogleMap.getAddresslatlng = function(response){
var place = response.Placemark[0];
var point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]);
return [place.Point.coordinates[1], place.Point.coordinates[0], 점, 장소];
}; var point = new GLatLng(lat, lng);
GoogleMap.Map(lat, lng);

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

' GoogleMap.mapMsg[1][0] '

'
for (var j = 1; j < GoogleMap.mapMsg[1].length; j ) {
msg = GoogleMap.mapMsg[1][j] "
";
}
msg = ""
map.openInfoWindowHtml(point, 메시지)
});
}
map.addOverlay(마커);
};

// 将查询地址添加到地图
GoogleMap.addAddressToMap = function(response){
map.clearOverlays();
if (!response || response.Status.code != 200) {
alert("对不起, 我们解析不到该地址的经纬島坐标!");
}
else {
var marker = null, point = GoogleMap.getAddresslatlng(response);
var address = point[3].address, lat = point[0], lng = point[1];
GoogleMap.mapMsg = (GoogleMap.mapMsg !== '' && (lastAddress === GoogleMap.mapMsg[0])) ? GoogleMap.mapMsg : [주소, [점[3]. 주소, ('경도:' 포인트[1]), ('위도:' 포인트[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)
lastPoint = [lat,lng]

/ / 주소/좌표를 통해 지도에 마커를 표시합니다.
GoogleMap.showLocation = function(cPoint){
if (typeof cPoint === 'string') {
geocoder.getLocations(cPoint, this.addAddressToMap );
lastAddress = cPoint;
}
else{
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를 사용하여 중국어 번체와 중국어 간체 간을 빠르게 전환하는 방법과 중국어 간체와 중국어 번체 간 전환을 지원하는 웹사이트의 요령_javascript 기술

공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！

회사 소개부인 성명Sitemap

© php.cn All rights reserved