个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
尝试用颜色“标记”一个区域并在该区域放置一个数字:
我在这里说明了它:
最佳答案
这是一种解决方案。另一个可能是图像叠加，但我相信下面的解决方案更灵活。
您将需要:http://google-maps-utility-library-v3.googlecode.com/svn/trunk/maplabel/src/maplabel-compiled.js
在上面的javascript文件中，一旦有了它，您还需要更改 mapPane.appendChild(a) 至 floatPane.appendChild(a) 这是为了获取多边形顶部的文本。正如您将在以下 JSFIDDLE 中看到的，文本位于多边形下方。
解决方案: http://jsfiddle.net/yN29Z/
上面的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>
关于google-maps - 如何从周围的街道/道路 'mark' 一个区域并在该区域放置一个数字，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19860794/
26
4
0
我正在制作一个基于网格的游戏。 在这个游戏中，您可以放置建筑物、墙壁和道路。 当某些东西被放置在网格中时，我将单元格 ID 设置为该对象 ID。到目前为止一切顺利，一切正常。 当我需要时，我的问题
我想创建一个交互式 map ，其中道路等的样式为我想要的颜色。现在，我了解了 Mapbox，但这不是我们想要使用的，因为最终它会因为费用而花费我们很多钱。 我一直在互联网上寻找替代方案。我发现了很多拼
我正在尝试用 Java 制作一个正则表达式，它可以粗略地用于匹配某些街道名称。我想这样做，以便给定以下字符串: Then someone decided to go to the high stree
尝试用颜色“标记”一个区域并在该区域放置一个数字: 我在这里说明了它: 数字是静态的，不会改变。 区域标记假设会改变颜色。并且区域标记假设使用周围的街道/道路包围该区域(不仅仅是简单的圆形图) 我会尝
我需要能够使用 V2 或 V3(最好是 3)创建在某种意义上忽略建筑物的路径。 我什至试图创建一个 kml 文件来自己绘制所有路径，然后找到一些方法根据需要打开/关闭它们。 例如。用户想从 A 点到
我在 http://www.41latitude.com/post/1268734799/google-styled-maps 上找到了一个代码片段: [ { featureType: "
我正在使用 Roads Google API 传递一个位置列表，我想根据这些点在最有可能由汽车行驶的道路上画线。 有些地方出了问题，因为有些点没有被线穿过，而且这些线不仅仅使用道路，有些点通过直线穿过
我们如何使用切换按钮在 Mapbox gl js 中突出显示(更改颜色)道路、人行道或自行车道？ 最佳答案 您可以使用setPaintProperty更改图层的填充颜色，就像在官方 Mapbox 示例
我正在尝试在道路上绘制一条路径并遵循一些给定的点。我正在使用 Google Directions API 来遵循道路。我在道路上放置了一些标记并将这些点与折线连接起来。我需要遵循红线但是它跟随并绘制蓝
我是一名优秀的程序员,十分优秀！