0

大家好你们好！

我正在尝试使用 API v3 创建自定义样式的 Google 地图。该地图最终将进入以下 Wordpress 页面（页面右侧的 310 像素 x 537 像素空白区域）：http ://www.flatschicago.com/edgewater-chicago-apartments/

我从Google Maps Javascript API v3（简单样式的地图页面）复制了 JavaScript/HTML 代码，并更改了配色方案以适应我网站的整体主题。我已经设法用我想要的颜色来格式化代码，并且我已经设法格式化地图的大小，使其适合我网页上指定的空间。

以下是我遇到的3件事：

  1. 我想在地图上添加 5 个以上的自定义绘图标记。我在哪里添加此代码？
  2. 我希望街道标签出现在地图上。我在哪里添加此代码？
  3. 我尝试将代码添加到我的 Wordpress 页面中，但我没有工作。我应该只添加 JavaScript/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 edgewater = new google.maps.LatLng(41.987245, -87.661233);

    var MY_MAPTYPE_ID = 'custom_style';

    function initialize() {

    var featureOpts = [

    {
      stylers: [
        { hue: '#3b3d38' },
        { visibility: 'simplified' },
        { gamma: 0.5 },
        { weight: 0.5 }
      ]
    },
    {
    featureType: 'poi.business',
      elementType: 'labels',
      stylers: [
        { visibility: 'off' }
      ]
    },
    {
      featureType: 'water',
      stylers: [
        { color: '#3b3d38' }
      ]
    }
    ];

      var mapOptions = {
    zoom: 12,
    center: edgewater,
    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);
    }

    google.maps.event.addDomListener(window, 'load', initialize);

    </script>
    </head>
    <body onload='intialize()'>
    <div id="map-canvas" style='width:310px; height:537px;'></div>
   </body>
   </html>

1）添加5+自定义绘图标记 我指的代码来自以下页面：页面链接。我知道我需要为每个位置添加标记图像和经度/纬度，但是当我尝试将此代码复制并粘贴到我已经创建的代码中时，地图不起作用。我应该在哪里复制和粘贴此代码？它是否进入函数 initialize() 代码中？还是它自己的功能？很困惑。

2) 添加街道标签 我所指的代码来自Google Maps Javascript API v3—Styled Maps页面。我想做的就是能够在地图上看到街道标签。我指的代码是这个。我尝试将其放入我的代码中，但同样没有用。是否有像“路”、“开”这样的简单标签可以让这些标签发挥作用？

var styleArray = [
{
featureType: "all",
stylers: [
  { saturation: -80 }
]
},{
featureType: "road.arterial",
elementType: "geometry",
stylers: [
  { hue: "#00ffee" },
  { saturation: 50 }
]
},{
featureType: "poi.business",
elementType: "labels",
stylers: [
  { visibility: "off" }
]
}
];

3) 向 Wordpress 页面添加代码 地图最终会出现在/edgewater-chicago-apartments/ pahe 上。我为地图留下的空间标记为 <td class="neighborhood-map" rowspan="5"></td>：

如果有人可以帮助我，我将永远感激不尽。我觉得我很接近，但这三件事阻碍了我，非常沮丧。任何人？

4

1 回答 1

1

您需要有实际数据（JSON 格式）才能添加标记。例如：

    // yourJsonData = data in valid JSON format
for ( i = 0; i < yourJsonData.length; i++ ) {
    var latlng = new google.maps.LatLng(yourJsonData[ i ].lat, yourJsonData[ i ].long);
    var marker = new google.maps.Marker({
        map: map,
        icon: yourURL + '/path-to-custom-markers/' + yourJsonData[ i ].icon,
        position: latlng,
        title: yourJsonData[ i ].title,
        html: '<div class="info-window">Your window text</div>'
    });
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(this.html);
        infowindow.setOptions({maxWidth: 800});
        infowindow.open(map, this);
    });
}

此代码循环一个数组 (yourJsonData)，其中包含纬度、经度等值。

于 2013-10-16T19:19:16.983 回答