Google maps api 3 谷歌地图在按钮上加载地图单击-用另一个按钮加载标记
我试图在点击按钮时加载标记，但在某个地方我遗漏了一些东西。1.只需单击一个按钮即可拉出并加载地图。2.单击其他按钮即可加载标记。以下是我所拥有的：Google maps api 3 谷歌地图在按钮上加载地图单击-用另一个按钮加载标记,google-maps-api-3,onclick,google-maps-markers,Google Maps Api 3,Onclick,Google Maps Markers,我试图在点击按钮时加载标记，但在某个地方我遗漏了一些东西。1.只需单击一个按钮即可拉出并加载地图。2.单击其他按钮即可加载标记。以下是我所拥有的： <!DOCTYPE> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title></title> <link rel="stylesheet" type="text/css"
<!DOCTYPE>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" type="text/css" href="
<?php
$stylesarray = array("field");
echo $stylesarray[mt_rand(0,count($stylesarray)-1)];
?>.css">
<link rel="shortcut icon" href="images/favicon.ico">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?key=xxx&sensor=false"></script>
<script type="text/javascript">
var map = null;
$(document).ready(function(){
var lat=document.getElementById("latitude");
var long=document.getElementById("longitude");
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(showPosition);
}
function showPosition(position) {
lat.value=+position.coords.latitude;
long.value=+position.coords.longitude;
}
});
function load() {
var map = new google.maps.Map(document.getElementById("mapcontainer"), {
center: new google.maps.LatLng(20,0),
zoom: 3,
styles: mapstyle,
mapTypeControl: false,
navigationControl: false,
streetViewControl: false,
maxZoom: 8,
minZoom: 3,
mapTypeId: 'roadmap'
});
}
function getmarkers(){
downloadUrl("markers.php", function(data) {
//alert ("it works");
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var id = markers[i].getAttribute("id");
var info = markers[i].getAttribute("info");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("latitude")),
parseFloat(markers[i].getAttribute("longitude")));
var date = markers[i].getAttribute("date");
var html = "<div id='tooltip'><div id='tiptext'>" + info
+ "<div id='number'>" + id + "</div>"
+ "<div id='date'>" + date + "</div>"
+ "</div></div>";
var marker = new google.maps.Marker({
map: map,
position: point,
icon: 'images/mapicon.png'
});
createTooltip(marker, html);
}
});
</script>
</head>
<body>
<div id="mapcontainer">
<form>
<input type="button" id="map" onClick="load()"></input>
</form>
<form>
<input type="button" onClick="getmarkers()"></input>
</form>
</body>
</html>
map变量是initialize函数的局部变量。加载标记的代码将无法访问它
尝试全局定义它（在任何函数之外）：
然后在加载函数中初始化它
function load() {
map = new google.maps.Map(document.getElementById("mapcontainer"), {
所发布代码的问题（在语法错误之后）是getmarkers函数是load函数的本地函数。它需要是全局的，才能由HTML元素单击函数调用
您的map变量是初始化函数的本地变量。加载标记的代码将无法访问它
尝试全局定义它（在任何函数之外）：
然后在加载函数中初始化它
function load() {
map = new google.maps.Map(document.getElementById("mapcontainer"), {
所发布代码的问题（在语法错误之后）是getmarkers函数是load函数的本地函数。它需要是全局的，才能由HTML元素单击函数调用
似乎您没有在全局范围内声明map变量。仅在load函数范围内，将其声明为全局变量，它应该可以工作
var map = null; // Declaring map in the global scope
function load() {
// map references to global scope
map = new google.maps.Map(document.getElementById("mapcontainer"), {
...
}
downloadUrl("markerinfo.php", function(data) {
...
var marker = new google.maps.Marker({
map: map, // map references to global scope
position: point,
icon: 'images/mapicon.png'
});
createTooltip(marker, html);
}
});
尝试将DownloadUrl函数调用包装到另一个函数中，并改为调用该函数
<input type="button" id="markerload" onClick="getMarkers()"></input>
function getMarkers() {
downloadUrl("markerinfo.php", function(data) {
...
});
}
函数getMarkers（）{
下载URL（“markerinfo.php”，函数（数据）{
...
});
}
似乎您没有在全局范围内声明map变量。仅在load函数范围内，将其声明为全局变量，它应该可以工作
var map = null; // Declaring map in the global scope
function load() {
// map references to global scope
map = new google.maps.Map(document.getElementById("mapcontainer"), {
...
}
downloadUrl("markerinfo.php", function(data) {
...
var marker = new google.maps.Marker({
map: map, // map references to global scope
position: point,
icon: 'images/mapicon.png'
});
createTooltip(marker, html);
}
});
尝试将DownloadUrl函数调用包装到另一个函数中，并改为调用该函数
<input type="button" id="markerload" onClick="getMarkers()"></input>
function getMarkers() {
downloadUrl("markerinfo.php", function(data) {
...
});
}
函数getMarkers（）{
下载URL（“markerinfo.php”，函数（数据）{
...
});
}
函数getmarkers（）用于使用for循环检索所有标记
for (var i = 0; i < markers.length; i++) {
for（变量i=0；i
要一次加载一个标记，您需要为每个按钮单击增加它
IeVar i=0
全局
在getmarkers（）的末尾增加i++标记时，应在数组的最后一个成员之后停止增量。lengthfor (var i = 0; i < markers.length; i++) {
for（变量i=0；iVar i=0当数组的最后一个成员到达
标记时，您应该停止增量。length