Question

我是谷歌地图的新手。

我正在搜索使用Google地图执行以下操作的方法：

创建美国地图，仅显示州的边界
无针点/标记
状态会有“鼠标悬停”效果以显示内容（桌面）
州将有一个“点击”事件来显示内容（移动）

示例：http://maps.debt.com/ccus-geo-map.html（但没有针点/标记，此地图无响应）

有没有人使用谷歌地图看过这样的事情，如果有的话，在哪里？有没有执行此操作的教程？谷歌文档没有帮助，因为标记显示，这不是理想的结果。

谢谢，

米奇

我在下面使用Google文档创建的代码示例，但这并未提供所需的结果......

    function initialize() {

    var locations = [
    ['California (LOS ANGELES)', 34.0522, -118.2437, 1],
    ['Florida (MIAMI)', 25.7617, -80.1918, 2],
    ['Maine (HOULTON)', 46.1262, -67.8402, 3],
    ['Washington (CLALLAM)', 48.253517, -124.257798, 4]
    ];
    var mapProp = {
        center: new google.maps.LatLng(39.8282, -98.5795), /* exact center of the US */
        zoom: 4,
        mapTypeId: google.maps.MapTypeId.ROADMAP
        /*
            ROADMAP (normal, default 2D map)
            SATELLITE (photographic map)
            HYBRID (photographic map + roads and city names)
            TERRAIN (map with mountains, rivers, etc.)
        */
    };
    var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
    var marker, i;
    var markers = new Array();
    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
        });
        markers.push(marker);
        google.maps.event.addListener(marker, 'click', (function (marker, i) {
            return function () {
                infowindow.setContent(locations[i][0]);
                infowindow.open(map, marker);
            }
        })(marker, i));
    }
}
google.maps.event.addDomListener(window, 'load', initialize)

Answer 1

您必须在地图上加载边界。边界可以是KML格式，geoJSON格式等，具体取决于您可以使用谷歌地图KML Layer或Data Layer甚至简单google.maps.Polygon。

我已使用Data Layer为此创建了一个示例，请查看this answer on SO（在回答中，运行javascript代码段并从地图上方的下拉列表中选择“LOAD US STATES BOUNDARIES”），它解决了与你非常相似的问题。

边界文件可从US CENSUS公开获取（不确定商业许可，但您必须自己检查）shapefile。有关如何将shapefile转换为所需格式的更多信息，请阅读引用的答案。

修改

为了完整起见，这里只是美国国家边界以及悬停和点击监听器的示例：

var map = null; var my_boundaries = {}; var data_layer; var info_window; //initialize map on document ready $(document).ready(function(){ var latlng = new google.maps.LatLng(20.723080, -73.984340); //you can use any location as center on map startup var myOptions = { zoom: 2, center: latlng, mapTypeControl: true, mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}, navigationControl: true, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); google.maps.event.addListener(map, 'click', function(){ if(info_window){ info_window.setMap(null); info_window = null; } }); loadBoundariesFromGeoJson("https://raw.githubusercontent.com/matej-pavla/Google-Mapshttps://raw.githubusercontent.com/matej-pavla/Google-Maps-Examples/master/BoundariesExample/geojsons/us.states.geo.json"); }); function initializeDataLayer(){ if(data_layer){ data_layer.forEach(function(feature) { data_layer.remove(feature); }); data_layer = null; } data_layer = new google.maps.Data({map: map}); //initialize data layer which contains the boundaries. It's possible to have multiple data layers on one map data_layer.setStyle({ //using set style we can set styles for all boundaries at once fillColor: 'white', strokeWeight: 1, fillOpacity: 0.1 }); data_layer.addListener('click', function(e) { //we can listen for a boundary click and identify boundary based on e.feature.getProperty('boundary_id'); we set when adding boundary to data layer var boundary_id = e.feature.getProperty('boundary_id'); var boundary_name = "NOT SET"; if(boundary_id && my_boundaries[boundary_id] && my_boundaries[boundary_id].name) boundary_name = my_boundaries[boundary_id].name; if(info_window){ info_window.setMap(null); info_window = null; } info_window = new google.maps.InfoWindow({ content: '<div>You have clicked a boundary: <span style="color:red;">' + boundary_name + '</span></div>', size: new google.maps.Size(150,50), position: e.latLng, map: map }); }); data_layer.addListener('mouseover', function(e) { data_layer.overrideStyle(e.feature, { strokeWeight: 3, strokeColor: '#ff0000' }); var boundary_id = e.feature.getProperty('boundary_id'); var boundary_name = "NOT SET"; if(boundary_id && my_boundaries[boundary_id] && my_boundaries[boundary_id].name) boundary_name = my_boundaries[boundary_id].name; $('#bname').html(boundary_name); }); data_layer.addListener('mouseout', function(e) { data_layer.overrideStyle(e.feature, { strokeWeight: 1, strokeColor: '' }); $('#bname').html(""); }); } function loadBoundariesFromGeoJson(geo_json_url) { initializeDataLayer(); $.getJSON(geo_json_url, function (data) { if (data.type == "FeatureCollection") { //we have a collection of boundaries in geojson format if (data.features) { for (var i = 0; i < data.features.length; i++) { var boundary_id = i + 1; var new_boundary = {}; if (!data.features[i].properties) data.features[i].properties = {}; data.features[i].properties.boundary_id = boundary_id; //we will use this id to identify boundary later when clicking on it data_layer.addGeoJson(data.features[i], {idPropertyName: 'boundary_id'}); new_boundary.feature = data_layer.getFeatureById(boundary_id); if (data.features[i].properties.name) new_boundary.name = data.features[i].properties.name; if (data.features[i].properties.NAME) new_boundary.name = data.features[i].properties.NAME; my_boundaries[boundary_id] = new_boundary; } } } }); }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("maps", "3",{other_params:"sensor=false"}); </script> <body style="margin:0px; padding:0px;" > <div style="float:left;clear:both;height:15px;"> You are hovering over: <span id="bname" style="font-weight:bold"></span></div> <div id="map_canvas" style="height:400px; width:500px;"></div> </body>

创建美国谷歌地图，没有标记，但每个州都是自己的标记（边界）

1 个答案: