0

我有一个自定义的谷歌地图，我已经添加了样式，它是一个带有动态标记的事件地图，我已经让地图工作在它加载所有动态标记和信息的地方，在我的页面上有地图下方的结果，我想要以便能够单击结果中的链接，这将打开地图上的相关信息窗口。我一直在使用本文中的 Raymond Camdens 演示，我无法让最后一部分与页面上的链接一起使用（我不得不取出脚本的地理编码部分，因为我不需要它来对地址进行地理编码，我正在使用坐标。）

这是我的代码：

var map;

var lastinfowindow;

function initialize() {


    // Create an array of styles.
  var styles = [
    {
      stylers: [
        { hue: "#0b9cc1" },
        { saturation: -20 }
      ]
    },{
      featureType: "road",
      elementType: "geometry",
      stylers: [
        { lightness: 100 },
        { visibility: "simplified" }
      ]
    },{
      featureType: "administrative.country",
      elementType: "labels",
      stylers: [
        { visibility: "on" }
      ]
    },

    { featureType: "water", 
     elementType: "geometry", 
    stylers: [ { visibility: "on" }, { lightness: -10 }] },
    { featureType: "poi", 
    stylers: [ { visibility: "on" } ] }

  ];

  // Create a new StyledMapType object, passing it the array of styles,
  // as well as the name to be displayed on the map type control.
  var styledMap = new google.maps.StyledMapType(styles,
    {name: "Styled Map"}); 





    var latlng = new google.maps.LatLng(38, -90);
    var mapOptions = {
        zoom: 3,
        center: latlng,
        mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
    };
    map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);

    var image = 'sp-mark.png';



   latLng = new google.maps.LatLng ('23.00593', '12.65287');
            var marker1 = new google.maps.Marker({
                map: map,
                position: LatLng,
                title: 'Event 1 - 38',
                icon:image
            });

            var infowindow = new google.maps.InfoWindow({
            content: "<h3 class=maph3>Event 1</h3><p>Location: here</p>"
            });

            google.maps.event.addListener(marker, 'click', function() {
             infowindow.open(map,marker);
            });

            marker.gigid = 38;
            marker.infowindow = infowindow;
            markers[markers.length] = marker;

   latLng = new google.maps.LatLng ('57.19173', '-1.7083');
            var marker2 = new google.maps.Marker({
                map: map,
                position: LatLng,
                title: 'Event 2 - 30',
                icon:image
            });

            var infowindow = new google.maps.InfoWindow({
            content: "<h3 class=maph3>Event 2</h3><p>Location: here</p>"
            });

            google.maps.event.addListener(marker, 'click', function() {
             infowindow.open(map,marker);
            });

            marker.gigid = 30;
            marker.infowindow = infowindow;
            markers[markers.length] = marker;

   latLng = new google.maps.LatLng ('56.98083', '1.30056');
            var marker3 = new google.maps.Marker({
                map: map,
                position: LatLng,
                title: 'Event 3 - 32',
                icon:image
            });

            var infowindow = new google.maps.InfoWindow({
            content: "<h3 class=maph3>Event 3</h3><p>Location: here, Ibiza</p>"
            });

            google.maps.event.addListener(marker, 'click', function() {
             infowindow.open(map,marker);
            });

            marker.gigid = 32;
            marker.infowindow = infowindow;
            markers[markers.length] = marker;

   latLng = new google.maps.LatLng ('58.96', '1.39861');
            var marker4 = new google.maps.Marker({
                map: map,
                position: LatLng,
                title: 'Event 4 - 41',
                icon:image
            });

            var infowindow = new google.maps.InfoWindow({
            content: "<h3 class=maph3>Event 4</h3><p>Location: here</p>"
            });

            google.maps.event.addListener(marker, 'click', function() {
             infowindow.open(map,marker);
            });

            marker.gigid = 41;
            marker.infowindow = infowindow;
            markers[markers.length] = marker;

   latLng = new google.maps.LatLng ('-43.92528', '28.42389');
            var marker5 = new google.maps.Marker({
                map: map,
                position: LatLng,
                title: 'Event 5 - 47',
                icon:image
            });

            var infowindow = new google.maps.InfoWindow({
            content: "<h3 class=maph3>Event 5</h3><p>Location: Here</p>"
            });

            google.maps.event.addListener(marker, 'click', function() {
             infowindow.open(map,marker);
            });

            marker.gigid = 47;
            marker.infowindow = infowindow;
            markers[markers.length] = marker;


    //Associate the styled map with the MapTypeId and set it to display.
     map.mapTypes.set('map_style', styledMap);
     map.setMapTypeId('map_style');

    $(".order").click(function() {
        var thisgig = $(this).data("gigid");
        for(var i=0; i<markers.length; i++) {
            if(markers[i].gigid == thisgig) {
                console.log("found my match");
                //get the latlong
                if(lastinfowindow instanceof google.maps.InfoWindow) lastinfowindow.close();
                console.dir(markers[i]);
                map.panTo(markers[i].getPosition());
                markers[i].infowindow.open(map, markers[i]);
                lastinfowindow = markers[i].infowindow;
            }
        }
    });



}

这是链接所在的正文部分： 

<body onload="initialize()">

<div id="map_canvas"></div>

<div id="orders">

    <p class="order" data-gigid="38">
    <b>Order 38</b><br/>
    Event 1
    </p>

    <p class="order" data-gigid="30">
    <b>Order 30</b><br/>
    Event 2
    </p>

    <p class="order" data-gigid="32">
    <b>Order 32</b><br/>
    Event 3
    </p>

    <p class="order" data-gigid="41">
    <b>Order 41</b><br/>
    Event 4
    </p>

    <p class="order" data-gigid="47">
    <b>Order 47</b><br/>
    Event 5
    </p>

</div>

</body>

请有人帮我解决这个问题。

谢谢

4

1 回答 1

0

如果您的页面中有任何 javascript 错误，Google 地图通常将无法加载。你有很多。

你在这里有一个语法错误：

var infowindow = new google.maps.InfoWindow({
            content: "<h3 class=maph3>Event 4</h3><p>Location: here</p>
            });

应该：

var infowindow = new google.maps.InfoWindow({
            content: "<h3 class=maph3>Event 4</h3><p>Location: here</p>"
            });

LatLng 需要两个浮点数，而不是两个字符串：

latLng = new google.maps.LatLng ('23.00593', '12.65287');

Javascript 区分大小写。所以当你说：

latLng = new google.maps.LatLng ('23.00593', '12.65287');
var marker1 = new google.maps.Marker({
                ...
                position: LatLng
            });

它无法识别LatLng，因为您的变量被称为latLng

这里的问题：

marker.gigid = 38;

是你没有一个叫做标记的变量；你有一个名为 marker1 的变量：

var marker1 = new google.maps.Marker({
                map: map,
                position: LatLng,
                title: 'Event 1 - 38',
                icon:image
            });

为了完整起见，以下是您的标记之一应该如何完成（有更好的方法，但这应该有效）： latLng = new google.maps.LatLng (23.00593,12.65287); var marker1 = new google.maps.Marker({ map: map, position: latLng , title: 'Event 1 - 38', icon:image });

        var infowindow = new google.maps.InfoWindow({
          content: "<h3 class=maph3>Event 1</h3><p>Location: here</p>"
        });

        google.maps.event.addListener(marker1, 'click', function() {
         infowindow.open(map,marker1);
        });

        marker1.gigid = 38;
        marker1.infowindow = infowindow;
        markers[markers.length] = marker1;
于 2012-07-24T16:53:01.250 回答