我研究并研究了地图样式，我相信这是实现目标的方法，但执行并没有奏效。我想要的是下面的内容，除了我想要地图的纯色或不可见的地图。目的是使用创建的形状覆盖到不同的地图上。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>LD Team - Google Maps Plotter</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA"
type="text/javascript"></script>
<script type="text/javascript">
//createGlobal Variables
//for plot Address
var map = null;
var geocoder = geocoder = new GClientGeocoder(); //create function used to find Long, Lat based on city, state
//forCircles
var poly = [] ;
var circle;
//forBestFit Zoom
var latlng = new Array();
var numPoints = 0;
var allowedBounds = new GLatLngBounds(new GLatLng(49.5,-10), new GLatLng(59,2.6));
//Initiatlize Google Map Control on Page Load
function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas", 15, 15));
//------------- Restricting the range of Zoom Levels -----------------------
// Get the list of map types
var mt = map.getMapTypes();
// Overwrite the getMinimumResolution() and getMaximumResolution() methods
for (var i=0; i<mt.length; i++) {
mt[i].getMinimumResolution = function() {return 2;}
mt[i].getMaximumResolution = function() {return 11;}
}
//--------------------------------------------------------------------------
/*------------- Restricting Viewing Bounds ---------------------------------
// The allowed region which the whole map must be within
//GLatLngBounds(sw?:GLatLng, ne?:GLatLng)
var allowedBounds = new GLatLngBounds(new GLatLng(-60.0525,178.0781), new GLatLng(70.3779,-169.4531));
// Add a move listener to restrict the bounds range
GEvent.addListener(map, "move", function() {
checkBounds();
});
//------------------------------------------------------------------------*/
/*------------- Mouse Hover Show/Hide Controls -----------------------------
GMap2.prototype.hoverControls = function(opt_noCloseIw){
var theMap = this;
theMap.hideControls();
GEvent.addListener(theMap, "mouseover", function(){
theMap.showControls();
});
GEvent.addListener(theMap, "mouseout", function(){
theMap.hideControls();
});
theMap.libraryCard = 19162;
}
GMap.prototype.hoverControls = GMap2.prototype.hoverControls;
map.hoverControls();
//------------- End Mouse Hover Show/Hide Controls-------------------------*/
//map.addControl(new GLargeMapControl3D()); //add fancy 3D map controls (zoom, set center)
//map.addControl(new GLargeMapControl()); //add regular map controls (zoom, set center)
//map.addControl(new GMapTypeControl()); //add fancy map controls (maptype option: map, satellite, hybid)
map.setMapType(G_PHYSICAL_MAP); //change Maptype to Terrian
map.enableContinuousZoom(); //smoothed zoom in and out
map.setCenter(new GLatLng(20.6328, 4.2188),2); //change Map to this coordinate (best try to center of earth)
}
}
//Run this function when "Plot Points" is submitted
function plot(){
//plotAddress("tooltip","city, state","link to image with extension", iconWidth, iconHeight); *iconWidth and iconHeight, not necessary
//plotAddress("Factory", "New York, NY","icons/_firstaid.png", 15, 15);
//plotAddress("Factory", "New York, NY","icons/_firstaid.png", 15, 15);
//plotLatLong("tooltip",latitude, longitude, "link to image with extension", iconWidth, iconHeight);
//plotLatLong("FELDBACH, Switzerland",47.66667,8.98333,"icons/_mainroad.png", 15, 15);
//plotLatLong("Lab",48.83777, 10.0933, "icons/_firstaid.png", 15, 15);
//draw line
//GPolyline(whereLatLongFrom, whereLatLongTo, lineColor, lineWeight, lineOpacity)
//var polyline1= new GPolyline([new GLatLng(33.8796,-117.8951),new GLatLng(34.780607,-106.711537)], "#000000", 3,0.9);map.addOverlay(polyline1);
//draw circle
//drawCircle(whereLatLong, radiusMiles, numPointsInCircle, lineColor, lineWeight, lineOpacity, fillColor, fillOpacity)
//drawCircle(new GLatLng(42.2773088, -83.7350464), 600, 100,"#00ff00",3,0.9,"#00ff00",0.5);
//--------------------------------------------------------------------------paste after this line
plotLatLong("Pratt",41.7633,-88.2900,"icons/factory.png", 30, 30);
drawCircle(new GLatLng(31.2,-112.3),358,50,"#000000",2,1,"#FF0000",0.75);
drawCircle(new GLatLng(32.6742,-101.2789),102,50,"#000000",2,1,"#FF0000",0.75);
drawCircle(new GLatLng(42.95,-120.2),29,50,"#000000",2,1,"#FF0000",0.75);
drawCircle(new GLatLng(42.2783,-114.1589),10,50,"#000000",2,1,"#FF0000",0.75);
drawCircle(new GLatLng(32.95,-80.2),10,50,"#000000",2,1,"#FF0000",0.75);
drawCircle(new GLatLng(34.9347,-104.9119),10,50,"#000000",2,1,"#FF0000",0.75);
drawCircle(new GLatLng(29.2,-100.5),10,50,"#000000",2,1,"#FF0000",0.75);
drawCircle(new GLatLng(29.2,-110.5),10,50,"#000000",2,1,"#FF0000",0.75);
drawCircle(new GLatLng(31.2,-112.3),10,50,"#000000",2,1,"#FF0000",0.75);
drawCircle(new GLatLng(32.9,-119.8),10,50,"#000000",2,1,"#FF0000",0.75);
drawCircle(new GLatLng(36.4,-118.4),10,50,"#000000",2,1,"#FF0000",0.75);
drawCircle(new GLatLng(45.517,-73.667),10,50,"#000000",2,1,"#FF0000",0.75);
drawCircle(new GLatLng(51.045,-114.0581),10,50,"#000000",2,1,"#FF0000",0.75);
drawCircle(new GLatLng(51.9,-0.2),10,50,"#000000",2,1,"#FF0000",0.75);
drawCircle(new GLatLng(31.2,-121.5),44,50,"#000000",2,1,"#FF0000",0.75);
//--------------------------------------------------------------------------complete paste before this line
}
function updateZoom()
{
plot();
var latlngbounds = new GLatLngBounds( );
for ( var i = 0; i < latlng.length; i++ )
{
latlngbounds.extend( latlng[ i ] );
//document.write(latlng[i]);
//alert (numPoints);
}
map.setCenter( latlngbounds.getCenter( ), map.getBoundsZoomLevel( latlngbounds ) );
}
//Function gets and plots long, lat based on city, state input
function plotAddress(toolTip,address, iconLink, iconWidth, iconHeight) {
if (geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + " not found", 15, 15);
} else {
//create custom icon required variables and link variable to icon link
var customIcon = new GIcon(G_DEFAULT_ICON);
customIcon.image = iconLink;
//customIconSize if necessary
if(iconWidth){
customIcon.iconSize = new GSize(iconWidth, iconHeight);
customIcon.iconAnchor = new GPoint(iconWidth/2,iconHeight);
customIcon.shadow = "";
}else{} //else do nothing to change the icon size
markerOptions = { icon:customIcon, draggable:true}
//create marker
var marker = new GMarker(point, markerOptions);
//add event to marker when clicked
GEvent.addListener(marker, 'click', function() {
//When clicked, open an Info Window
marker.openInfoWindowHtml(toolTip);
});
//plot marker
map.addOverlay(marker);
//add to arrary for best fit zoom
latlng[numPoints] = point;
numPoints++;
}
}
);
}
}
function plotLatLong(toolTip, latIN,lngIN, iconLink, iconWidth, iconHeight) {
//create custom icon,required variables and link variable to icon link
var customIcon = new GIcon(G_DEFAULT_ICON);
customIcon.image = iconLink;
//customIconSize if necessary
if(iconWidth){
customIcon.iconSize = new GSize(iconWidth, iconHeight);
customIcon.iconAnchor = new GPoint(iconWidth/2,iconHeight);
customIcon.shadow = "";
}else{} //else do nothing to change the icon size
markerOptions = {icon:customIcon, draggable:true, }
//assign Lat and Long
var latlngIN = new GLatLng(latIN, lngIN);
//create marker
var marker = new GMarker(latlngIN, markerOptions);
//add event to marker when clicked
GEvent.addListener(marker, 'click', function() {
//When clicked, open an Info Window
marker.openInfoWindowHtml(toolTip);
});
//plot marker
latlng[numPoints] = latlngIN;
//add to arrary for best fit zoom
numPoints++;
map.addOverlay(marker);
}
function drawCircle(whereLatLong, radiusMiles, numPointsInCircle, lineColor, lineWeight, lineOpacity, fillColor, fillOpacity){
poly = [] ;
var lat = whereLatLong.lat() ;
var lng = whereLatLong.lng() ;
var d2r = Math.PI/180 ; // degrees to radians
var r2d = 180/Math.PI ; // radians to degrees
var Clat = (radiusMiles/3963) * r2d ; // using 3963 as earth's radius
var Clng = Clat/Math.cos(lat*d2r);
//Add each point in the circle
for (var i = 0 ; i < numPointsInCircle ; i++)
{
var theta = Math.PI * (i / (numPointsInCircle / 2)) ;
Cx = lng + (Clng * Math.cos(theta)) ;
Cy = lat + (Clat * Math.sin(theta)) ;
poly.push(new GLatLng(Cy,Cx)) ;
}
//Add the first point to complete the circle
poly.push(poly[0]) ;
//Create a circle
circle = new GPolygon(poly, lineColor, lineWeight, lineOpacity, fillColor, fillOpacity) ;
map.addOverlay(circle) ;
}
// If the map position is out of range, move it back
function checkBounds() {
// Perform the check and return if OK
if (allowedBounds.contains(map.getCenter())) {
return;
}
// It`s not OK, so find the nearest allowed point and move there
var C = map.getCenter();
var X = C.lng();
var Y = C.lat();
var AmaxX = allowedBounds.getNorthEast().lng();
var AmaxY = allowedBounds.getNorthEast().lat();
var AminX = allowedBounds.getSouthWest().lng();
var AminY = allowedBounds.getSouthWest().lat();
if (X < AminX) {X = AminX;}
if (X > AmaxX) {X = AmaxX;}
if (Y < AminY) {Y = AminY;}
if (Y > AmaxY) {Y = AmaxY;}
//alert ("Restricting "+Y+" "+X);
map.setCenter(new GLatLng(Y,X));
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<input type="button" style="background-color:red" value="Clear Page" onClick="location.reload(true)" />
<input type="submit" style="background-color:lightgreen" value="Plot Points" onClick="plot();" />
<input type="submit" style="background-color:lightblue" value="Zoom - Fit" onClick="updateZoom();" />
<BR><BR>
<div id="map_canvas" style="width: 1400px; height: 880px"></div>
</body>
</html>
答案 0 :(得分：0)
<!DOCTYPE html>
<html>
<head>
<title>Simple styled maps</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
var brooklyn = new google.maps.LatLng(40.6743890, -100.9455);
var MY_MAPTYPE_ID = 'custom_style';
function initialize() {
var featureOpts = [
{
stylers: [
{ hue: '#736F6E' },
{ visibility: 'simplified' },
]
},
{
elementType: 'labels',
stylers: [
{ visibility: 'off' }
]
},
{
featureType: 'water',
stylers: [
{ color: '#736F6E' }
]
}
];
var mapOptions = {
zoom: 4,
center: brooklyn,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
},
mapTypeId: MY_MAPTYPE_ID
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var styledMapOptions = {
name: 'Custom Style'
};
var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions);
map.mapTypes.set(MY_MAPTYPE_ID, customMapType);
drawCircle(new google.maps.LatLng(31.2,-121.5),300,50,"#2D2D2D",2,1,"#2D2D2D",0.75);
}
function drawCircle(whereLatLong, radiusMiles, numPointsInCircle, lineColor, lineWeight, lineOpacity, fillColor, fillOpacity){
poly = [] ;
var lat = whereLatLong.lat() ;
var lng = whereLatLong.lng() ;
var d2r = Math.PI/180 ; // degrees to radians
var r2d = 180/Math.PI ; // radians to degrees
var Clat = (radiusMiles/3963) * r2d ; // using 3963 as earth's radius
var Clng = Clat/Math.cos(lat*d2r);
//Add each point in the circle
for (var i = 0 ; i < numPointsInCircle ; i++)
{
var theta = Math.PI * (i / (numPointsInCircle / 2)) ;
Cx = lng + (Clng * Math.cos(theta)) ;
Cy = lat + (Clat * Math.sin(theta)) ;
poly.push(new google.maps.LatLng(Cy,Cx)) ;
}
//Add the first point to complete the circle
poly.push(poly[0]) ;
// Create a circle
circle = new google.maps.Polygon({
paths: poly,
strokeColor: lineColor,
strokeWeight: lineWeight,
strokeOpacity: lineOpacity,
fillColor: fillColor,
fillOpacity: fillOpacity
});
circle.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
您的代码仍使用v2方法。例如：new GLatLng ==＆gt; new google.maps.LatLng，new GPolygon ==＆gt; new google.maps.Polygon，map.addOverlay（circle）==＆gt; circle.setMap（地图）;你也在错误的地方调用drawCircle。查看更正的代码。它适用于我