Google地图:根据按钮的值标记位置

时间:2018-06-09 15:53:44

标签: php laravel google-maps

美好的一天, 我担心将标记图标添加到我的谷歌地图,因此每次用户点击该位置。标记将放置在该位置本身。

我在这里有插图 Add Mark Icon

这是我的点击功能代码

$('button#addresses').click(function(){



      var address_href = $(this).val();
      var commaPos = address_href.indexOf(',');
      var coordinatesLat = parseFloat(address_href.substring(0, commaPos));
      var coordinatesLong = parseFloat(address_href.substring(commaPos + 1, address_href.length));

      var centerPoint = new google.maps.LatLng(coordinatesLat, coordinatesLong);

      map.setCenter(centerPoint);





    })

因此,如果用户点击地址,Google地图会自动更改位置。

这是谷歌地图默认功能的代码

       var map;
    function initMap() {
      var myHome = { "lat" : "53.628301" , "long" : "-113.408736" };
      map = new google.maps.Map(document.getElementById('map'), {

        zoom: 16,

        center: new google.maps.LatLng(myHome.lat, myHome.long),
        mapTypeId: 'roadmap'
      });

      var geocoder = new google.maps.Geocoder();

        document.getElementById('submit').addEventListener('click', function() {
        geocodeAddress(geocoder, map);
      });

      var infowindow = new google.maps.InfoWindow();
      var service = new google.maps.places.PlacesService(map)
      function geocodeAddress(geocoder, resultsMap) {
        var address = document.getElementById('address').value;
        geocoder.geocode({'address': address}, function(results, status) {
          if (status === 'OK') {
            resultsMap.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({
              map: resultsMap,
              position: results[0].geometry.location,
              icon: '{{ asset('assets/googlemap-marker-hiflyer.png') }}'
            });
              google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent('<div><strong>' + place.name + '</strong><br>' +
              'Place ID: ' + place.place_id + '<br>' +
              place.formatted_address + '</div>');
            infowidnow.open(map, this);
          });
          } else {
            alert('Fill the blank');
          }
        });
      }

      var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';


    var features = [

      {
        position: new google.maps.LatLng(53.628301, -113.408736),
        type: 'info'
      },

    ];

    // Create markers.
    features.forEach(function(feature) {
      var marker = new google.maps.Marker({
        position: feature.position,
        icon: '{{ asset('assets/googlemap-marker-hiflyer.png') }}',
        map: map
      });
    });
  }

所以问题是如果用户点击该位置,如何设置标记。

谢谢你们。我希望它能解决我的问题。

0 个答案:

没有答案