Javascript 谷歌地图API-地图上只显示一个JS脚本
我在朋友的帮助下回答了我的问题-现在显示标签并用弹出窗口构建多边形 代码使用带有两个建筑坐标、颜色值和建筑名称的外部GeoJSON。GeoJSON用于绘制构建的多边形，并填充信息框窗口 标签是带有坐标和硬编码文本的空白窗口框。还有其他关于堆栈溢出的例子，但是，我在让这两个函数都工作时遇到了麻烦。感谢所有帮助过我的人Javascript 谷歌地图API-地图上只显示一个JS脚本,javascript,google-maps,map,infowindow,infobox,Javascript,Google Maps,Map,Infowindow,Infobox,我在朋友的帮助下回答了我的问题-现在显示标签并用弹出窗口构建多边形 代码使用带有两个建筑坐标、颜色值和建筑名称的外部GeoJSON。GeoJSON用于绘制构建的多边形，并填充信息框窗口 标签是带有坐标和硬编码文本的空白窗口框。还有其他关于堆栈溢出的例子，但是，我在让这两个函数都工作时遇到了麻烦。感谢所有帮助过我的人 <!DOCTYPE html> <html> <head> <title>UT Campus Map</title&
<!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>
我用工作代码替换了原来的问题。很抱歉，格式和过程都很糟糕，这是我的第一个问题 不起作用的组合代码是什么样子的？谢谢你的帮助。我已经用遇到错误的当前版本更新了脚本。非常感谢。你的JSON似乎不是公开的，你能让它公开吗，或者更好地在你的问题中加入足够的内容来重现问题，这样你的问题就包含了一个，并且不依赖于外部链接。我已经清理了代码。现在正在努力在一些多边形中硬编码，并消除对外部GeoJSON链接的需要。谢谢