Question

我有一些关键问题：看起来有点复杂，如下所示。

我有自己的wordpress平台，在页面内嵌入了iFrame谷歌地图。并且地图有一些点，当用户点击时，它会在地图中显示一些气泡弹出窗口，显示一些细节。

现在我需要进行一些更改，以便当用户点击wordpress页面上的超链接时，它会触发地图中的气泡，（特定位置）弹出并显示详细信息。我怎样才能实现这一目标？

  <script type="text/javascript">
// Define your locations: HTML content for the info window, latitude, longitude
var locations = [['<div class="location"><a href="#" id="Singapore"><h4 style="margin-top:8px; margin-bottom: -8px !important; color:#334354">SINGAPORE (Head Office)</h4><p>168 Jalan Bukit Merah Surbana One,  <br/>    Singapore 150168. <br/><p style="margin-top:13px;">Tel : +65 6248 1288 <br/>Fax : +65 6273 9090<br/>Email : <a href="mailto:mails@surbana.com" target="_top">mails@surbana.com</p></p></a></div>',1.283261, 103.818849],

['上海（区域办事处）

上海市浦东新区张杨路620号中融恒瑞国际广场801号，上海200122 。
电话：+86 21 6881 0899
传真：+86 21 6881 0800

'，31.223363,121.527130]，

['沉阳

中国沉阳市和平区南京南街1A号欧亚连营商业大厦1503号，邮编：110001。
电话：+86 24 2289 2258

传真：+86 24 2289 2259

'，41.777994,123.403449]，

['仰光

Unit02-03联盟商业中心，位于缅甸仰光巴汉乡Bo Cho区Nat Mauk路。
电话：+95 18603376

'，16.801551,96.161014]，];

//设置不同的图标和阴影 var iconURLPrefix ='http://maps.google.com/mapfiles/ms/icons/';

var icons = [
  iconURLPrefix + 'red-dot.png',
  // iconURLPrefix + 'green-dot.png',
  // iconURLPrefix + 'blue-dot.png',
  // iconURLPrefix + 'orange-dot.png',
  // iconURLPrefix + 'purple-dot.png',
  // iconURLPrefix + 'pink-dot.png',      
  // iconURLPrefix + 'yellow-dot.png'
]
var icons_length = icons.length;


var shadow = {
  anchor: new google.maps.Point(15,33),
  url: iconURLPrefix + 'msmarker.shadow.png'
};

var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 10,
  center: new google.maps.LatLng(-37.92, 151.25),
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  mapTypeControl: false,
  streetViewControl: false,
  panControl: false,
  zoomControlOptions: {
     position: google.maps.ControlPosition.LEFT_BOTTOM
  }
});

var infowindow = new google.maps.InfoWindow({
  maxWidth: 400
});

var marker;
var markers = new Array();

var iconCounter = 0;

// Add the markers and infowindows to the map
for (var i = 0; i < locations.length; i++) {
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map,
    icon : icons[iconCounter],
    shadow: shadow
  });

  markers.push(marker);

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));


  iconCounter++;
  // We only have a limited number of possible icon colors, so we may have to restart the counter
  if(iconCounter >= icons_length){
    iconCounter = 0;
  }
}

function AutoCenter() {
  //  Create a new viewpoint bound
  var bounds = new google.maps.LatLngBounds();
  //  Go through each...
  $.each(markers, function (index, marker) {
    bounds.extend(marker.position);
  });
  //  Fit these bounds to the map
  map.fitBounds(bounds);
}
AutoCenter();

Answer 1

由于这些是不同的域，因此您必须使用Web消息传递（与跨文档消息传递相同）。

例如在发送窗口中：

var o = document.getElementsByTagName('map')[0];
o.contentWindow.postMessage('location xyz', 'http://example.com/');

并在iframe中：

function receiver(event) {
    if (event.origin == 'http://example.net') {
          //consume location
    }
}
window.addEventListener('message', receiver, false);

鼠标单击触发器操作

1 个答案: