Google Maps根据xml值更改标记颜色 [英] Google maps change marker color based on xml value

查看：62
本文介绍了Google Maps根据xml值更改标记颜色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

基于本教程代码段(带有PNG图标): 

  function initMap(){var map = new google.maps.Map(document.getElementById('map')，{中心:新的google.maps.LatLng(-33.863276，151.207977)，变焦:12});var infoWindow = new google.maps.InfoWindow;//解析本地XML字符串，而不是使用XmlHttpRequestvar 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 =名称infowincontent.appendChild(strong);infowincontent.appendChild(document.createElement('br'));var text = document.createElement('text');text.textContent =地址infowincontent.appendChild(text);var marker = new google.maps.Marker({地图:位置:点，图标:"http://maps.google.com/mapfiles/ms/micons/" +颜色+".png"，});marker.addListener('click'，function(){infoWindow.setContent(infowincontent);infoWindow.open(地图，标记);});});}//将XML字符串解析为XML DOM的函数函数parseXml(str){如果(window.ActiveXObject){var doc = new ActiveXObject('MicrosoftXMLDOM');doc.loadXML(str);返回文件；}否则，如果(window.DOMParser){返回(新的DOMParser).parseFromString(str，'text/xml');}};//XML数据作为字符串var xmlStr ='<?xml version ="1.0" encoding ="ISO-8859-1"?>< markers>< marker id ="1" lng ="151.171936" lat =-33.861034" address =新南威尔士州罗泽尔市达令街580号" name ="Love.Fish" color ="green"/><标记id ="2" lng ="151.174469" lat =-33.898113" address ="76 Wilford Street，新南威尔士州新镇"name =" Young Henrys"color =" green"/><标记id =" 3"lng =" 151.207474"lat ="-33.840282"address =" Greenwood Plaza，36 Blue St，North Sydney NSW"name =" Hunter Gatherer"color ="黄色"/><标记id =" 4"lng =" 151.194168"lat ="-33.910751"address =" 7A，2 Huntley Street，Alexandria，NSW"name ="灌装棚"color =" yellow"/gt;<标记id =" 5"lng =" 151.210449"lat ="-33.879917"address =" 16 Foster Street，Surry Hills，NSW"name =" Nomad"color =橙色"/><标记id ="6" lng ="151.263763" lat =-33.906357" address ="43 Macpherson Street，Bronte，NSW" name =三只蓝鸭子" 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"/><标记id =" 8"lng =" 151.215530"lat ="-33.874737"address =" 60赖利街，达令赫斯特，新南威尔士州"name ="红色灯笼"color =" orange"/></markers>';  

  html，身体，#地图 {高度:100％;边距:0;填充:0;}  

 < div id ="map"></div><！-用您自己的API密钥替换key参数的值.-><脚本异步延迟src ="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>

2b.(SVG图标)根据MrUpsidown的建议，您可以使用SVG图标.一种选择是我对这个问题的回答中使用的路径:

**代码段(带有SVG图标):

  function initMap(){var map = new google.maps.Map(document.getElementById('map')，{中心:新的google.maps.LatLng(-33.863276，151.207977)，变焦:12});var infoWindow = new google.maps.InfoWindow;//解析本地XML字符串，而不是使用XmlHttpRequestvar 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 =名称infowincontent.appendChild(strong);infowincontent.appendChild(document.createElement('br'));var text = document.createElement('text');text.textContent =地址infowincontent.appendChild(text);var marker = new google.maps.Marker({地图:位置:点，图标:pinSymbol(颜色)，});marker.addListener('click'，function(){infoWindow.setContent(infowincontent);infoWindow.open(地图，标记);});});}//将XML字符串解析为XML DOM的函数函数parseXml(str){如果(window.ActiveXObject){var doc = new ActiveXObject('MicrosoftXMLDOM');doc.loadXML(str);返回文件；}否则，如果(window.DOMParser){返回(新的DOMParser).parseFromString(str，'text/xml');}};函数pinSymbol(color){返回 {路径:'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:颜色，fillOpacity:1，strokeColor:#000"，重量:2，规模:1};}//XML数据作为字符串var xmlStr ='<?xml version ="1.0" encoding ="ISO-8859-1"?>< markers>< marker id ="1" lng ="151.171936" lat =-33.861034" address =新南威尔士州罗泽尔市达令街580号" name ="Love.Fish" color ="green"/><标记id ="2" lng ="151.174469" lat =-33.898113" address ="76 Wilford Street，新南威尔士州新镇"name =" Young Henrys"color =" green"/><标记id =" 3"lng =" 151.207474"lat ="-33.840282"address =" Greenwood Plaza，36 Blue St，North Sydney NSW"name =" Hunter Gatherer"color ="黄色"/><标记id =" 4"lng =" 151.194168"lat ="-33.910751"address =" 7A，2 Huntley Street，Alexandria，NSW"name ="灌装棚"color =" yellow"/gt;<标记id =" 5"lng =" 151.210449"lat ="-33.879917"address =" 16 Foster Street，Surry Hills，NSW"name =" Nomad"color =橙色"/><标记id ="6" lng ="151.263763" lat =-33.906357" address ="43 Macpherson Street，Bronte，NSW" name =三只蓝鸭子" color ="orange"/><标记id ="7" lng ="151.209656" lat =-33.881123" address ="60-64 Reservoir Street，Surry Hills，NSW"name =" Single Origin Roasters"color =" orange"/><标记id =" 8"lng =" 151.215530"lat ="-33.874737"address =" 60赖利街，达令赫斯特，新南威尔士州"name ="红色灯笼"color =" orange"/></markers>';  

  html，身体，#地图 {高度:100％;边距:0;填充:0;}  

 < div id ="map"></div><！-用您自己的API密钥替换key参数的值.-><脚本异步延迟src ="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>

Based on this tutorial https://developers.google.com/maps/documentation/javascript/mysql-to-maps about markers using a mysql database.

I have the following response:

<?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>

As you can see, I added the color value.

I want the markers on the map to have the color from the response file. How can it be done using the tutorial example?

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() {}

解决方案

To use the "color" attribute in your XML, you need to parse it out and use it in the definition of the marker icons.

  1. Parse the "color" attribute out of the XML:

var color = markerElem.getAttribute('color');

2a. (png icons) Use that value to define the icons for the markers (requires access to different colored icons, Google has some at "http://maps.google.com/mapfiles/ms/micons/"+color+".png", for a limited set of colors.

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

proof of concept fiddle

code snippet (with PNG icons):

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 icons) Per MrUpsidown's suggestion, you can use SVG icons. One option is the path used in my answer to this question: change google map marker color to a color of my choice:

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

where pinSymbol is (from the above referenced answer):

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
    };
}

proof of concept fiddle

**code snippet (with SVG icons):

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>

这篇关于Google Maps根据xml值更改标记颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆