Question

我有一个包含webbrowser控件的Windows窗体。此Web浏览器显示在javascript中定义的Google地图。此脚本还包含其他方法，这些方法由于某种原因在两天前停止在webbrowser控件上工作。一个特殊的方法是在点击事件上在地图上绘制一个红色圆圈。鼠标拖动以在地图上移动也不起作用。当脚本在Internet Explorer或Chrome上运行时，它可以正常工作。注：大部分代码来自Google Maps API网站的示例。

我使用以下方法调用脚本：

webBrowser1.ScriptErrorsSuppressed = true; webBrowser1.DocumentText = Properties.Resources.sample;

以下是剧本：

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
      .controls {
        margin-top: 16px;
        border: 1px solid transparent;
        border-radius: 2px 0 0 2px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        height: 32px;
        outline: none;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
      }

      #pac-input {
        background-color: #fff;
        padding: 0 11px 0 13px;
        width: 200px;
		height:20px;
        font-family: Roboto;
        font-size: 15px;
        font-weight: 300;
        text-overflow: ellipsis;
      }

      #pac-input:focus {
        border-color: #4d90fe;
        margin-left: -1px;
        padding-left: 14px;  /* Regular padding-left + 1. */
        width: 401px;
      }

      .pac-container {
        font-family: Roboto;
      }

      #type-selector {
        color: #000;
        background-color: #4d90fe;
        padding: 5px 11px 0px 11px;
      }

      #type-selector label {
        font-family: Roboto;
        font-size: 13px;
        font-weight: 300;
      }

    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>
    <script>

var globalLatLng = '';
function initialize() {
	var mapOptions = {
    zoom: 4,
    center: new google.maps.LatLng(24.926204,48.052185),
	mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var markers = [];
  var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  

  // Create the search box and link it to the UI element.
  var input = /** @type {HTMLInputElement} */(
      document.getElementById('pac-input'));
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

  var searchBox = new google.maps.places.SearchBox(
    /** @type {HTMLInputElement} */(input));

  // [START region_getplaces]
  // Listen for the event fired when the user selects an item from the
  // pick list. Retrieve the matching places for that item.
  google.maps.event.addListener(searchBox, 'places_changed', function() {
    var places = searchBox.getPlaces();

    if (places.length == 0) {
      return;
    }
    for (var i = 0, marker; marker = markers[i]; i++) {
      marker.setMap(null);
    }

    // For each place, get the icon, place name, and location.
    markers = [];
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0, place; place = places[i]; i++) {
      var image = {
        url: place.icon,
        size: new google.maps.Size(71, 71),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(17, 34),
        scaledSize: new google.maps.Size(25, 25)
      };
      bounds.extend(place.geometry.location);
    }

    map.fitBounds(bounds);
  });
  // [END region_getplaces]

  // Bias the SearchBox results towards places that are within the bounds of the
  // current map's viewport.
  google.maps.event.addListener(map, 'bounds_changed', function() {
    var bounds = map.getBounds();
    searchBox.setBounds(bounds);
  });
  
  google.maps.event.addListener(map, 'click', function(e) {
	var lat = e.latLng.lat();
	var lng = e.latLng.lng();
	globalLatLng = globalLatLng + ',' + lat + ',' + lng;
    placeMarker(e.latLng, map);
  });
}
function placeMarker(position, map) {
  var populationOptions = {
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      map: map,
      center: new google.maps.LatLng(position.lat(), position.lng()), //new google.maps.LatLng(event.latLng.lat(), event.latLng.lng()),
      radius:15000
    };
	// Add the circle for this city to the map.
    cityCircle = new google.maps.Circle(populationOptions);
	showMessage();
}
function test() {//this function returns lats and longs as a string with separators
                return(globalLatLng);
            }
google.maps.event.addDomListener(window, 'load', initialize);

    </script>
    <style>
      #target {
        width: 345px;
      }
    </style>
  </head>
  <body>
    <input id="pac-input" class="controls" type="text" placeholder="Search Box">
    <div id="map-canvas"></div>
  </body>
</html>

＆＃13;

许多帖子都说问题可能是webbrowser控件默认的IE版本但不是。我的webbrowser版本是11。

回顾一下：几天前，该脚本与webbrowser控件完美配合。现在它没有。从那以后我没有进行任何更新。它适用于chrome和IE。有什么帮助吗？

Answer 1

我通过在标题部分添加以下元标记解决了这个问题。 <meta http-equiv="X-UA-Compatible" content="IE=edge">

此解决方案可在以下位置找到： https://social.msdn.microsoft.com/Forums/vstudio/en-US/6996b0c5-b44d-4040-9dbe-6206b1d9185e/webbrowser-script-error-when-using-google-maps?forum=wpf

C＃webbrowser控件 - 谷歌地图javascript问题

1 个答案: