Google maps 谷歌地图API不可见地图与形状重叠
我一直在研究地图样式，我相信这是实现我目标的方法，但执行并没有奏效。我想要的正是下面的内容，除了我想要地图的纯色或不可见地图。其目的是使用创建的形状覆盖到不同的地图上Google maps 谷歌地图API不可见地图与形状重叠,google-maps,google-maps-api-3,google-maps-api-2,Google Maps,Google Maps Api 3,Google Maps Api 2,我一直在研究地图样式，我相信这是实现我目标的方法，但执行并没有奏效。我想要的正是下面的内容，除了我想要地图的纯色或不可见地图。其目的是使用创建的形状覆盖到不同的地图上 <!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/xht
<!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>
LD团队-谷歌地图绘图仪
//创建全局变量
//用于打印地址
var-map=null；
var geocoder=geocoder=new GClientGeocoder（）//创建用于根据城市、州查找长纬度的函数
//圆圈
var poly=[]；
var圈；
//预适变焦
var latlng=新数组（）；
var numPoints=0；
var allowedBounds=新的GLatLngBounds（新的GLatLng（49.5，-10），新的GLatLng（59,2.6））；
//在页面加载时启动Google地图控件
函数初始化（）{
if（GBrowserIsCompatible（））{
map=newGMAP2（document.getElementById（“map_canvas”，15,15））；
//-------------限制缩放级别的范围-----------------------
//获取地图类型的列表
var mt=map.getMapTypes（）；
//覆盖getMinimumResolution（）和getMaximumResolution（）方法
对于（变量i=0；i
简单样式地图
html，正文，#地图画布{
身高：100%；
边际：0px；
填充：0px
}
var映射；
var brooklyn=new google.maps.LatLng（40.6743890，-100.9455）；
var MY_MAPTYPE_ID='custom_style'；
函数初始化（）{
变量特性选项=[
{
样式：[
{色调：'#736F6E'}，
{可见性：'简化'}，
]
},
{
elementType:'标签'，
样式：[
{可见性：“关闭”}
]
},
{
功能类型：“水”，
样式：[
{颜色：'#736F6E'}
]
}
];
变量映射选项={
缩放：4，
中心：布鲁克林，
mapTypeControlOptions：{
MapTypeId:[google.maps.MapTypeId.ROADMAP，我的地图类型]
},
mapTypeId:MY_MAPTYPE_ID
};
map=new google.maps.map（document.getElementById（'map-canvas'），
地图选项）；
var styledMapOptions={
名称：“自定义样式”
};
var customMapType=new google.maps.StyledMapType（featureOpts，styledMapOptions）；
map.mapTypes.set（MY\u MAPTYPE\u ID，customMapType）；
drawCircle（新google.maps.LatLng（31.2，-121.5），300,50，“2d2d”，2,1，“2D2D2D”，0.75）；
}
函数drawCircle（其中Latlong、radiusMiles、NumpointsCircle、lineColor、lineWeight、lineOpacity、fillColor、fillOpacity）{
多边形=[]；
var lat=whereLatLong.lat（）；
var lng=whereLatLong.lng（）；
var d2r=Math.PI/180；//度到弧度
var r2d=180/Math.PI；//弧度到度
var Clat=（半径英里/3963）*r2d；//使用3963作为地球半径
var Clng=Clat/Math.cos（lat*d2r）；
//添加圆中的每个点
对于（变量i=0；i
您的代码仍然使用v2方法。例如：new GLatLng=>new google.maps.LatLng，new GPolygon==>new google.maps.Polygon，map.addOverlay（circle）=>circle.setMap（map）；另外，您在错误的位置调用了drawCircle。请参阅更正的代码。它对我有效您使用的是API v2，该版本在2010年被弃用，大约从去年11月起就一直不起作用（如果是这样的话，您真的看到的是v3的劣质版本，它将降低功能）。在处理任何其他问题之前，您应该重写整个过程以使用API v3。请参阅：在v3中创建“空白”贴图类型非常容易，请参阅，非常接近（不显示坐标并删除平铺边框）好的，我尝试重写到v3。我可以将贴图设置为不可见（{visibility:'off'）…但我无法使形状覆盖层正常工作。有什么想法吗？好吧，我切换了V3，但无法显示形状：代码是什么样子的？你能提供一个小提琴或链接来显示问题吗？我看到了在设置地图样式以关闭所有内容时出现的问题（这就是为什么我建议使用空白瓷砖的自定义地图）。
<!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>