Fatal编程技术网
  • javascript/
  • Javascript 使用谷歌地图API（XML）切换标记

Javascript 使用谷歌地图API（XML）切换标记

javascript xml google-maps google-maps-api-3

Javascript 使用谷歌地图API（XML）切换标记,javascript,xml,google-maps,google-maps-api-3,google-maps-markers,Javascript,Xml,Google Maps,Google Maps Api 3,Google Maps Markers,我一直在为这件事发愁。我试图通过点击按钮来切换地图上的标记。我在网上看到的例子是使用JSON，我使用XML提取数据，这有什么区别吗 函数加载（）{ var mylatng=new google.maps.LatLng（51.507664，-0.150174）； 变量映射选项={ 中心：myLatlng， 缩放：15， 滚轮：对， 动物控制：错误， mapTypeControl:false， 泛控制：错误， 街景控制：错误， 风格：stylesArray， mapTypeId:“路线图”} var

我一直在为这件事发愁。我试图通过点击按钮来切换地图上的标记。我在网上看到的例子是使用JSON，我使用XML提取数据，这有什么区别吗

函数加载（）{
var mylatng=new google.maps.LatLng（51.507664，-0.150174）；
变量映射选项={
中心：myLatlng，
缩放：15，
滚轮：对，
动物控制：错误，
mapTypeControl:false，
泛控制：错误，
街景控制：错误，
风格：stylesArray，
mapTypeId:“路线图”}
var map=new google.maps.map（document.getElementById（“map”）、mapOptions）；
var infoWindow=new google.maps.infoWindow；
下载URL（“inc/map.php”，函数（数据）{
var xml=data.responseXML；
var markers=xml.documentElement.getElementsByTagName（“标记”）；
对于（var i=0；i“+地址；
var icon=customIcons[type]| |{}；
var marker=new google.maps.marker({
地图：地图，
位置:点,，
标题：姓名，
可见：对，
类型：类型，
图标：icon.icon
});
bindInfoWindow（标记、地图、infoWindow、html）；
}
});
}
函数bindInfoWindow（标记、地图、infoWindow、html）{
google.maps.event.addListener（标记'click'，函数（）{
setContent（html）；
信息窗口。打开（地图、标记）；
});
}
函数下载url（url，回调）{
var请求=window.ActiveXObject？
新的ActiveXObject（'Microsoft.XMLHTTP'）：
新的XMLHttpRequest；
request.onreadystatechange=函数（）{
if（request.readyState==4）{
request.onreadystatechange=doNothing；
回调（请求、请求、状态）；
}
};
打开（'GET'，url，true）；
请求发送（空）；
}
函数doNothing（）{}
正在使用此文件创建XML文件：

$map=“fW2sxnzi”；
//启动XML文件，创建父节点
$dom=新的DOMDocument（“1.0”）；
$node=$dom->createElement（“标记”）；
$parnode=$dom->appendChild（$node）；
//打开到MySQL服务器的连接
$connection=mysql\u connect（'localhost'，$username，$password）；
if（！$connection）{die（'notconnected:'.mysql_error（））；}
//设置活动MySQL数据库
$db\u selected=mysql\u select\u db（$database，$connection）；
如果（！$db_选中）{
die（'不能使用db:'.mysql_error（））；
}
//选择标记表中的所有行
$query=“从map_id='$map''所在的位置选择*；
$result=mysql\u query（$query）；
如果（！$result）{
die（'无效查询：'.mysql_error（））；
}
标题（“内容类型：text/xml”）；
//遍历行，为每个行添加XML节点
while（$row=@mysql\u fetch\u assoc（$result））{
//添加到XML文档节点
$node=$dom->createElement（“标记”）；
$newnode=$parnode->appendChild（$node）；
$newnode->setAttribute（“名称”，$row['name']）；
$newnode->setAttribute（“地址”，$row['address']）；
$newnode->setAttribute（“lat”，$row['lat']）；
$newnode->setAttribute（“lng”，$row['lng']）；
$newnode->setAttribute（“类型”，$row['type']）；
}
echo$dom->saveXML（）；
我从数据库中提取标记和它们的详细信息，我希望通过“类型”来切换它们，即1、2、3或4

这是Ext Js中的，但我想你会明白的

我制作了一个全局数组：

  var fireDeptMarkers = [];
然后，我添加了一个复选框，但同样适用于按钮或切换：

{
        xtype: 'checkbox',
        fieldLabel: 'Fire Departments',
        itemId: 'fireDepartments',
        labelWidth: 200,
        width: 300
    },
我使用MVC模型，所以这里是控制器。我没有使用内联方式，而是使用此方法调用控制器中的函数：

  '#fireDepartments': {
            change: this.fireDepartmentsChanged
        },
下面是实际的函数，它在其中添加或删除标记。 制作标记后的最后一部分是将它们推入全局fireDemartments数组，然后我可以遍历该数组并将其设置为null以隐藏它们

在看了这篇文章之后，我将返回并修复的一件事是，每次单击按钮添加存储时，我都会加载它们。如果已经加载了，我可能应该将它放在哪里，以便只使用现有数据。但我认为这涵盖了我如何在点击按钮时添加和删除标记

fireDepartmentsChanged: function (checked) {
    if (checked.value == true) {
        var a = Ext.getStore('fireDepartment_s');
        a.load({
            callback: function () {

                Ext.each(Ext.getStore('fireDepartment_s').data.items, function (record) {

                    var latitude = record.data.location_lat;
                    var longitude = record.data.location_lng;
                    var address = record.data.address;
                    var department = record.data.department;

                    var contentString = '<body><p><b>' + department + '</b></p><p> ' + address + '</p>' +
                       '<button onclick="streetView(' + latitude + ',' + longitude + ')">Street View</button><p id="streetView"></p> ' +
                       '</body>';

                    var infowindow = new google.maps.InfoWindow({
                        content: contentString,
                    });


                    var marker = new google.maps.Marker({
                        position: new google.maps.LatLng(latitude, longitude),
                        icon: 'resources/images/fireDeptIcon.png',
                        map: map
                    });

                    google.maps.event.addListener(marker, 'click', function () {
                        infowindow.open(map, marker);
                    });

                    fireDeptMarkers.push(marker);

                });
            }
        });
    }

    else if (checked.value === false) {

        for (i = 0; i < fireDeptMarkers.length; i++) {
            fireDeptMarkers[i].setMap(null);
        }
    }
},

fireDepartmentsChanged:功能（已选中）{
if（checked.value==true）{
var a=Ext.getStore（“消防部门”）；
a、 装载({
回调：函数（）{
Ext.each（Ext.getStore（“消防部门”）。数据。项目，功能（记录）{
var纬度=记录.data.location\u lat；
var经度=record.data.location\u lng；
var地址=record.data.address；
var department=record.data.department；
var contentString=''+部门+'
'+address+'
'+
“街景”+
'';
var infowindow=new google.maps.infowindow({
content:contentString，
});
var marker=new google.maps.marker({
位置：新google.maps.LatLng（纬度、经度），
图标：“resources/images/fireDeptIcon.png”，
地图：地图
});
google.maps.event.addListener（标记，'click'，函数（）{
信息窗口。打开（地图、标记）；
});
消防队标记器。推（标记器）；
});
}
});
}
else if（选中。值===false）{
对于（i=0；i