Question

我的地图存在一些问题。我需要在每个区域（多边形）上显示一些标记，如https://www.foxtons.co.uk/living-in（WD，N，EN，E ...），它必须是其他页面上的链接。但我无法决定这个问题。而且我不知道如何在函数styleFeature中获取未来的对象，这就是他的中心。感谢。

这是我的代码图：

var mapStyle = [{
    'stylers': [{'visibility': 'on'}]
}, {
    'featureType': 'landscape',
    'elementType': 'geometry',
    'stylers': [{'visibility': 'on'}]
}, {
    'featureType': 'water',
    'elementType': 'geometry',
    'stylers': [{'visibility': 'on'}, {'color': '#bfd4ff'}]
}];
var map;
function initMap() {
// load the map
    map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: 55.864237, lng: -4.251806},
        zoom: 12,
        styles: mapStyle
    });
// set up the style rules and events for google.maps.Data
    map.data.setStyle(styleFeature);
    map.data.addListener('mouseover', mouseInToRegion);
    map.data.addListener('mouseout', mouseOutOfRegion);
    map.data.addListener('click', mouseClickOfRegion);
// state polygons only need to be loaded once, do them now
    loadMapShapes();
}
function loadMapShapes() {
// load US state outline polygons from a GeoJson file
    map.data.loadGeoJson('http://165.227.72.239/wp-content/themes/realty-child/js/regions.js', { idPropertyName: 'STATE' });
}
function styleFeature(feature) {
    var low = [5, 69, 54]; // color of smallest datum
    var high = [151, 83, 34]; // color of largest datum
    var color = '';
    var colored = '#078e05';
// determine whether to show this shape or not
    var showRow = true;
    var outlineWeight = 1.5, zIndex = 1;
    if (feature.getProperty('state') === 'hover') {
        outlineWeight = zIndex = 2;
        colored = '#92ce90';
    }
    var poly = {
        strokeWeight: outlineWeight,
        strokeColor: '#000',
        zIndex: zIndex,
        fillColor: colored,
        fillOpacity: 0.75,
        visible: showRow
    };
    var coordinates = feature.getGeometry().getAt(0).getArray();
    return poly;
}
function mouseInToRegion(e) {
// set the hover state so the setStyle function can change the border
    e.feature.setProperty('state', 'hover');

}

function mouseOutOfRegion(e) {
// reset the hover state, returning the border to normal
    e.feature.setProperty('state', 'normal');
}
function mouseClickOfRegion(e) {
// reset the click state, returning the border to normal
    e.feature.setProperty('click', 'normal');

    map.setZoom(13);
    map.setCenter(e.latLng);
    map.data.overrideStyle(e.feature,{fillColor:'transparent'});
}
initMap();

Answer 1

如果我理解你的问题，你想在多边形的中心添加一个带有链接的标记。

此功能将为您提供多边形的中心：

function getPolygonCenter(polygon) {
    var bounds = new google.maps.LatLngBounds()
    var paths  = polygon.getPaths()

    // loop through each path of the polygon
    for (var i = 0, i_end = paths.length; i < i_end; i++) {
        var path = paths.getAt(i)

        // loop through each LatLng pair of the path
        for (var j = 0, j_end = path.getLength(); j < j_end; j++) {

            // extend the bounds
            bounds.extend(path.getAt(j))
        }
    }

    // return the center of the bounds
    return bounds.getCenter()
}

此功能将创建一个带有链接的自定义标记：

function createMarkerWithLink(position, url, icon, map) {
    var marker = new google.maps.Marker({
        position : position,
        url      : url,
        icon     : icon,
        map      : map
    });

    // add click event that opens marker's url
    google.maps.event.addListener(marker, 'click', function() {
        window.location.href = this.url;
    });

    return marker;
}

修改

查看Data Class的 docs 后，您似乎可以向loadGeoJson提供回电，或者您可以致电forEach创建多边形后的数据类。

这是您访问loadGeoJson方法创建的多边形的方法：

function loadMapShapes() { // load US state outline polygons from a GeoJson file var urlString = 'http://165.227.72.239/wp-content/themes/realty-child/js/regions.js'; var options = { idPropertyName: 'STATE' }; var callback = function(arrFeatures) { for (var i = 0, i_end = arrFeatures.length; i < i_end; i++) { var feature = arrFeatures[i]; // do stuff with polygon } }; map.data.loadGeoJson(url, options, callback); }

这将是您使用forEach方法的方式：

loadMapShapes(); // would need to be called after the polygons had been created map.data.forEach(function(feature) { // do stuff with polygon here });

在区域（多边形）

1 个答案: