Google Map API update to implement user-defined labeling coordinates_javascript skills

Demo address: http://www.yaohaixiao.com/effects/google-map.html

Copy code The code is as follows:

if(typeof GoogleMap === 'undefined'){
var GoogleMap = {};
}
(function(){
if (!document.getElementById(" fgmap")) {
return false;
}
else {
// Whether the Google Map control can be created
var isCompatible = new GBrowserIsCompatible();
if (isCompatible) {
var mapContainer = document.getElementById("fgmap");
// Create GoogleMAP map instance
var map = new GMap2(mapContainer);
// Default scale level of the map
var perviewLevel = 14;
// Large map zoom level control
var largeMapControl = new GLargeMapControl();
// Map thumbnail control
var overviewMapControl = new GOverviewMapControl();
/ / Scale control
var scaleControl = new GScaleControl();
// Map type selection control
var mapTypeControl = new GMapTypeControl();
// Address-coordinate converter
var geocoder = new GClientGeocoder();
// The last query address
var lastAddress = '';
// The last query coordinates
var lastPoint = null;
// The last one Created marker control
var lastMarker = null;
//The last coordinate point marked by the user
var cusLastPoint = null;

GoogleMap.mapMsg = [];

// Create a map
GoogleMap.Map = function(lat, lng){
var point = new GLatLng(lat, lng);
map.addMapType(G_PHYSICAL_MAP);
map.setCenter( point, perviewLevel);

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

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

// Create Marker
GoogleMap.createMarker = function (latlng, markerOptions){
var marker = markerOptions ? new GMarker(latlng, markerOptions) : new GMarker(latlng);
lastMarker = marker;
return marker;
};

//Custom mark options
/* ===================================== ================================================== ================================================== ================================================
Parameter description:
Constant: G_DEFAULT_ICON The default icon used by the tag.
image String The foreground image URL of the icon.
shadow String Shadow image URL of the icon.
iconSize GSize The pixel size of the icon foreground image.
shadowSize GSize The pixel size of the shadow image.
iconAnchor GPoint The pixel coordinates of this icon's anchor point on the map relative to the upper left corner of the icon image.
infoWindowAnchor GPoint The pixel coordinate of the anchor point of the information window on this icon relative to the upper left corner of the icon image.
printImage String URL of the foreground icon image used to print the map. It must be the same size as the main icon image provided by image .
mozPrintImage String The URL of the foreground icon image used when printing maps with Firefox/Mozilla. It must be the same size as the main icon image provided by image .
printShadow String URL of the shadow image used when printing the map. Since most browsers cannot print PNG images, the image format should be GIF.
transparent String The URL of the transparent foreground icon image used when capturing click events in Internet Explorer. This image should be the main icon image in 24-bit PNG format with 1% opacity, but the same size and shape as the main icon.
imageMap Array of Number An integer array representing the x/y coordinates of the image map, used to specify the clickable portion of the icon image in a browser (non-Internet Explorer).
maxHeight Integer Specifies the distance (in pixels) that the marker will visually "rise" vertically when dragging it. (Since 2.79)
dragCrossImage String Specifies the URL of the cross image when dragging the icon. (Since 2.79)
dragCrossSize GSize Specifies the pixel size of the cross image when dragging the icon. (Since 2.79)
dragCrossAnchor GPoint Specifies the pixel coordinate offset (relative to the iconAnchor) of the cross image when dragging the icon.（自 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]);
break;
case 'iconAnchor':
case 'infoWindowAnchor':
case 'infoShadowAnchor':
case 'dragCrossAnchor':
myIcon.iconAnchor = new GPoint(IconOptions[i][0], IconOptions[i][1]);
break;
default:
myIcon[i] = IconOptions[i];
break;
}

}
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'
}),
draggable: 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 = '是否将新位置设置为此商户的默认位置？

';
markTip = '

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

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

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

';
if (timer) {
clearTimeout(timer);
}
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 < GoogleMap.mapMsg[1].length; 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.coordinates[1], place.Point.coordinates[0]);
return [place.Point.coordinates[1], place.Point.coordinates[0], point, place];
};

// 标注坐标和相应的说明信息
GoogleMap.MarkerMap = function(lat, lng){
var marker = null;
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, msg);
});
}
map.addOverlay(marker);
};

// 将查询地址添加到地图
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 : [address, [point[3]. address, ('Longitude:' point[1]), ('Latitude:' point[0])]];
GoogleMap.MarkerMap(lat, lng);
lastPoint = [lat,lng];
}
};

// Add query coordinates to the map
GoogleMap.addPointToMap = function(cPoint){
map.clearOverlays();
var marker = null , lat = cPoint[0], lng = cPoint[1];
GoogleMap.MarkerMap(lat, lng);
lastPoint = [lat,lng];
};

/ / Display the Marker on the map via address/coordinates
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("Sorry, your browser does not support creating maps!");
}
}
})() ;

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：xml encapsulation and parsing (in javascript and C#)_javascript skillsNext article：xml encapsulation and parsing (in javascript and C#)_javascript skills

Related articles

See more

• An in-depth analysis of the Bootstrap list group component
• Detailed explanation of JavaScript function currying
• Complete example of JS password generation and strength detection (with demo source code download)
• Angularjs integrates WeChat UI (weui)
• How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills

Public welfare online PHP training，Help PHP learners grow quickly！

About usDisclaimerSitemap

© php.cn All rights reserved