javascript - 使用 Google map API (XML) 切换标记

Question

我一直在为这件事烦恼。我正在尝试通过单击按钮来切换 map 上的标记。我在网上看到的示例使用 JSON，而我使用 XML 来提取数据，这有什么区别吗？

function load() {
  var myLatlng = new google.maps.LatLng(51.507664, -0.150174);
  var mapOptions = {
            center: myLatlng,        
            zoom: 15,
            scrollwheel: true,
            zoomControl: false,
            mapTypeControl: false,
            panControl: false,
            streetViewControl: false,        
            styles: stylesArray,
            mapTypeId: 'roadmap' }

  var map = new google.maps.Map(document.getElementById("map"), mapOptions);

  var infoWindow = new google.maps.InfoWindow;

  downloadUrl("inc/map.php", function(data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {

      var name = markers[i].getAttribute("name");
      var address = markers[i].getAttribute("address");
      var type = markers[i].getAttribute("type");
      var point = new google.maps.LatLng(
          parseFloat(markers[i].getAttribute("lat")),
          parseFloat(markers[i].getAttribute("lng")));
      var html = "<b>" + name + "</b> <br/>" + address;
      var icon = customIcons[type] || {};

      var marker = new google.maps.Marker({
        map: map,
        position: point,
        title: name,
        visible: true,
        type: type,
        icon: icon.icon
      });

      bindInfoWindow(marker, map, infoWindow, html);

    }
  });
}


function bindInfoWindow(marker, map, infoWindow, html) {
  google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(html);
    infoWindow.open(map, marker);
  });
}

function downloadUrl(url, callback) {
  var request = window.ActiveXObject ?
      new ActiveXObject('Microsoft.XMLHTTP') :
      new XMLHttpRequest;

  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      request.onreadystatechange = doNothing;
      callback(request, request.status);
    }
  };

  request.open('GET', url, true);
  request.send(null);
}

function doNothing() {}

正在使用此文件创建 XML 文件:

    $map = "fW2sxnzi";

// Start XML file, create parent node

$dom = new DOMDocument("1.0");
$node = $dom->createElement("markers");
$parnode = $dom->appendChild($node);

// Opens a connection to a MySQL server

$connection=mysql_connect ('localhost', $username, $password);
if (!$connection) {  die('Not connected : ' . mysql_error());}

// Set the active MySQL database

$db_selected = mysql_select_db($database, $connection);
if (!$db_selected) {
  die ('Can\'t use db : ' . mysql_error());
}

// Select all the rows in the markers table

$query = "SELECT * FROM places WHERE map_id = '$map'";
$result = mysql_query($query);
if (!$result) {
  die('Invalid query: ' . mysql_error());
}

header("Content-type: text/xml");

// Iterate through the rows, adding XML nodes for each

while ($row = @mysql_fetch_assoc($result)){
  // ADD TO XML DOCUMENT NODE
  $node = $dom->createElement("marker");
  $newnode = $parnode->appendChild($node);
  $newnode->setAttribute("name",$row['name']);
  $newnode->setAttribute("address", $row['address']);
  $newnode->setAttribute("lat", $row['lat']);
  $newnode->setAttribute("lng", $row['lng']);
  $newnode->setAttribute("type", $row['type']);
}

echo $dom->saveXML();

我正在从数据库中提取标记及其详细信息，并希望通过“类型”(1、2、3 或 4)来切换它们。

Answer 1

所以，这是在 Ext Js 中，但我想你会明白的。

我创建了一个全局数组:

  var fireDeptMarkers = [];

然后我添加了一个复选框，但同样适用于按钮或切换:

{
        xtype: 'checkbox',
        fieldLabel: 'Fire Departments',
        itemId: 'fireDepartments',
        labelWidth: 200,
        width: 300
    },

我使用 MVC 模型，所以这是它的 Controller 。我没有内联执行它，而是使用它来调用 Controller 中的函数:

  '#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);
        }
    }
},