搜索
搜索

谷歌地图根据 xml 值更改标记颜色

Ricardo Mehr 发表于 Dev
27
里卡多·莫尔

基于本教程https://developers.google.com/maps/documentation/javascript/mysql-to-maps关于使用 mysql 数据库的标记。

我有以下回应：

<?xml version="1.0" encoding="ISO-8859-1"?>
<markers>
<marker id="1" lng="151.171936" lat="-33.861034" address="580 Darling Street, Rozelle, NSW" name="Love.Fish" color="green"/>
<marker id="2" lng="151.174469" lat="-33.898113" address="76 Wilford Street, Newtown, NSW" name="Young Henrys" color="green"/>
<marker id="3" lng="151.207474" lat="-33.840282" address="Greenwood Plaza, 36 Blue St, North Sydney NSW" name="Hunter Gatherer" color="yellow"/>
<marker id="4" lng="151.194168" lat="-33.910751" address="7A, 2 Huntley Street, Alexandria, NSW" name="The Potting Shed" color="yellow"/>
<marker id="5" lng="151.210449" lat="-33.879917" address="16 Foster Street, Surry Hills, NSW" name="Nomad" color="orange"/>
<marker id="6" lng="151.263763" lat="-33.906357" address="43 Macpherson Street, Bronte, NSW" name="Three Blue Ducks" color="orange"/>
<marker id="7" lng="151.209656" lat="-33.881123" address="60-64 Reservoir Street, Surry Hills, NSW" name="Single Origin Roasters" color="orange"/>
<marker id="8" lng="151.215530" lat="-33.874737" address="60 Riley Street, Darlinghurst, NSW" name="Red Lantern" color="orange"/>
</markers>

如您所见，我添加了颜色值。

我希望地图上的标记具有响应文件中的颜色。如何使用教程示例来完成？

function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          center: new google.maps.LatLng(-33.863276, 151.207977),
          zoom: 12
        });
        var infoWindow = new google.maps.InfoWindow;

          // Change this depending on the name of your PHP or XML file
          downloadUrl('https://storage.googleapis.com/mapsdevsite/json/mapmarkers2.xml', function(data) {
            var xml = data.responseXML;
            var markers = xml.documentElement.getElementsByTagName('marker');
            Array.prototype.forEach.call(markers, function(markerElem) {
              var id = markerElem.getAttribute('id');
              var name = markerElem.getAttribute('name');
              var address = markerElem.getAttribute('address');
              var type = markerElem.getAttribute('type');
              var point = new google.maps.LatLng(
                  parseFloat(markerElem.getAttribute('lat')),
                  parseFloat(markerElem.getAttribute('lng')));

              var infowincontent = document.createElement('div');
              var strong = document.createElement('strong');
              strong.textContent = name
              infowincontent.appendChild(strong);
              infowincontent.appendChild(document.createElement('br'));

              var text = document.createElement('text');
              text.textContent = address
              infowincontent.appendChild(text);
              var icon = customLabel[type] || {};
              var marker = new google.maps.Marker({
                map: map,
                position: point,
                label: icon.label,
              });
              marker.addListener('click', function() {
                infoWindow.setContent(infowincontent);
                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 中使用“颜色”属性，您需要解析它并在标记图标的定义中使用它。

  1. 解析 XML 中的“颜色”属性：
var color = markerElem.getAttribute('color');

2a. (png 图标) 使用该值来定义标记的图标（需要访问不同颜色的图标，Google 有一些 at "http://maps.google.com/mapfiles/ms/micons/"+color+".png"，用于有限的颜色集。

 var marker = new google.maps.Marker({
    map: map,
    position: point,
    icon: "http://maps.google.com/mapfiles/ms/micons/"+color+".png",
  });

概念证明小提琴

结果地图的屏幕截图 (PNG) 代码片段（带有 PNG 图标）：

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(-33.863276, 151.207977),
    zoom: 12
  });
  var infoWindow = new google.maps.InfoWindow;

  // parse local XML string, rather than using XmlHttpRequest
  var xml = parseXml(xmlStr);
  var markers = xml.documentElement.getElementsByTagName('marker');
  console.log("markers.length=" + markers.length);
  var bounds = new google.maps.LatLngBounds();
  Array.prototype.forEach.call(markers, function(markerElem) {
    var id = markerElem.getAttribute('id');
    var name = markerElem.getAttribute('name');
    var address = markerElem.getAttribute('address');
    var type = markerElem.getAttribute('type');
    var color = markerElem.getAttribute('color');
    var point = new google.maps.LatLng(
      parseFloat(markerElem.getAttribute('lat')),
      parseFloat(markerElem.getAttribute('lng')));
    bounds.extend(point);
    map.fitBounds(bounds);

    var infowincontent = document.createElement('div');
    var strong = document.createElement('strong');
    strong.textContent = name
    infowincontent.appendChild(strong);
    infowincontent.appendChild(document.createElement('br'));

    var text = document.createElement('text');
    text.textContent = address
    infowincontent.appendChild(text);
    var marker = new google.maps.Marker({
      map: map,
      position: point,
      icon: "http://maps.google.com/mapfiles/ms/micons/" + color + ".png",
    });
    marker.addListener('click', function() {
      infoWindow.setContent(infowincontent);
      infoWindow.open(map, marker);
    });
  });
}
// function to parse XML string to XML DOM
function parseXml(str) {
  if (window.ActiveXObject) {
    var doc = new ActiveXObject('MicrosoftXMLDOM');
    doc.loadXML(str);
    return doc;
  } else if (window.DOMParser) {
    return (new DOMParser).parseFromString(str, 'text/xml');
  }
};

// XML data as string
var xmlStr = '<?xml version="1.0" encoding="ISO-8859-1"?><markers><marker id="1" lng="151.171936" lat="-33.861034" address="580 Darling Street, Rozelle, NSW" name="Love.Fish" color="green"/><marker id="2" lng="151.174469" lat="-33.898113" address="76 Wilford Street, Newtown, NSW" name="Young Henrys" color="green"/><marker id="3" lng="151.207474" lat="-33.840282" address="Greenwood Plaza, 36 Blue St, North Sydney NSW" name="Hunter Gatherer" color="yellow"/><marker id="4" lng="151.194168" lat="-33.910751" address="7A, 2 Huntley Street, Alexandria, NSW" name="The Potting Shed" color="yellow"/><marker id="5" lng="151.210449" lat="-33.879917" address="16 Foster Street, Surry Hills, NSW" name="Nomad" color="orange"/><marker id="6" lng="151.263763" lat="-33.906357" address="43 Macpherson Street, Bronte, NSW" name="Three Blue Ducks" color="orange"/><marker id="7" lng="151.209656" lat="-33.881123" address="60-64 Reservoir Street, Surry Hills, NSW" name="Single Origin Roasters" color="orange"/><marker id="8" lng="151.215530" lat="-33.874737" address="60 Riley Street, Darlinghurst, NSW" name="Red Lantern" color="orange"/></markers>';
html,
body,
#map {
  height: 100%;
  margin: 0;
  padding: 0;
}
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>

2b. （SVG 图标）根据 MrUpsidown 的建议，您可以使用 SVG 图标。一个选项是我在回答这个问题时使用的路径：将谷歌地图标记颜色更改为我选择的颜色：

  var marker = new google.maps.Marker({
    map: map,
    position: point,
    icon: pinSymbol(color),
  });

在哪里pinSymbol（来自上面引用的答案）：

function pinSymbol(color) {
    return {
        path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',
        fillColor: color,
        fillOpacity: 1,
        strokeColor: '#000',
        strokeWeight: 2,
        scale: 1
    };
}

概念证明小提琴

结果地图（SVG）的屏幕截图

**代码片段（带有 SVG 图标）：

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(-33.863276, 151.207977),
    zoom: 12
  });
  var infoWindow = new google.maps.InfoWindow;

  // parse local XML string, rather than using XmlHttpRequest
  var xml = parseXml(xmlStr);
  var markers = xml.documentElement.getElementsByTagName('marker');
  console.log("markers.length=" + markers.length);
  var bounds = new google.maps.LatLngBounds();
  Array.prototype.forEach.call(markers, function(markerElem) {
    var id = markerElem.getAttribute('id');
    var name = markerElem.getAttribute('name');
    var address = markerElem.getAttribute('address');
    var type = markerElem.getAttribute('type');
    var color = markerElem.getAttribute('color');
    var point = new google.maps.LatLng(
      parseFloat(markerElem.getAttribute('lat')),
      parseFloat(markerElem.getAttribute('lng')));
    bounds.extend(point);
    map.fitBounds(bounds);

    var infowincontent = document.createElement('div');
    var strong = document.createElement('strong');
    strong.textContent = name
    infowincontent.appendChild(strong);
    infowincontent.appendChild(document.createElement('br'));

    var text = document.createElement('text');
    text.textContent = address
    infowincontent.appendChild(text);
    var marker = new google.maps.Marker({
      map: map,
      position: point,
      icon: pinSymbol(color),
    });
    marker.addListener('click', function() {
      infoWindow.setContent(infowincontent);
      infoWindow.open(map, marker);
    });
  });
}
// function to parse XML string to XML DOM
function parseXml(str) {
  if (window.ActiveXObject) {
    var doc = new ActiveXObject('MicrosoftXMLDOM');
    doc.loadXML(str);
    return doc;
  } else if (window.DOMParser) {
    return (new DOMParser).parseFromString(str, 'text/xml');
  }
};

function pinSymbol(color) {
  return {
    path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',
    fillColor: color,
    fillOpacity: 1,
    strokeColor: '#000',
    strokeWeight: 2,
    scale: 1
  };
}
// XML data as string
var xmlStr = '<?xml version="1.0" encoding="ISO-8859-1"?><markers><marker id="1" lng="151.171936" lat="-33.861034" address="580 Darling Street, Rozelle, NSW" name="Love.Fish" color="green"/><marker id="2" lng="151.174469" lat="-33.898113" address="76 Wilford Street, Newtown, NSW" name="Young Henrys" color="green"/><marker id="3" lng="151.207474" lat="-33.840282" address="Greenwood Plaza, 36 Blue St, North Sydney NSW" name="Hunter Gatherer" color="yellow"/><marker id="4" lng="151.194168" lat="-33.910751" address="7A, 2 Huntley Street, Alexandria, NSW" name="The Potting Shed" color="yellow"/><marker id="5" lng="151.210449" lat="-33.879917" address="16 Foster Street, Surry Hills, NSW" name="Nomad" color="orange"/><marker id="6" lng="151.263763" lat="-33.906357" address="43 Macpherson Street, Bronte, NSW" name="Three Blue Ducks" color="orange"/><marker id="7" lng="151.209656" lat="-33.881123" address="60-64 Reservoir Street, Surry Hills, NSW" name="Single Origin Roasters" color="orange"/><marker id="8" lng="151.215530" lat="-33.874737" address="60 Riley Street, Darlinghurst, NSW" name="Red Lantern" color="orange"/></markers>';
html,
body,
#map {
  height: 100%;
  margin: 0;
  padding: 0;
}
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

根据值更改跨度标记的颜色

根据值更改标记颜色 - Plotly

谷歌地图根据条件设置标记

如何在Android中根据谷歌地图不同的缩放级别调整谷歌地图标记的大小

更改谷歌地图 POIItem 标记

根据 html 表中的选择更改谷歌标记的颜色

如何更改谷歌地图的颜色

用户更改时如何根据 <select> 元素条目添加谷歌地图标记

根据行的值更改qplot的颜色

根据表中的值更改行颜色

根据列值更改行的颜色

根据提交的表格值更改表格颜色

根据布尔值更改边框颜色

角度4-根据值更改颜色

根据搜寻条值更改颜色

根据Google散点图的值更改点颜色

根据 td 的值更改 Td 的颜色

根据值更改圆形滑块颜色

根据值更改行颜色（行内）

根据布尔值更改按钮的颜色

根据阈值更改表格的颜色

如何根据值更改<td>元素的颜色

根据字符串值更改颜色

根据被过滤的值更改字体颜色angularjs

根据值更改变量的颜色

根据值更改 DataGridView 列的颜色

谷歌可视化气泡图根据值更改图例颜色

应用程序的AndroidManifest.xml中的元数据标记的值不正确。- 谷歌地图

更改谷歌地图的位置

TOP 榜单

  1. 1

    Linux的官方Adobe Flash存储库是否已过时？

  2. 2

    如何使用HttpClient的在使用SSL证书，无论多么“糟糕”是

  3. 3

    错误：“ javac”未被识别为内部或外部命令，

  4. 4

    Modbus Python施耐德PM5300

  5. 5

    为什么Object.hashCode（）不遵循Java代码约定

  6. 6

    如何正确比较 scala.xml 节点？

  7. 7

    在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

  8. 8

    在令牌内联程序集错误之前预期为 ')'

  9. 9

    数据表中有多个子行，asp.net核心中来自sql server的数据

  10. 10

    VBA 自动化错误：-2147221080 (800401a8)

  11. 11

    错误TS2365：运算符'！=='无法应用于类型'“（”'和'“）”'

  12. 12

    如何在JavaScript中获取数组的第n个元素？

  13. 13

    检查嵌套列表中的长度是否相同

  14. 14

    如何将sklearn.naive_bayes与（多个）分类功能一起使用？

  15. 15

    ValueError：尝试同时迭代两个列表时，解包的值太多（预期为 2）

  16. 16

    ES5的代理替代

  17. 17

    在同一Pushwoosh应用程序上Pushwoosh多个捆绑ID

  18. 18

    如何监视应用程序而不是单个进程的CPU使用率？

  19. 19

    如何检查字符串输入的格式

  20. 20

    解决类Koin的实例时出错

  21. 21

    如何自动选择正确的键盘布局？-仅具有一个键盘布局

热门标签

归档