在从后端SQL表成功返回数据后，我必须在Google Maps API上添加多个标记。这是代码。
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="PublicMapNew.aspx.cs" Inherits="WebContent_ApplicatorAreas" %>
<head runat="server">
<title>Geolocation</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 70%;
}
</style>
<style type="text/css">
#map_canvas {
width: 400px;
height: 300px;
}
.contextmenu {
visibility: hidden;
background: #ffffff;
border: 1px solid #8888FF;
z-index: 10;
position: relative;
width: 140px;
}
.contextmenu div {
padding-left: 5px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="../CSS/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/mapStyling.css" />
<link rel="stylesheet" type="text/css" href="/WebContent/css/publicMap.css" />
<link href='css/custom.css' rel='stylesheet' type='text/css' />
<link href='css/registerCrop.css' rel='stylesheet' type='text/css' />
<script type="text/javascript" src="../javascript/bootstrap.js"></script>
<script type="text/javascript" src="/WebContent/Javascript/map.js"></script>
<script type="text/javascript" src="/WebContent/Javascript/publicMapNew.js"></script>
<!-- Website Font style -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" />
<!-- Google Fonts -->
<link href='https://fonts.googleapis.com/css?family=Passion+One' rel='stylesheet' type='text/css' />
<link href='https://fonts.googleapis.com/css?family=Oxygen' rel='stylesheet' type='text/css' />
<link rel="stylesheet" type="text/css" href="css/landingPage.css" />
</head>
<script>
$.get("header.html", function(data) {
$("#header").replaceWith(data);
});
</script>
<script type="text/javascript">
var user = null;
var serverval = null;
var usrapparea = null;
var usrcroploc = null;
//window.onload = init_publicmap;
</script>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" />
<div>
<!-- /.header -->
<div id="header"></div>
<div id="wrapper" style="height: 677px; width: 1923px;">
<input id="pac-input" class="controls" type="text" placeholder="Search Box" />
<div id="map_canvas" style="height: 677px;"></div>
</div>
<script>
var map = ""
function init_publicmap() {
PageMethods.QueryProducers("All", "All", QueryProducers_Success, Fail);
}
function customfeature(lat, long, type) {
this.type = type;
this.pos = new google.maps.LatLng(lat, long);
}
function QueryProducers_Success(val) {
var featuresloc = JSON.parse(val[1]);
for (var i = 0; i < featuresloc.length; i++) {
var customfeatureloc = new customfeature();
customfeatureloc.type = featuresloc[i].croptype;
customfeatureloc.pos = new google.maps.LatLng(featuresloc[i].lat, featuresloc[i].long);
addMarker(customfeatureloc, map);
}
}
function Fail(val) {
}
function initialize() {
var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(36.5007041, -93.5080389),
disableDefaultUI: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
var customControlDiv = document.getElementById("choiceMenuCrop");
var customSearch = document.getElementById("adv-search");
map.controls[google.maps.ControlPosition.LEFT_CENTER].push(customControlDiv);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(customSearch);
init_publicmap();
//createPolygons(map);
}
function addMarker(feature, map) {
var iconBase = '/WebContent/Images/IconsBase/';
var iconHoneyBees = {
url: iconBase + "honeybeesicon.JPG", // url
scaledSize: new google.maps.Size(35, 40), // scaled size
origin: new google.maps.Point(0, 0), // origin
anchor: new google.maps.Point(0, 0) // anchor
};
var iconFruitNuts = {
url: iconBase + "fruits&nuts.JPEG", // url
scaledSize: new google.maps.Size(35, 40), // scaled size
origin: new google.maps.Point(0, 0), // origin
anchor: new google.maps.Point(0, 0) // anchor
};
var iconForageGrass = {
url: iconBase + "Forage_Grass.JPG", // url
scaledSize: new google.maps.Size(35, 40), // scaled size
origin: new google.maps.Point(0, 0), // origin
anchor: new google.maps.Point(0, 0) // anchor
};
var iconFieldCrops = {
url: iconBase + "FieldCrops.png", // url
scaledSize: new google.maps.Size(35, 40), // scaled size
origin: new google.maps.Point(0, 0), // origin
anchor: new google.maps.Point(0, 0) // anchor
};
var iconNurseryGreen = {
url: iconBase + "Nursery_Greenhouse.JPG", // url
scaledSize: new google.maps.Size(35, 40), // scaled size
origin: new google.maps.Point(0, 0), // origin
anchor: new google.maps.Point(0, 0) // anchor
};
var iconVegetable = {
url: iconBase + "vegetable.png", // url
scaledSize: new google.maps.Size(35, 40), // scaled size
origin: new google.maps.Point(0, 0), // origin
anchor: new google.maps.Point(0, 0) // anchor
};
var icons = {
"Vegetables": {
icon: iconVegetable
},
"Greenhouse and Nursery": {
icon: iconNurseryGreen
},
"Field Crops": {
icon: iconFieldCrops
},
"Fruits and Nuts": {
icon: iconForageGrass
},
"Forage, Grassland": {
icon: iconFruitNuts
},
"Honeybees": {
icon: iconHoneyBees
}
};
var marker = new google.maps.Marker({
position: feature.pos,
icon: icons[feature.type].icon,
map: map
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD7FTNE22Wl6S6DTQF83sTZTqbFFPzEkmU&libraries=drawing,places,geometry&callback=initialize">
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</div>
</form>
</body>
要关注的主要部分是QueryProducers_Success函数，因为我测试了它，它返回数据并成功添加到标记但它没有出现在地图上。请帮帮我。