2017-10-03 1 views
-3

Ich möchte, wenn Marker zur Karte dann zeigen, zeigen mir Wegpunkt, wenn ich zweite Marker auf der Karte hier ist mein Code für meine benutzerdefinierte Marker, habe ich versuchte Google Entwickler Weg, aber das hat nicht funktioniert für mich. was soll ich machen ? i verwendet, um diesen Post individuellen Marker: enter link description hereZeige Wegpunkt zwischen zwei Marker

<script> 
 
     var map; 
 
     function initAutocomplete() { 
 
     map = new google.maps.Map(document.getElementById('map'), { 
 
      center: {lat: 28.969820, lng: 50.842526}, 
 
      zoom: 15, 
 
      disableDefaultUI: true, 
 
     });var currentId = 0; 
 
     </script>

+0

Es gibt keine Markierungen in geposteten Code, noch Gibt es irgendwelche Wegpunkte – geocodezip

Antwort

0

hier ist mein gesamte Code:

<script> 
 
     var map; 
 
     function initAutocomplete() { 
 
     map = new google.maps.Map(document.getElementById('map'), { 
 
      center: {lat: 28.969820, lng: 50.842526}, 
 
      zoom: 15, 
 
      disableDefaultUI: true, 
 
     });var currentId = 0; 
 
      
 
     function initialize() { 
 

 

 

 

 

 

 

 

 

 

 

 
// Create the search box and link it to the UI element. 
 
     var input = document.getElementById('pac-input'); 
 
     var searchBox = new google.maps.places.SearchBox(input); 
 
     map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); 
 

 
     // Bias the SearchBox results towards current map's viewport. 
 
     map.addListener('bounds_changed', function() { 
 
      searchBox.setBounds(map.getBounds()); 
 
     }); 
 

 
     var markers = []; 
 
     // Listen for the event fired when the user selects a prediction and retrieve 
 
     // more details for that place. 
 
     searchBox.addListener('places_changed', function() { 
 
      var places = searchBox.getPlaces(); 
 

 
      if (places.length == 0) { 
 
      return; 
 
      } 
 

 
      // Clear out the old markers. 
 
      markers.forEach(function(marker) { 
 
      marker.setMap(null); 
 
      }); 
 
      markers = []; 
 

 
      // For each place, get the icon, name and location. 
 
      var bounds = new google.maps.LatLngBounds(); 
 
      places.forEach(function(place) { 
 
      if (!place.geometry) { 
 
       console.log("Returned place contains no geometry"); 
 
       return; 
 
      } 
 
      var 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(25, 25) 
 
      }; 
 

 
      // Create a marker for each place. 
 
      markers.push(new google.maps.Marker({ 
 
       map: map, 
 
       icon: icon, 
 
       title: place.name, 
 
       position: place.geometry.location 
 
      })); 
 

 
      if (place.geometry.viewport) { 
 
       // Only geocodes have viewport. 
 
       bounds.union(place.geometry.viewport); 
 
      } else { 
 
       bounds.extend(place.geometry.location); 
 
      } 
 
      }); 
 
      map.fitBounds(bounds); 
 
     }); 
 

 

 
var input = document.getElementById('pac-input'); 
 
var autocomplete = new google.maps.places.Autocomplete(input); 
 
} 
 
      
 
google.maps.event.addDomListener(window, 'load', initialize); 
 
var myOptions = { 
 
    zoom: 15, 
 
    disableDefaultUI: true, 
 
    center: new google.maps.LatLng(28.969820, 50.842526), 
 
    mapTypeId: 'roadmap' 
 
}; 
 
      
 
map = new google.maps.Map($('#map')[0], myOptions); 
 

 
/** 
 
* Global marker object that holds all markers. 
 
* @type {Object.<string, google.maps.LatLng>} 
 
*/ 
 
var markers = {}; 
 

 
/** 
 
* Concatenates given lat and lng with an underscore and returns it. 
 
* This id will be used as a key of marker to cache the marker in markers object. 
 
* @param {!number} lat Latitude. 
 
* @param {!number} lng Longitude. 
 
* @return {string} Concatenated marker id. 
 
*/ 
 
var getMarkerUniqueId= function(lat, lng) { 
 
    return lat + '_' + lng; 
 
} 
 

 
/** 
 
* Creates an instance of google.maps.LatLng by given lat and lng values and returns it. 
 
* This function can be useful for getting new coordinates quickly. 
 
* @param {!number} lat Latitude. 
 
* @param {!number} lng Longitude. 
 
* @return {google.maps.LatLng} An instance of google.maps.LatLng object 
 
*/ 
 
var getLatLng = function(lat, lng) { 
 
    return new google.maps.LatLng(lat, lng); 
 
}; 
 

 
/** 
 
* Binds click event to given map and invokes a callback that appends a new marker to clicked location. 
 
*/ 
 
var addMarker = google.maps.event.addListener(map, 'click', function(e) { 
 
    var lat = e.latLng.lat(); // lat of clicked point 
 
    var lng = e.latLng.lng(); // lng of clicked point 
 
    var markerId = getMarkerUniqueId(lat, lng); // an that will be used to cache this marker in markers object. 
 
    var marker = new google.maps.Marker({ 
 
     position: getLatLng(lat, lng), 
 
     map: map, 
 
     animation: google.maps.Animation.DROP, 
 
     id: 'marker_' + markerId 
 
    }); 
 
    markers[markerId] = marker; // cache marker in markers object 
 
    bindMarkerEvents(marker); // bind right click event to marker 
 
}); 
 

 
/** 
 
* Binds right click event to given marker and invokes a callback function that will remove the marker from map. 
 
* @param {!google.maps.Marker} marker A google.maps.Marker instance that the handler will binded. 
 
*/ 
 
var bindMarkerEvents = function(marker) { 
 
    google.maps.event.addListener(marker, "rightclick", function (point) { 
 
     var markerId = getMarkerUniqueId(point.latLng.lat(), point.latLng.lng()); // get marker id by using clicked point's coordinate 
 
     var marker = markers[markerId]; // find marker 
 
     removeMarker(marker, markerId); // remove it 
 
    }); 
 
}; 
 

 
/** 
 
* Removes given marker from map. 
 
* @param {!google.maps.Marker} marker A google.maps.Marker instance that will be removed. 
 
* @param {!string} markerId Id of marker. 
 
*/ 
 
var removeMarker = function(marker, markerId) { 
 
    marker.setMap(null); // set markers setMap to null to remove it from map 
 
    delete markers[markerId]; // delete marker instance from markers object 
 
}; 
 

 
      
 
     } 
 
     
 
    </script>

Verwandte Themen