Question

我正在开发一个项目，用户可以填写表单来提供SQL数据库，然后我会在地图上渲染输入。

我已经完成了表单和数据库部分以及大部分地图。基于Google Maps API的文档，我已经能够使用我的数据库的点来渲染地图，因此我知道＆＃34;读取数据库的PHP脚本＆＃34;是正确的。

现在我面临的问题是，当我尝试在我的其他脚本（地理定位，地图样式）中集成代码片段（来自数据库的输出）时，它不再起作用（地图）正在显示，但不是数据库中的点，而如果我从那里尝试html示例https://developers.google.com/maps/articles/phpsqlajax_v3#custom-icons，我可以看到我的数据库中的点。

<!-- 3) Map creation -->
        <script>

            var map;
              function initialize() {
                var mapOptions = {
                  zoom: 17,
                  styles: [{"stylers":[{"hue":"#16a085"},{"saturation":0}]},{"featureType":"road","elementType":"geometry","stylers":[{"lightness":100},{"visibility":"simplified"}]},{"featureType":"road","elementType":"labels","stylers":[{"visibility":"off"}]}]
                };
                map = new google.maps.Map(document.getElementById('googlemaps'),
                    mapOptions);

              // Try HTML5 geolocation
              if(navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(position) {
                  var pos = new google.maps.LatLng(position.coords.latitude,
                                                   position.coords.longitude);

                  var contentString = '<div id="infowindow">Vous êtes ici :-)</div>'

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

                  map.setCenter(pos);
                  map.setZoom(17);
                }, function() {
                  handleNoGeolocation(true);
                });

                // PHP file to render the data from sql
                  downloadUrl("phpsqlajax_genxml.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,
                        icon: icon.icon
                      });
                      bindInfoWindow(marker, map, infoWindow, html);
                    }
                });
                } 

                else {
                // Browser doesn't support Geolocation
                handleNoGeolocation(false);
                }
                }

                function handleNoGeolocation(errorFlag) {
                  if (errorFlag) {
                    var content = 'Error: The Geolocation service failed.';
                  } else {
                    var content = 'Error: Your browser doesn\'t support geolocation.';
                  }

                  var options = {
                    map: map,
                    position: new google.maps.LatLng(60, 105),
                    content: content
                  };

                  var infowindow = new google.maps.InfoWindow(options);
                  map.setCenter(options.position);
                }

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


                google.maps.event.addDomListener(window, 'load', initialize);
        </script>

你能告诉我我的剧本出了什么问题吗？

非常感谢你的帮助

Answer 1

我发布了代码Uncaught ReferenceError: customIcons is not defined

的javascript错误

如果您不需要自定义图标，请删除依赖于它们的代码：

 // var icon = customIcons[type] || {};
 var marker = new google.maps.Marker({
   map: map,
   position: point,
   // icon: icon.icon
 });

javascript错误：Uncaught ReferenceError: infoWindow is not defined

Javascript区分大小写，infoWindow和infowindow是不同的东西，您没有定义传递给bindInfoWindow的调用的infoWindow变量。

bindInfoWindow(marker, map, infoWindow, html);

应该是：

bindInfoWindow(marker, map, infowindow, html);

proof of concept fiddle

代码段

 var map;

 function initialize() {
   var mapOptions = {
     zoom: 17,
     styles: [{
       "stylers": [{
         "hue": "#16a085"
       }, {
         "saturation": 0
       }]
     }, {
       "featureType": "road",
       "elementType": "geometry",
       "stylers": [{
         "lightness": 100
       }, {
         "visibility": "simplified"
       }]
     }, {
       "featureType": "road",
       "elementType": "labels",
       "stylers": [{
         "visibility": "off"
       }]
     }]
   };
   map = new google.maps.Map(document.getElementById('googlemaps'),
     mapOptions);

   // Try HTML5 geolocation
   /* if (navigator.geolocation) {
     navigator.geolocation.getCurrentPosition(function(position) {
       var pos = new google.maps.LatLng(position.coords.latitude,
         position.coords.longitude);
*/
   var pos = new google.maps.LatLng(42, -72);
   var contentString = '<div id="infowindow">Vous êtes ici :-)</div>'

   var infowindow = new google.maps.InfoWindow({
     map: map,
     position: pos,
     content: contentString
   });

   map.setCenter(pos);
   map.setZoom(2);
   /*}, function() {
     handleNoGeolocation(true);
   }); */

   // PHP file to render the data from sql
   // downloadUrl("phpsqlajax_genxml.php", function(data) {
   var xml = parseXml(xmlData); // 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,
       // icon: icon.icon
     });
     bindInfoWindow(marker, map, infowindow, html);
   }
   // });
   /*    } else {
        // Browser doesn't support Geolocation
        handleNoGeolocation(false);
      }
      */
 }

 var xmlData = '<markers><marker name="Pan Africa Market" address="1521 1st Ave, Seattle, WA" lat="47.608940" lng="-122.340141" type="restaurant" /><marker name="Buddha Thai &amp; Bar" address="2222 2nd Ave, Seattle, WA" lat="47.613590" lng="-122.344391" type="bar" /><marker name="The Melting Pot" address="14 Mercer St, Seattle, WA" lat="47.624561" lng="-122.356445" type="restaurant" /><marker name="Ipanema Grill" address="1225 1st Ave, Seattle, WA" lat="47.606365" lng="-122.337654" type="restaurant" /><marker name="Sake House" address="2230 1st Ave, Seattle, WA" lat="47.612823" lng="-122.345673" type="bar" /><marker name="Crab Pot" address="1301 Alaskan Way, Seattle, WA" lat="47.605961" lng="-122.340363" type="restaurant" /><marker name="Mama&amp;apos;s Mexican Kitchen" address="2234 2nd Ave, Seattle, WA" lat="47.613976" lng="-122.345467" type="bar" /><marker name="Wingdome" address="1416 E Olive Way, Seattle, WA" lat="47.617214" lng="-122.326584" type="bar" /><marker name="Piroshky Piroshky" address="1908 Pike pl, Seattle, WA" lat="47.610126" lng="-122.342834" type="restaurant" /></markers>';

 function handleNoGeolocation(errorFlag) {
   if (errorFlag) {
     var content = 'Error: The Geolocation service failed.';
   } else {
     var content = 'Error: Your browser doesn\'t support geolocation.';
   }

   var options = {
     map: map,
     position: new google.maps.LatLng(60, 105),
     content: content
   };

   var infowindow = new google.maps.InfoWindow(options);
   map.setCenter(options.position);
 }

 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() {}

 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');
   }
 };

 google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#googlemaps {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="googlemaps"></div>

GoogleMaps API + SQL数据库+渲染点PHP

1 个答案: