Question

在帮助下，我已经想出如何制作一个谷歌地图样式和颜色，以匹配我的客户的印刷地图。我还想出了如何用自定义标记制作地图。问题是，我似乎无法将两者结合起来。

以下是样式化地图中的代码：

<!DOCTYPE html>
<html>
    <head>
        <style>
            #map-canvas {
                width: 950px;
                height: 525px;
            }
        </style>
        <script src="https://maps.googleapis.com/maps/api/js"></script>
        <script>
            function initialize() {
                var mapCanvas = document.getElementById('map-canvas');
                var mapOptions = {
                    center: new google.maps.LatLng(45.510000, -122.630930),
                    zoom: 14,
                    MapTypeId: google.maps.MapTypeId.ROADMAP,
                    styles: [
                        {
                            featureType: 'parks',
                            elementType: 'geometry',
                            stylers: [
                                { color: "#8dc858" }
                            ]
                        }, {
                            featureType: 'road',
                            elementType: 'geometry',
                            stylers: [
                                { color: '#FFFFFF' },
                                { weight: 0.6 }
                            ]   
                        }, {
                            featureType: 'landscape',
                            elementType: 'geometry',
                            stylers: [
                                { color: "#d7dfbd" }
                            ]   
                        }, {
                            featureType: 'water',
                            elementType: 'geometry',
                            stylers: [
                                { color: "#647ca1" }
                            ]
                        },{
                            featureType: 'transit.line',
                            elementType: 'geometry',
                            stylers: [
                                { color: "#696969" }
                        ]
                    }
                    ]
                };
                var map = new google.maps.Map(mapCanvas, mapOptions);
            }
            google.maps.event.addDomListener(window, 'load', initialize);
        </script>
    </head>
    <body>
        <div id="map-canvas"></div>
    </body>
</html>

以下是带有自定义标记的地图代码：

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>GoogleMapHawthorne It Works!</title> 
  <script src="http://maps.google.com/maps/api/js?sensor=false" 
          type="text/javascript"></script>
</head> 
<body>
  <div id="map" style="width: 950px; height: 525px;"></div>

  <script type="text/javascript">
    var locations = [
      ['Hawthorne Chiropractic and Healing Arts', 45.504718, -122.653155, 4],
      ['Hawthorne Wellness', 45.511934, -122.622045, 5],
      ['Mint Dental Works', 45.517792, -122.651134, 3],

    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 14,
      center: new google.maps.LatLng(45.510000, -122.630930),
      mapTypeId: google.maps.MapTypeId.ROADMAP

    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map,
        icon: {
          url: '.../GreenCross.png',
          scaledSize: new google.maps.Size(25, 25)

        }
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
  </script>
</body>
</html>

我尝试使用mapTypeId: google.maps.MapTypeId.ROADMAP下方的标记将'样式'粘贴到地图中，但这只是给了我一张空白地图。

有关如何组合这些的任何建议？我搜索了几个主题，但似乎没有人有同样的问题。如果有人在工作中已经知道类似的问题，请随时指出。

编辑：应用户geocodezip的请求，这是我尝试拼接这两个片段：

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>GoogleMapHawthorne It Works!</title> 
  <script src="http://maps.google.com/maps/api/js?sensor=false" 
          type="text/javascript"></script>
</head> 
<body>
  <div id="map" style="width: 950px; height: 525px;"></div>

  <script type="text/javascript">
    var locations = [
      ['Hawthorne Chiropractic and Healing Arts', 45.504718, -122.653155, 4],
      ['Hawthorne Wellness', 45.511934, -122.622045, 5],
      ['Mint Dental Works', 45.517792, -122.651134, 3],

    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 14,
      center: new google.maps.LatLng(45.510000, -122.630930),
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      styles: [
            {
              featureType: 'parks',
              elementType: 'geometry',
              stylers: [
                { color: "#8dc858" }
              ]
            }, {
              featureType: 'road',
              elementType: 'geometry',
              stylers: [
                { color: '#FFFFFF' },
                { weight: 0.6 }
              ] 
            }, {
              featureType: 'landscape',
              elementType: 'geometry',
              stylers: [
                { color: "#d7dfbd" }
              ] 
            }, {
              featureType: 'water',
              elementType: 'geometry',
              stylers: [
                { color: "#647ca1" }
              ]
            },{
              featureType: 'transit.line',
              elementType: 'geometry',
              stylers: [
                { color: "#696969" }
            ]      
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map,
        icon: {
          url: 'file:///Volumes/GIS_FLASHDR/Indie%20Carto%20Projects/Hawthorne/GreenCross.png',
          scaledSize: new google.maps.Size(25, 25)

        }
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
  </script>
</body>
</html>

Answer 1

您可以将地图样式添加到mapOptions字段。

working fiddle

代码段

＆＃13;

var locations = [
  ['Hawthorne Chiropractic and Healing Arts', 45.504718, -122.653155, 4],
  ['Hawthorne Wellness', 45.511934, -122.622045, 5],
  ['Mint Dental Works', 45.517792, -122.651134, 3],

];

var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 14,
  center: new google.maps.LatLng(45.510000, -122.630930),
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  styles: [{
    featureType: 'parks',
    elementType: 'geometry',
    stylers: [{
      color: "#8dc858"
    }]
  }, {
    featureType: 'road',
    elementType: 'geometry',
    stylers: [{
      color: '#FFFFFF'
    }, {
      weight: 0.6
    }]
  }, {
    featureType: 'landscape',
    elementType: 'geometry',
    stylers: [{
      color: "#d7dfbd"
    }]
  }, {
    featureType: 'water',
    elementType: 'geometry',
    stylers: [{
      color: "#647ca1"
    }]
  }, {
    featureType: 'transit.line',
    elementType: 'geometry',
    stylers: [{
      color: "#696969"
    }]
  }]
});

var infowindow = new google.maps.InfoWindow();

var marker, i;

for (i = 0; i < locations.length; i++) {
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map,
    icon: {
      url: 'https://upload.wikimedia.org/wikipedia/commons/0/05/Green_Cross.png',
      scaledSize: new google.maps.Size(25, 25)

    }
  });

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));
}

＆＃13;

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

＆＃13;

Answer 2

给出的答案仅显示3到4个结果。如果用户在那种情况下移动该地图，我需要在用户移动地图的任何地方显示结果。例如：从当前位置，用户向左移动，然后显示他们的结果：餐馆，医院等，包括他们的特定图像和名称。

那么在这种情况下我需要做什么。

将自定义标记添加到自定义的Google地图

2 个答案: