-
1：我有一个用于样式的谷歌地图代码，并且有一些用户输入控件，例如文本框，组合框，它们在地图的同一页面上使用jQuery编码。现在我想传递输入用户，如featureType或MapType来初始化Javascript中的Google地图的功能。我不知道如何连接这两个部分。它们分别正常工作。我对jQuery :)很陌生。
-
2：第二个问题是我不知道我应该在哪里找到jQuery代码，在Head或Body中，因为我的谷歌地图JS代码在Head中。
这是谷歌地图代码：
<head>
...
<script type="text/javascript">
function initialize() {
// map style default
var pinkParksStyles = [
{
featureType: "road", // or e.g: "road.highway" or "road.local" or "poi.medical"
elementType: "all", // or "geometry" or "labels"
stylers: [
{ hue: "#ff0000" },
{ saturation: -5 },
{ lightness: -34 },
{ gamma: 1.16 }
]
}
];
var myOptions = {
zoom: 12,
center: new google.maps.LatLng(55.753395,37.62394),
mapTypeId: google.maps.MapTypeId.ROADMAP // other mapType: Hybrid, Terrain, Satellite
};
var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
map.setOptions({styles: pinkParksStyles});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<head>
这是jQuery输入标签，我通过警报测试了它们。
j查询输入控件
<body>
...
<div id="map_canvas" style="width:700px; height:500px"></div> // show the map
<form>
<label for="saturation"> Type a Number between -100, 100: </label>
<input id="saturation" type="text" />
<input type="button" value="Show Value" onclick="alert( $('#saturation').val() )" />
</form>
<form>
<select id="mapTypeId">
<option value="1">Hybrid</option>
<option value="2">Terrain</option>
<option value="3">Satellite</option>
</select>
<input type="button" value="Show Value" onclick="alert( $('#mapTypeId').val() )" />
</form>
<form>
<select id="featureType">
<option value="1">all</option>
<option value="2">road</option>
<option value="3">water</option>
</select>
<input type="button" value="Show Value" onclick="alert( $('#mapTypeId').val() )" />
</form>
...
</body>
我只知道应该使用这样的东西：
var featureType = $("#featureType").val();
但不知道如何将其发送到G地图JS代码以及jquery的位置。
提前谢谢。
像这样修改初始化函数：
function initialize() {
var featureType = $("#featureType").val();
// map style default
var pinkParksStyles = [
{
featureType: featureType , // or e.g: "road.highway" or "road.local" or"poi.medical"
elementType: "all", // or "geometry" or "labels"
stylers: [
{ hue: "#ff0000" },
{ saturation: -5 },
{ lightness: -34 },
{ gamma: 1.16 }
]
}
];
...........
}