繁体   English   中英

如何从点击服务点击标记打开弹出窗口?

[英]how to open popup on click of a marker from the directions service?

UPDATE
当我点击绿色标记时,它的位置显示地址。我可以更改吗?

后期编辑:
点击指示服务中的标记是否可以打开弹出窗口?
或者尝试其他方式,例如只隐藏路线服务中的标记(绿色标记)并仅显示红色标记(仅隐藏绿色标记而不是它的路线)?这是好方法吗?

如果不可能,请提出一些其他想法。

老年人:

我在谷歌地图上有两种类型的标记。红色标记是表示位置的正常标记。绿色标记是路径标记(它代表地图的许多路标)。
我用textbox.which修改infowindow,点击红色标记打开。

实际上我想做的是,首先我在谷歌地图上放置多个标记,然后我在这些标记之间绘制路线。这件事情已经完成。提醒事情是点击绿色标记打开一个弹出窗口,用户输入价格,然后单击按钮然后我得到了这个值并将其存储到数据库中。
问题是:

(1)如何点击绿色标记打开相同的信息窗口?
简而言之,如何在点击绿色标记时编写显示信息的代码。
如何找到绿色标记的点击事件?

在此输入图像描述

在此输入图像描述

code is:

    <script type="text/javascript">
      var markerarray=new Array(); 
      //for way points
      var waypts=[];
      //array in json format for placing multiple marker
      var locations = <?php echo json_encode($lat1);?>;

      var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 11,
          center: new google.maps.LatLng(23.0171240, 72.5330533),
          mapTypeId: google.maps.MapTypeId.ROADMAP
      });
      var infowindow = new google.maps.InfoWindow();


    <!--  *************  for placing markers  ************  -->

      var marker, i;
      for (i = 0; i < locations.length; i++) 
      { 
        marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][3], locations[i][4]), 
        map: map  //enable if you want marker
      });

      //push value into way points
      waypts.push({
                  location:locations[i][0],
                  stopover:true
      });

      //create array for polyline
      markerarray[i] = marker.getPosition();//(Array(locations[i][5], locations[i][6]));

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            var data='<div style="height:150px !important"><table><tr><td>Enter Price</td></tr><tr><td><input type="text" name="prc" id="prc" /></td></tr></table></div>';
            infowindow.setContent(data);
            infowindow.open(map, marker);
         }
        })(marker, i));
      } 


    <!--  **************    for route between markers   *******************  -->

        var first=locations[locations.length-1][0];
        var directionsDisplay;
        var directionsService = new google.maps.DirectionsService();
        //directionsDisplay = new google.maps.DirectionsRenderer();
        directionsDisplay = new google.maps.DirectionsRenderer({
            polylineOptions: {
              strokeColor: 'red',//"black",
              strokeOpacity: 1.0,
              strokeWeight: 3
            }
        });
        var start = locations[0][0];//"Bopal, Ahmedabad, Gujarat, India";
        var end = locations[locations.length-1][0];//"Nikol, Ahmedabad, Gujarat, India";

        //remove start destination from array
        waypts.shift();

        //remove end destination from array
        waypts.pop();

        var request = {
              origin:start,
              destination:end,
              waypoints:waypts,
              travelMode: google.maps.DirectionsTravelMode.DRIVING
        };
        directionsService.route(request, function(response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
              directionsDisplay.setDirections(response);
            }
        });
        directionsDisplay.setMap(map);
    </script>

提前致谢。

这不是不可能,但代码需要一些时间,方法是如果你正在使用移动设备,那么你需要从你的设备加速器和位置变化调用地理定位功能我认为你理解,第二种方法是纯粹的javascript你需要在集合中调用你的地理位置函数的方法Interval理解也可以单独从标记绘制线,你的标记函数只在设置的间隔内调用,以获取当前位置与infowindow。 例如:

var map;

function initialize() {
  var mapOptions = {
    zoom: 6,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
 //keep this in setInterval
  // Try HTML5 geolocation
  if(navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = new google.maps.LatLng(position.coords.latitude,
                                       position.coords.longitude);

      var infowindow = new google.maps.InfoWindow({
        map: map,
        position: pos,
        content: 'Location found using HTML5.'
      });

      map.setCenter(pos);
    }, function() {
      handleNoGeolocation(true);
    });
  } else {
    // Browser doesn't support Geolocation
    handleNoGeolocation(false);
  }
}

function handleNoGeolocation(errorFlag) {
  if (errorFlag) {
    var content = 'Error: The Geolocation service failed.';
  } else {
    var content = 'Error: Your browser doesn\'t support geolocation.';
  }

  var options = {
    map: map,
    position: new google.maps.LatLng(60, 105),
    content: content
  };

  var infowindow = new google.maps.InfoWindow(options);
  map.setCenter(options.position);
}
//close here your set interval
google.maps.event.addDomListener(window, 'load', initialize);

这是可能的。 您可以隐藏默认标记,以便可以在单击的位置上构建自定义标记。 此代码用于隐藏标记。

var rendererOptions = {
    suppressMarkers : true      
}
var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM