-3

我在朋友的帮助下回答了我的问题 - 现在显示带有弹出窗口的标签和构建多边形。

该代码使用具有两个建筑物坐标、颜色值和建筑物名称的外部 GeoJSON。GeoJSON 用于绘制建筑多边形，并填充 infoBox 窗口。

标签是带有坐标和文本硬编码的空白窗口框。Stack Overflow 上还有其他这样的例子，但是，我在让这两个函数都工作时遇到了麻烦。感谢所有帮助过的人。

<!DOCTYPE html>
<html>
  <head>
    <title>UT Campus Map</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
        html, body, #map-canvas {
            height: 90%;
            padding: 10px;
        }
    </style>

    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
    <script>

        // global variable
        var map;
        var mapData; 
        var dataURL = 'https://googledrive.com/host/0B9SE53Gvj0AsR3hyUDJ4Nk9ybG8/Bld.json';

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

        var colors = ["#9295ca", "#076bb6", "#e66665", "#666", "#333", "#456789"];

        // create the map when the page loads
        function initialize() {

            var mapOptions = {
                zoom: 16,
                center: new google.maps.LatLng(30.284, -97.7325)
            };

            // build the map
            map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);

            // get the data and draw the polygons
            $.getJSON( dataURL, function( data ) {
                loadGeoJSON(data);
            });

            // add colors
            stylePolygons();

            // add click listeners with info boxes
            addClickListeners();

            // finally add labels
            addLabels();
        };

        // fetch the geojson data from the server
        function loadGeoJSON (data) {
            console.log(data);
            map.data.addGeoJson(data,{idPropertyName:"id"});
        };

        // assign colors based on value property of each feature
        function stylePolygons () {
            map.data.setStyle(function(feature) {
                var value = feature.getProperty('value');
                var color = colors[value];
                return {
                    fillColor: color,
                    strokeWeight: 1
                };
            });
        };

        //listen for click events
        function addClickListeners () {
            map.data.addListener('click', function(event) {
                //show an infowindow on click   
                infoWindow.setContent('<div style="line-height:1.35;overflow:hidden;white-space:nowrap;"> <b>'+event.feature.getProperty("bldAbbrev") +"</b>"+"</br>" + event.feature.getProperty("GoogInfoWi") +"<br/>" + event.feature.getProperty("addressStr") +"</div>");
                var anchor = new google.maps.MVCObject();
                anchor.set("position",event.latLng);
                infoWindow.open(map,anchor);

            });
        };

        function buildMarkers(map, markerData) {
            var newMarkers = [],
                marker;
                var blankMarker = {
                    path: 'M 0,0,0 z',
                    fillColor: 'yellow',
                    fillOpacity: 0.8,
                    scale: 0,
                    strokeColor: 'white',
                    strokeWeight: 4
                };
            for(var i=0; i<markerData.length; i++) {
                marker = new google.maps.Marker({
                    map: map,
                    icon: blankMarker,
                    draggable: true,
                    position: markerData[i].latLng,
                    visible: true
                }),
                boxText = document.createElement("div"),
                //these are the options for all infoboxes
                infoboxOptions = {
                     content: boxText,
                    disableAutoPan: false,
                    maxWidth: 0,
                    pixelOffset: new google.maps.Size(40, 0),
                    zIndex: null,
                    boxStyle: {
                        background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat",
                        opacity: 1,
                        width: "24px"
                    },
                    closeBoxMargin: "12px 4px 2px 2px",
                    closeBoxURL: "",
                    infoBoxClearance: new google.maps.Size(0, 0),
                    isHidden: false,
                    pane: "floatPane",
                    enableEventPropagation: false
                };

                newMarkers.push(marker);
                //define the text and style for all infoboxes
                boxText.style.cssText = "margin-top: 8px; background:#0xFFFFFF; color:#333; font-family:Arial; font-size:24px; padding: 0px; border-radius:0px; -webkit-border-radius:0px; -moz-border-radius:0px;";
                boxText.innerHTML = markerData[i].label;
                //Define the infobox
                newMarkers[i].infobox = new InfoBox(infoboxOptions);
                //Open box when page is loaded
                newMarkers[i].infobox.open(map, marker);

            }
            return newMarkers;
        };

        function addLabels () {
            var markerInfoArray = 
            [
                { 
                    latLng: new google.maps.LatLng(30.2848878, -97.7362857), 
                    label:"SAC"
                },
                { 
                    latLng: new google.maps.LatLng(30.2819835, -97.7404576),
                    label:"ATT"
                }
            ];

            var markerArray = buildMarkers(map, markerInfoArray);
        };



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

    </script>

  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>
4

1 回答 1

0

我用工作代码替换了原来的问题。很抱歉格式和程序不好，这是我的第一个问题。

于 2014-08-21T21:27:22.723 回答