創建Google地圖的美國，沒有標記，但每個國家將是它自己的標記（邊界）

我是新手谷歌地圖。創建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)

來源

2016-06-14 Mitch S

你需要谷歌KML定義了地圖上的邊界，您需要找到每個州的kml數據並將其繪製到地圖上，然後附加一個點擊處理程序..這應該會給您一些東西谷歌。 –

啊，這裏是：https://www.google.com/fusiontables/data?docid=17aT9Ud-YnGiXdXEJUyycH2ocUqreOeKGbzCkUw#map:id=3 –

https://www.arcgis.com/home/item.html?id = f7f805eb65eb4ab787a0a3e1116ca7e5 –

你必須在你的地圖上加載邊界。邊界可以是KML格式，geoJSON格式等，根據您的使用谷歌地圖KML Layer或Data Layer甚至簡單google.maps.Polygon s。

我已經創造了這個使用Data Layer一個例子，看看this answer on SO（在回答中，運行JavaScript片段，並從地圖上方的下拉菜單中選擇「LOAD美國各州界線」），它解決了非常類似的問題到你。

邊界文件可公開從US CENSUS（不知道商業許可，但您必須自己檢查）爲shapefile s。有關如何將shapefile轉換爲所需格式的更多信息，請參閱參考答案。

編輯

對於僅與美國完成，這裏是工作示例着想規定界限，既懸停並點擊聽衆：

var map = null; 
 
var my_boundaries = {}; 
 
var data_layer; 
 
var info_window; 
 

 
//initialize map on document ready 
 
$(document).ready(function(){ 
 
\t var latlng = new google.maps.LatLng(20.723080, -73.984340); //you can use any location as center on map startup 
 
\t var myOptions = { 
 
\t \t zoom: 2, 
 
\t \t center: latlng, 
 
\t \t mapTypeControl: true, 
 
\t \t mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}, 
 
\t \t navigationControl: true, 
 
\t \t mapTypeId: google.maps.MapTypeId.ROADMAP 
 
\t }; 
 
\t map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
 
\t google.maps.event.addListener(map, 'click', function(){ 
 
\t \t if(info_window){ 
 
\t \t \t info_window.setMap(null); 
 
\t \t \t info_window = null; 
 
\t \t } 
 
\t }); 
 
\t 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(){ 
 
\t if(data_layer){ 
 
\t \t data_layer.forEach(function(feature) { 
 
\t \t \t data_layer.remove(feature); 
 
\t \t }); 
 
\t \t data_layer = null; 
 
\t } 
 
\t 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 
 
\t data_layer.setStyle({ //using set style we can set styles for all boundaries at once 
 
\t \t fillColor: 'white', 
 
\t \t strokeWeight: 1, 
 
\t \t fillOpacity: 0.1 
 
\t }); 
 

 
\t 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 
 
\t \t var boundary_id = e.feature.getProperty('boundary_id'); 
 
\t \t var boundary_name = "NOT SET"; 
 
\t \t if(boundary_id && my_boundaries[boundary_id] && my_boundaries[boundary_id].name) boundary_name = my_boundaries[boundary_id].name; 
 
\t \t if(info_window){ 
 
\t \t \t info_window.setMap(null); 
 
\t \t \t info_window = null; 
 
\t \t } 
 
\t \t info_window = new google.maps.InfoWindow({ 
 
\t \t \t content: '<div>You have clicked a boundary: <span style="color:red;">' + boundary_name + '</span></div>', 
 
\t \t \t size: new google.maps.Size(150,50), 
 
\t \t \t position: e.latLng, map: map 
 
\t \t }); 
 
\t }); 
 

 
\t data_layer.addListener('mouseover', function(e) { 
 
\t \t data_layer.overrideStyle(e.feature, { 
 
\t \t \t strokeWeight: 3, 
 
\t \t \t strokeColor: '#ff0000' 
 
\t \t }); 
 
\t \t var boundary_id = e.feature.getProperty('boundary_id'); 
 
\t \t var boundary_name = "NOT SET"; 
 
\t \t if(boundary_id && my_boundaries[boundary_id] && my_boundaries[boundary_id].name) boundary_name = my_boundaries[boundary_id].name; 
 
\t \t $('#bname').html(boundary_name); 
 
\t }); 
 

 
\t data_layer.addListener('mouseout', function(e) { 
 
\t \t data_layer.overrideStyle(e.feature, { 
 
\t \t \t strokeWeight: 1, 
 
\t \t \t strokeColor: '' 
 
\t \t }); 
 
\t \t $('#bname').html(""); 
 
\t }); 
 
} 
 

 
function loadBoundariesFromGeoJson(geo_json_url) { 
 
\t initializeDataLayer(); 
 
\t $.getJSON(geo_json_url, function (data) { 
 
\t \t if (data.type == "FeatureCollection") { //we have a collection of boundaries in geojson format 
 
\t \t \t if (data.features) { 
 
\t \t \t \t for (var i = 0; i < data.features.length; i++) { 
 
\t \t \t \t \t var boundary_id = i + 1; 
 
\t \t \t \t \t var new_boundary = {}; 
 
\t \t \t \t \t if (!data.features[i].properties) data.features[i].properties = {}; 
 
\t \t \t \t \t data.features[i].properties.boundary_id = boundary_id; //we will use this id to identify boundary later when clicking on it 
 
\t \t \t \t \t data_layer.addGeoJson(data.features[i], {idPropertyName: 'boundary_id'}); 
 
\t \t \t \t \t new_boundary.feature = data_layer.getFeatureById(boundary_id); 
 
\t \t \t \t \t if (data.features[i].properties.name) new_boundary.name = data.features[i].properties.name; 
 
\t \t \t \t \t if (data.features[i].properties.NAME) new_boundary.name = data.features[i].properties.NAME; 
 
\t \t \t \t \t my_boundaries[boundary_id] = new_boundary; 
 
\t \t \t \t } 
 
\t \t \t } 
 
\t \t } 
 
\t }); 
 
}

<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> 
 
\t <div id="map_canvas" style="height:400px; width:500px;"></div> 
 
</body>

來源

2016-06-14 16:54:32

謝謝你Matej P. 這看起來像應該工作的解決方案。今天我會進一步討論這個問題。感謝您的及時回覆。 Mitch S. Mitch S. –

創建Google地圖的美國，沒有標記，但每個國家將是它自己的標記（邊界）

回答

相關問題