Google maps 如何';马克';从其周围的街道/道路中选择一个区域,并在该区域中放置一个编号
尝试用颜色“标记”区域并在该区域中放置数字: 我在这里举例说明:Google maps 如何';马克';从其周围的街道/道路中选择一个区域,并在该区域中放置一个编号,google-maps,google-maps-api-3,Google Maps,Google Maps Api 3,尝试用颜色“标记”区域并在该区域中放置数字: 我在这里举例说明: 这些数字是静态的,不会改变。 假定区域标记会改变颜色。以及区域标记,假设使用其周围的街道/道路围绕该区域(而不仅仅是普通圆图形) 假设这些数字是我需要访问的领域,我会尝试更好地解释我自己。。 最初它们是用红色着色的。如果我去一个地区。。然后,当我完成访问时,标记变为蓝色 希望我有道理。我没有这方面的代码。。我试着去寻找,但没有成功 我会尽量简化它,我可以设法降低颜色不改变,使它也静态 为此,我需要在地图上绘制一些“区域”,
- 这些数字是静态的,不会改变。 假定区域标记会改变颜色。以及区域标记,假设使用其周围的街道/道路围绕该区域(而不仅仅是普通圆图形)
- 我会尽量简化它,我可以设法降低颜色不改变,使它也静态 为此,我需要在地图上绘制一些“区域”,但要从该区域周围的街道/道路绘制 只有我的意思是不要在两点之间划一条线
- 这里有一个解决方案。另一种可能是图像覆盖,但我相信下面的解决方案更灵活
您将需要:
在上面的javascript文件中,一旦拥有它,您还需要将mapPane.appendChild(a)更改为floatPane.appendChild(a)这是为了获得多边形顶部的文本。正如您将在下面的JSFIDLE中看到的,文本位于多边形下方
解决方案:
上面的javascript在下面的代码中是map_label.js
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Polygon Arrays</title>
<style>
html, body, #map-canvas
{
height: 100%;
margin: 0px;
padding: 0px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="scripts/map_label.js" type="text/javascript"></script>
<script>
var map;
var infoWindow;
var mypolygon;
function initialize() {
var mapOptions = {
zoom: 18,
center: new google.maps.LatLng(50.71392, -1.983551),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
// Define the LatLng coordinates for the polygon.
var triangleCoords = [
new google.maps.LatLng(50.71433, -1.98392),
new google.maps.LatLng(50.71393, -1.98239),
new google.maps.LatLng(50.71388, -1.98226),
new google.maps.LatLng(50.71377, -1.98246),
new google.maps.LatLng(50.71332, -1.98296),
new google.maps.LatLng(50.71334, -1.98324),
new google.maps.LatLng(50.71374, -1.9845),
new google.maps.LatLng(50.71436, -1.98389)];
// Construct the polygon.
mypolygon = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: '#FF0000',
fillOpacity: 0.35
});
mypolygon.setMap(map);
//Define position of label
var myLatlng = new google.maps.LatLng(50.71392, -1.983551);
var mapLabel = new MapLabel({
text: '1',
position: myLatlng,
map: map,
fontSize: 20,
align: 'left'
});
mapLabel.set('position', myLatlng);
// Add a listener for the click event. You can expand this to change the color of the polygon
google.maps.event.addListener(mypolygon, 'click', showArrays);
infoWindow = new google.maps.InfoWindow();
}
/** @this {google.maps.Polygon} */
function showArrays(event) {
//Change the color here
mypolygon.setOptions({ fillColor: '#0000ff' });
// Since this polygon has only one path, we can call getPath()
// to return the MVCArray of LatLngs.
var vertices = this.getPath();
var contentString = '<b>My polygon</b><br>' +
'Clicked location: <br>' + event.latLng.lat() + ',' + event.latLng.lng() +
'<br>';
// Iterate over the vertices.
for (var i = 0; i < vertices.getLength(); i++) {
var xy = vertices.getAt(i);
contentString += '<br>' + 'Coordinate ' + i + ':<br>' + xy.lat() + ',' + xy.lng();
}
// Replace the info window's content and position.
infoWindow.setContent(contentString);
infoWindow.setPosition(event.latLng);
infoWindow.open(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas">
</div>
</body>
</html>
我的多边形不是最好的,但你知道了
更新:在下面的代码中添加了单击多边形时的颜色更改
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Polygon Arrays</title>
<style>
html, body, #map-canvas
{
height: 100%;
margin: 0px;
padding: 0px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="scripts/map_label.js" type="text/javascript"></script>
<script>
var map;
var infoWindow;
var mypolygon;
function initialize() {
var mapOptions = {
zoom: 18,
center: new google.maps.LatLng(50.71392, -1.983551),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
// Define the LatLng coordinates for the polygon.
var triangleCoords = [
new google.maps.LatLng(50.71433, -1.98392),
new google.maps.LatLng(50.71393, -1.98239),
new google.maps.LatLng(50.71388, -1.98226),
new google.maps.LatLng(50.71377, -1.98246),
new google.maps.LatLng(50.71332, -1.98296),
new google.maps.LatLng(50.71334, -1.98324),
new google.maps.LatLng(50.71374, -1.9845),
new google.maps.LatLng(50.71436, -1.98389)];
// Construct the polygon.
mypolygon = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: '#FF0000',
fillOpacity: 0.35
});
mypolygon.setMap(map);
//Define position of label
var myLatlng = new google.maps.LatLng(50.71392, -1.983551);
var mapLabel = new MapLabel({
text: '1',
position: myLatlng,
map: map,
fontSize: 20,
align: 'left'
});
mapLabel.set('position', myLatlng);
// Add a listener for the click event. You can expand this to change the color of the polygon
google.maps.event.addListener(mypolygon, 'click', showArrays);
infoWindow = new google.maps.InfoWindow();
}
/** @this {google.maps.Polygon} */
function showArrays(event) {
//Change the color here
mypolygon.setOptions({ fillColor: '#0000ff' });
// Since this polygon has only one path, we can call getPath()
// to return the MVCArray of LatLngs.
var vertices = this.getPath();
var contentString = '<b>My polygon</b><br>' +
'Clicked location: <br>' + event.latLng.lat() + ',' + event.latLng.lng() +
'<br>';
// Iterate over the vertices.
for (var i = 0; i < vertices.getLength(); i++) {
var xy = vertices.getAt(i);
contentString += '<br>' + 'Coordinate ' + i + ':<br>' + xy.lat() + ',' + xy.lng();
}
// Replace the info window's content and position.
infoWindow.setContent(contentString);
infoWindow.setPosition(event.latLng);
infoWindow.open(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas">
</div>
</body>
</html>
多边形阵列
html,正文,#地图画布
{
身高:100%;
边际:0px;
填充:0px;
}
var映射;
var信息窗口;
多角形;
函数初始化(){
变量映射选项={
缩放:18,
中心:新google.maps.LatLng(50.71392,-1.983551),
mapTypeId:google.maps.mapTypeId.ROADMAP
};
map=new google.maps.map(document.getElementById('map-canvas'),mapOptions);
//定义多边形的板条坐标。
var triangleCoords=[
新google.maps.LatLng(50.71433,-1.98392),
新google.maps.LatLng(50.71393,-1.98239),
新google.maps.LatLng(50.71388,-1.98226),
新google.maps.LatLng(50.71377,-1.98246),
新google.maps.LatLng(50.71332,-1.98296),
新google.maps.LatLng(50.71334,-1.98324),
新google.maps.LatLng(50.71374,-1.9845),
新google.maps.LatLng(50.71436,-1.98389)];
//构造多边形。
mypolygon=新建google.maps.Polygon({
路径:三角形门,
strokeColor:“#FF0000”,
笔划不透明度:0.8,
冲程重量:3,
填充颜色:'#FF0000',
不透明度:0.35
});
mypolygon.setMap(map);
//定义标签的位置
var mylatng=new google.maps.LatLng(50.71392,-1.983551);
var mapLabel=新的mapLabel({
正文:“1”,
职位:myLatlng,
地图:地图,
尺寸:20,
对齐:“左”
});
mapLabel.set('position',myLatlng);
//为单击事件添加侦听器。您可以展开此侦听器以更改多边形的颜色
google.maps.event.addListener(mypolygon,'click',showArray);
infoWindow=new google.maps.infoWindow();
}
/**@this{google.maps.Polygon}*/
函数ShowArray(事件){
//在这里换颜色
setOptions({fillColor:'#0000ff'});
//因为这个多边形只有一条路径,所以我们可以调用getPath()
//返回LatLngs的MVCArray。
var顶点=this.getPath();
var contentString='My polygon
'+
'单击的位置:
'+event.latLng.lat()+','+event.latLng.lng()+
“
”;
//在顶点上迭代。
对于(var i=0;i'+'坐标'+i+':
'+xy.lat()+','+xy.lng();
}
//替换信息窗口的内容和位置。
setContent(contentString);
infoWindow.setPosition(event.latLng);
打开(地图);
}
google.maps.event.addDomListener(窗口“加载”,初始化);
我的消息来源如下
对于多边形:
https://developers.google.com/maps/documentation/javascript/examples/polygon-array
用于标签
请注意,标签在不支持画布的浏览器(如IE8)中不起作用。
MapLabel for Google Maps V3-请注意,用户浏览器必须支持画布才能显示标签。
这正是我需要的:)