Question

我正在实施从标记周围的坐标集显示形状。这是我的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>

-----------下面是仅显示标记的Working 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);
        });
    });
}

Answer 1

此处发生错误：

bermudaTriangle.setMap(map);

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

该行应该是：

bermudaTriangle.setMap(MYMAP.map);

....你的脚本会运作。

显示从坐标集到标记周围的多边形形状

1 个答案: