色调我的Google地图 [英] Color Tint my Google Map

问题描述

我使用Google Maps V3 API来显示我的地图。

问题：如何为地图着色色彩，如蓝色，以便地图图块具有蓝色色调，但标记和其他覆盖不？我不希望在地图上使用自定义样式，这会导致我很快触及样式化地图的Google地图使用限制。

我想添加蓝色具有不透明度的多边形，但计算出平移地图时多边形将移出屏幕。有没有更好的方式来实现这种效果？

解决方案

添加一个矩形看起来很有说服力，有一个缺点：闪烁时地图放大和缩小。我没有完全测试，但是可能会遇到分层问题，例如无法点击矩形下方的一条线。我记得，这个标记位于不同的窗格中，因此它是可点击的。

演示 http：/ /jsfiddle.net/yV6xv/27/

 界限=新google.maps.LatLngBounds（
 new google.maps.LatLng（-84.999999，-179.999999），
 new google.maps.LatLng（84.999999，179.999999））; 
 
 rect = new google.maps.Rectangle（{
界限：界限，
 fillColor：＃0000ff，
 fillOpacity：0.3，
 strokeWeight ：0，
 map：map 
}）; 
  

附注：我尝试了一个KML覆盖图，如下所示：

 < ScreenOverlay> 
<名称>动态定位：屏幕顶部< /名称> 
<能见度> 0< / visibility> 
<图标> 
< href> http：//...blue.png< / href> 
< /图标> 
< overlayXY x =0y =1xunits =fractionyunits =fraction/> 
< screenXY x =0y =1xunits =fractionyunits =fraction/> 
< rotationXY x =0y =0xunits =fractionyunits =fraction/> 
< size x =1y =1xunits =fractionyunits =fraction/> 
< / ScreenOverlay> 
  

本来是赢家，但不能拖动和滚动地图。

I am using Google Maps V3 API to display my map.

Problem: How can I color tint the map, say blue, such that the map tiles have a blue tint to it, but the markers and other overlays do not? I do not wish to use custom-styles on the map itself which will cause me to hit the google map usage limits for styled maps quickly.

I thought of adding a blue polygon with an opacity, but figured the polygon will move off screen when you pan the map. Is there a better way to achieve this effect?

解决方案

Adding a rectangle looks pretty convincing to me, with a defect: flicker when the map is zoomed in and out. I didn't test thoroughly but you might run into layering issues, for example, being unable to click on a line that's below the rectangle. The marker, as I remember, is in a different pane so it is clickable.

Demo http://jsfiddle.net/yV6xv/27/

bounds = new google.maps.LatLngBounds(
  new google.maps.LatLng(-84.999999, -179.999999), 
  new google.maps.LatLng(84.999999, 179.999999));

rect = new google.maps.Rectangle({
    bounds: bounds,
    fillColor: "#0000ff",
    fillOpacity: 0.3,
    strokeWeight: 0,
    map: map
});

Side note: I tried a KML overlay like this:

  <ScreenOverlay>
    <name>Dynamic Positioning: Top of screen</name>
    <visibility>0</visibility>
    <Icon>
      <href>http://...blue.png</href>
    </Icon>
    <overlayXY x="0" y="1" xunits="fraction" yunits="fraction"/>
    <screenXY x="0" y="1" xunits="fraction" yunits="fraction"/>
    <rotationXY x="0" y="0" xunits="fraction" yunits="fraction"/>
    <size x="1" y="1" xunits="fraction" yunits="fraction"/>
  </ScreenOverlay>

Would have been a winner, but you can't drag and scroll the map.

这篇关于色调我的Google地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！