-1

我正在实现从标记周围的一组坐标中显示形状。这是我的 html 和 js 代码，但似乎无法正常工作，我错过了其中的一些内容。请帮我解决这个问题。

以及如何从同一个 XML 文件中获取以下坐标并创建数组以绘制形状并使其居中。

 var myLatLng = new google.maps.LatLng(17.74033553, 83.25067267);

     var triangleCoords = [
              new google.maps.LatLng(17.74033553, 83.25067267),
              new google.maps.LatLng(17.73254774, 83.29195094),
              new google.maps.LatLng(17.73995296, 83.25317370),
              new google.maps.LatLng(17.73985100, 83.25417283),

                new google.maps.LatLng(17.73420624, 83.29552820),
                  new google.maps.LatLng(17.74752536, 83.24668705)
          ];

html代码：

 <html xmlns="http://www.w3.org/1999/xhtml">
        <head runat="server">
            <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
            <script type="text/javascript" src="/en/js/jquery-1.4.1.min.js"></script>
            <script type="text/javascript" src="/en/js/markers.js">
              </script>
            <title></title>
        </head>
        <body>
            <form id="form1" runat="server">
            <div id="map">
            </div>
            <input type="button" id="showmarkers" value="Show Markers" />
            </form>
        </body>
        </html>

用于显示标记和形状的 js 代码。

  $(document).ready(function () {
            $("#map").css({
                height: 500,
                width: 600
            });
            var myLatLng = new google.maps.LatLng(17.74033553, 83.25067267);
            MYMAP.init('#map', myLatLng, 11);

            $("#showmarkers").click(function (e) {
                MYMAP.placeMarkers('markers.xml');
            });
        });

        var MYMAP = {
            map: null,
            bounds: null
        }

        MYMAP.init = function (selector, latLng, zoom) {
            var myOptions = {
                zoom: zoom,
                center: latLng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            this.map = new google.maps.Map($(selector)[0], myOptions);
            this.bounds = new google.maps.LatLngBounds();
        }

        MYMAP.placeMarkers = function (filename) {
            $.get(filename, function (xml) {
                $(xml).find("marker").each(function () {
                    var name = $(this).find('name').text();
                    var address = $(this).find('address').text();

                    // create a new LatLng point for the marker
                    var lat = $(this).find('lat').text();
                    var lng = $(this).find('lng').text();
                    var point = new google.maps.LatLng(parseFloat(lat), parseFloat(lng));

                    // extend the bounds to include the new point
                    MYMAP.bounds.extend(point);
                    var triangleCoords = [
              new google.maps.LatLng(17.74033553, 83.25067267),
              new google.maps.LatLng(17.73254774, 83.29195094),
              new google.maps.LatLng(17.73995296, 83.25317370),
              new google.maps.LatLng(17.73985100, 83.25417283),

                new google.maps.LatLng(17.73420624, 83.29552820),
                  new google.maps.LatLng(17.74752536, 83.24668705)
          ];



                    // Construct the polygon
                    bermudaTriangle = new google.maps.Polygon({
                        paths: triangleCoords,
                        strokeColor: '#FF0000',
                        strokeOpacity: 0.8,
                        strokeWeight: 2,
                        fillColor: '#FF0000',
                        fillOpacity: 0.35
                    });


                    bermudaTriangle.setMap(map);
                    var marker = new google.maps.Marker({
                        position: point,
                        map: MYMAP.map
                    });

                    var infoWindow = new google.maps.InfoWindow();
                    var html = '<strong>' + name + '</strong.><br />' + address;
                    google.maps.event.addListener(marker, 'click', function () {
                        infoWindow.setContent(html);
                        infoWindow.open(MYMAP.map, marker);
                    });
                    MYMAP.map.fitBounds(MYMAP.bounds);
                });
            });
        }

XML 文件

 <markers>
        <marker>
        <name>VODAFONE</name>
        <address>near Ghumaghumalu Restaurant, Marripalem, Visakhapatnam</address>
        <lat>17.74033553</lat>
        <lng>83.25067267</lng>
        </marker>

        <marker>
        <name>VODAFONE</name>
        <address>near Viswa Teja School, Thatichetlapalem, Visakhapatnam</address>
        <lat>17.73254774</lat>
        <lng>83.29195094</lng>
        </marker>

        <marker>
        <name>VODAFONE</name>
        <address>near Masjid, Marripalem, Visakhapatnam</address>
        <lat>17.73995296</lat>
        <lng>83.25317370</lng>
        </marker>

        <marker>
        <name>VODAFONE</name>
        <address>near Masjid, Sai Nagar, Visakhapatnam</address>
        <lat>17.73985100</lat>
        <lng>83.25417283</lng>
        </marker>

        <marker>
        <name>VODAFONE</name>
        <address>near Sai Baba Temple, Akkayya Palem, Visakhapatnam</address>
        <lat>17.73420624</lat>
        <lng>83.29552820</lng>
        </marker>

        <marker>
        <name>VODAFONE</name>
        <address>near Geological Survey of India, R &amp; B, Visakhapatnam</address>
        <lat>17.74752536</lat>
        <lng>83.24668705</lng>
        </marker>



        </markers>

------------ 下面是只显示标记的工作 js 代码，但上面的 js 文件是显示标记和多边形形状。

$(document).ready(function() {
  $("#map").css({
        height: 500,
        width: 600
    });
    var myLatLng = new google.maps.LatLng(17.74033553, 83.25067267);
  MYMAP.init('#map', myLatLng, 11);

  $("#showmarkers").click(function(e){
        MYMAP.placeMarkers('markers.xml');
  });
});

var MYMAP = {
  map: null,
    bounds: null
}

MYMAP.init = function(selector, latLng, zoom) {
  var myOptions = {
    zoom:zoom,
    center: latLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  this.map = new google.maps.Map($(selector)[0], myOptions);
    this.bounds = new google.maps.LatLngBounds();
}

MYMAP.placeMarkers = function(filename) {
    $.get(filename, function(xml){
        $(xml).find("marker").each(function(){
            var name = $(this).find('name').text();
            var address = $(this).find('address').text();

            // create a new LatLng point for the marker
            var lat = $(this).find('lat').text();
            var lng = $(this).find('lng').text();
            var point = new google.maps.LatLng(parseFloat(lat),parseFloat(lng));

            // extend the bounds to include the new point
            MYMAP.bounds.extend(point);

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

            var infoWindow = new google.maps.InfoWindow();
            var html='<strong>'+name+'</strong.><br />'+address;
            google.maps.event.addListener(marker, 'click', function() {
                infoWindow.setContent(html);
                infoWindow.open(MYMAP.map, marker);
            });
            MYMAP.map.fitBounds(MYMAP.bounds);
        });
    });
}
4

1 回答 1

0

错误发生在这里：

bermudaTriangle.setMap(map);

变量映射未在某处定义，因此浏览器使用（如果可用）ID 为“映射”的元素作为map-variable（不幸的是，大多数浏览器确实实现了 IE 引入的这种不良行为）。结果是一个错误，因为setMap期望作为参数 a google.maps.Map-instance，而不是 a DOMNode。

该行应该是：

bermudaTriangle.setMap(MYMAP.map);

....您的脚本将起作用。

于 2013-08-22T09:51:31.490 回答