Question

我正在从事个人项目。我在bootstrap中有一个表单。在表单中，用户可以单击按钮并查看谷歌地图并选择商店。

除了点击信息窗口中的“选择商店”链接外，一切运作良好。

以下是指向它的链接： https://codepen.io/brettdavis4/pen/wraNJV

我尝试了两种不同的方式，但我没有运气。

当我以这种方式尝试时，当我点击地图时没有任何反应：

timesincelastcheck = Now
For i = 1 to 99999999999
If Now - timesincelastcheck >= TimeValue("0:00:04") Then
    DoEvents
    timesincelastcheck = Now
End If
 'humongous code here
Next i

我以这种方式尝试时遇到错误：

var contentString2 = stores[i].name + '<br/><a href="#" class="mapclick" data-value="test">Select Store</a>';

这是我收到的错误：

var contentString2 = stores[i].name + '<br/><a href="#" onclick="selectstore("test");">Select Store</a>';

有人可以看一下笔并指出我正确的方向吗？

Uncaught SyntaxError: Unexpected token }

$('#btnClosestBB').click(function(event) {
  event.preventDefault();
  $('#myModal').modal('show');
});

$('#myModal').on("shown.bs.modal", initialize);

var address = document.getElementById('address').value + ', ' + document.getElementById('city').value + ', ' + document.getElementById('state').value + ' ' + document.getElementById('zip').value;

var stores = [{
    name: 'Greenwood Best Buy',
    phone: '317-555-1000',
    long: -86.119458,
    lat: 39.629789,
    id: 1
  },
  {
    name: 'Eastside Best Buy',
    phone: '317-555-1000',
    long: -85.992033,
    lat: 39.773182,
    id: 2
  },
  {
    name: 'Castleton Best Buy',
    phone: '317-555-1000',
    long: -86.069270,
    lat: 39.906005,
    id: 3
  },
  {
    name: 'Carmel Best Buy',
    phone: '317-555-1000',
    long: -86.230302,
    lat: 39.934572,
    id: 4
  },
  {
    name: 'North Carmel Best Buy',
    phone: '317-555-1000',
    long: -86.129277,
    lat: 40.000897,
    id: 5
  },
  {
    name: 'Avon Best Buy',
    phone: '317-555-1000',
    long: -86.339541,
    lat: 39.764612,
    id: 6
  },
  {
    name: 'Lafayette Rd. Best Buy',
    phone: '317-555-1000',
    long: -86.245499,
    lat: 39.839805,
    id: 7
  }
];


function showResult(result) {
  document.getElementById('latitude').value = result.geometry.location.lat();
  document.getElementById('longitude').value = result.geometry.location.lng();
}

function getLatitudeLongitude(callback, address) {
  // Initialize the Geocoder
  geocoder = new google.maps.Geocoder();
  if (geocoder) {
    geocoder.geocode({
      'address': address
    }, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        callback(results[0]);
      }
    });
  }
}

function initialize() {
  var center = new google.maps.LatLng(document.getElementById('latitude').value, document.getElementById('longitude').value);

  var map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom: 12,
    center: center
  });

  var contentString = document.getElementById('name').value,
    infowindow = new google.maps.InfoWindow({
      content: contentString
    }),
    marker = new google.maps.Marker({
      position: center,
      map: map,
      icon: 'https://maps.google.com/mapfiles/ms/icons/green-dot.png'
    });
  marker.addListener('click', function() {
    infowindow.open(map, marker);
  });
  infowindow.open(map, marker);

  for (var i = 0; i < stores.length; i++) {
    //var contentString2 = stores[i].name + '<br/><a href="#" class="mapclick" data-value="test">Select Store</a>';
    var contentString2 = stores[i].name + '<br/><a href="#" onclick="selectstore("test");">Select Store</a>';
    infowindow2 = new google.maps.InfoWindow({
        content: contentString2
      }),
      marker2 = new google.maps.Marker({
        position: new google.maps.LatLng(stores[i].lat, stores[i].long),
        map: map,
        icon: 'https://maps.google.com/mapfiles/ms/icons/red-dot.png'
      });
    infowindow2.open(map, marker2);
  }
}

$('a.mapclick').on('click', function(event) {
  event.preventDefault();
  alert('test');
});

function selectstore(name) {
  console.log(name);
}

//convert address to lat/long
getLatitudeLongitude(showResult, address);

#latitude {
  display: none;
}

#longitude {
  display: none;
}

.row {
  margin-top: 15px
}

@media (min-width: 992px) .modal-lg {
  width: 1000px;
}

.modal-body {
  height: 400px;
}

#map-canvas {
  width: 100%;
  height: 100%;
}

.gm-style-iw+div {
  display: none;
}

Answer 1

问题是您在双引号中包含双引号。当你有嵌套引号时，你需要替换单引号和双引号，再加上escape（引号前的反斜杠）

替换

var contentString2 = stores[i].name + '<br/><a href="#" onclick="selectstore("test");">Select Store</a>';

带

var contentString2 = stores[i].name + '<br/><a href="#" onclick="selectstore(\'test\');">Select Store</a>';

如何在Google地图中向onowindow添加onclick事件？

1 个答案: