admin管理员组

文章数量:1329825

I have a windows form that contains a webbrowser control. This web browser displays a google map defined in javascript. This script also contains other methods that for some reason stopped working on the webbrowser control two days ago. One particular methd is drawing a red circle on the map on a click event. The mouse drag to move across the map also does not function. When the script is run on Internet Explorer or Chrome, it works fine. N.B. Most of the code is from examples from the Google Maps API website.

I call the script using:

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

Following is the script:

<!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=".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>

I have a windows form that contains a webbrowser control. This web browser displays a google map defined in javascript. This script also contains other methods that for some reason stopped working on the webbrowser control two days ago. One particular methd is drawing a red circle on the map on a click event. The mouse drag to move across the map also does not function. When the script is run on Internet Explorer or Chrome, it works fine. N.B. Most of the code is from examples from the Google Maps API website.

I call the script using:

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

Following is the script:

<!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./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>

Many posts said that the problem might be the webbrowser control default IE version but its not. My webbrowser version is 11.

To recap: few days ago the script worked perfectly with the webbrowser control. Now it doesn't. I didn't perform any updates since then. It works well with chrome and IE. Any help?

  • javascript
  • c#
  • google-maps
Share Improve this question asked Feb 19, 2015 at 10:47 BlueBlue 132 silver badges4 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 7

I have solved the problem by adding the following meta tag in a header section. <meta http-equiv="X-UA-Compatible" content="IE=edge">

This solution can be found at: https://social.msdn.microsoft./Forums/vstudio/en-US/6996b0c5-b44d-4040-9dbe-6206b1d9185e/webbrowser-script-error-when-using-google-maps?forum=wpf

本文标签： C webbrowser controlgoogle map javascript problemsStack Overflow

版权声明：本文标题：C# webbrowser control - google map javascript problems - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742225412a2436222.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。