0

案子：

我正在Google Map使用V3 API并让用户在使用该autocomplete功能的输入字段中键入一些起点和终点。

如果用户键入原点，则会创建一个标记并将其放置在地图中。地图居中并缩放到该标记。

如果用户还键入了目的地，则会放置一个新标记，但使用该fitBounds()方法调整地图以显示两个标记。此外，polyline绘制 a 以“连接”两个标记。

如果用户键入新的起点或终点，标记和折线会随之更新。

用户是否开始输入目的地或起点并不重要，因为代码以“两种方式”工作。

问题：

如果我输入国家、地区或城市，我的代码似乎可以正常工作，但如果我输入其他内容，它就会失败。诸如地方（建筑物、商店、景点……）、街道……标记已正确放置，但地图未相应缩放，折线未绘制。

控制台显示没有错误。

如果我使用城市、地区或国家/地区更新起点或目的地，地图将按预期工作，并且折线正确显示，即使其他元素是街道或地点也是如此。

代码：

 $(document).ready(function () {


   // Create an array of styles.
   var styles = [{
     "featureType": "administrative",
     "elementType": "all",
     "stylers": [{
       "visibility": "on"
     }, {
       "lightness": 33
     }]
   }, {
     "featureType": "landscape",
     "elementType": "all",
     "stylers": [{
       "color": "#f2e5d4"
     }]
   }, {
     "featureType": "poi.park",
     "elementType": "geometry",
     "stylers": [{
       "color": "#c5dac6"
     }]
   }, {
     "featureType": "poi.park",
     "elementType": "labels",
     "stylers": [{
       "visibility": "on"
     }, {
       "lightness": 20
     }]
   }, {
     "featureType": "road",
     "elementType": "all",
     "stylers": [{
       "lightness": 20
     }]
   }, {
     "featureType": "road.highway",
     "elementType": "geometry",
     "stylers": [{
       "color": "#c5c6c6"
     }]
   }, {
     "featureType": "road.arterial",
     "elementType": "geometry",
     "stylers": [{
       "color": "#e4d7c6"
     }]
   }, {
     "featureType": "road.local",
     "elementType": "geometry",
     "stylers": [{
       "color": "#fbfaf7"
     }]
   }, {
     "featureType": "water",
     "elementType": "all",
     "stylers": [{
       "visibility": "on"
     }, {
       "color": "#acbcc9"
     }]
   }];

   // 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 lat = 40.8688,
     lng = 17.2195,
     latlng = new google.maps.LatLng(lat, lng)

   var mapOptions = {
       center: new google.maps.LatLng(lat, lng),
       zoom: 3,
       mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style'],
       disableDefaultUI: true
     },
     map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions)

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

   //First autocomplete
   var input = /** @type {!HTMLInputElement} */ (
     document.getElementById('searchTextField1'));


   var autocomplete = new google.maps.places.Autocomplete(input);
   autocomplete.bindTo('bounds', map);

   var marker = new google.maps.Marker({
     map: map,
     anchorPoint: new google.maps.Point(0, -29)
   });

   autocomplete.addListener('place_changed', function () {
     marker.setVisible(false);
     place = autocomplete.getPlace();
     if (!place.geometry) {
       window.alert("Autocomplete's returned place contains no geometry");
       return;
     }

     // If the place has a geometry, then present it on a map.
     if (typeof place2 !== "undefined" && place.geometry.viewport) {
       var bounds = new google.maps.LatLngBounds();
       bounds.extend(place.geometry.location);
       bounds.extend(place2.geometry.location);
       map.fitBounds(bounds);
       pano_lat = place.geometry.location.lat();
       pano_lng = place.geometry.location.lng();
       getPanoramio(pano_lat, pano_lng);
       route();
     } else {
       map.setCenter(place.geometry.location);
       map.setZoom(17); // Why 17? Because it looks good.
       pano_lat = place.geometry.location.lat();
       pano_lng = place.geometry.location.lng();
       getPanoramio(pano_lat, pano_lng);
     }
     marker.setIcon( /** @type {google.maps.Icon} */ ({
       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(35, 35)
     }));
     marker.setPosition(place.geometry.location);
     marker.setVisible(true);

   });


   //Second autocomplete
   var input2 = /** @type {!HTMLInputElement} */ (
     document.getElementById('searchTextField2'));


   var autocomplete2 = new google.maps.places.Autocomplete(input2);
   autocomplete2.bindTo('bounds', map);

   var marker2 = new google.maps.Marker({
     map: map,
     anchorPoint2: new google.maps.Point(0, -29)
   });

   autocomplete2.addListener('place_changed', function () {
     marker2.setVisible(false);
     place2 = autocomplete2.getPlace();
     if (!place2.geometry) {
       window.alert("Autocomplete's returned place contains no geometry");
       return;
     }

     // If the place has a geometry, then present it on a map.
     if (typeof place !== "undefined" && place2.geometry.viewport) {
       var bounds = new google.maps.LatLngBounds();
       bounds.extend(place2.geometry.location);
       bounds.extend(place.geometry.location);
       map.fitBounds(bounds);
       pano_lat = place2.geometry.location.lat();
       pano_lng = place2.geometry.location.lng();
       getPanoramio(pano_lat, pano_lng);
       route();
     } else {
       map.setCenter(place2.geometry.location);
       map.setZoom(17); // Why 17? Because it looks good.
       pano_lat = place2.geometry.location.lat();
       pano_lng = place2.geometry.location.lng();
       getPanoramio(pano_lat, pano_lng);
     }
     marker2.setIcon( /** @type {google.maps.Icon} */ ({
       url: place2.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(35, 35)
     }));
     marker2.setPosition(place2.geometry.location);
     marker2.setVisible(true);


   });

   function route() {
     var flightPlanCoordinates = [{
       lat: place.geometry.location.lat(),
       lng: place.geometry.location.lng()
     }, {
       lat: place2.geometry.location.lat(),
       lng: place2.geometry.location.lng()
     }];
     if (typeof flightPath !== "undefined") {
       flightPath.setPath(flightPlanCoordinates);
     } else {
       var lineSymbol = {
         path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
       };
       flightPath = new google.maps.Polyline({
         path: flightPlanCoordinates,
         strokeColor: "#FF0000",
         strokeOpacity: 1.0,
         strokeWeight: 2,
         icons: [{
           icon: lineSymbol,
           offset: '25%'
         }, {
           icon: lineSymbol,
           offset: '50%'
         }, {
           icon: lineSymbol,
           offset: '75%'
         }],
       });
       flightPath.setMap(map);
     }
   }

   function getPanoramio(a, b) {
     console.log(a);
     console.log(b);
     $.ajax({
       url: 'http://www.panoramio.com/map/get_panoramas.php?set=public&from=0&to=20&minx=' + (b - 0.005) + '&miny=' + (a - 0.005) + '&maxx=' + (b + 0.005) + '&maxy=' + (a + 0.005) + '&size=original&mapfilter=true',
       dataType: 'jsonp',
       success: function (dataWeGotViaJsonp) {
         imgFondo = dataWeGotViaJsonp.photos[0].photo_file_url;
         $("#fondo_form").css("background-image", "url(" + imgFondo + ")");
       }
     });
   }

 });

演示：

您可以在这个jsfiddle中重现这种罕见的行为

有效的示例输入数据：

  • 慕尼黑
  • 巴伐利亚
  • 德国
  • 曼哈顿
  • 纽约

不起作用的示例输入数据：

  • 莱赫尔，慕尼黑，德国
  • 纽约市第五大道...
  • 泰姬陵，阿格拉...
  • 希思罗机场
  • Zara Home，摄政街...
4

0 回答 0