Hinzufügen von benutzerdefinierten Marker zu Google Maps

-2

Ich habe seit einiger Zeit versucht, einen benutzerdefinierten Marker zu einem Google Maps-Frame zu bekommen. Sowohl benutzerdefinierte als auch Standardmarkierungen werden nicht angezeigt.Hinzufügen von benutzerdefinierten Marker zu Google Maps

Ich verwende den folgenden Code ein:

google.maps.event.addDomListener(window, 'load', init); 
 

 
var map; 
 

 

 
function init() { 
 
    var mapOptions = { 
 
     center: new google.maps.LatLng(51.231245, 6.078348), 
 
     zoom: 10, 
 
     zoomControl: true, 
 
     zoomControlOptions: { 
 
      style: google.maps.ZoomControlStyle.DEFAULT, 
 
     }, 
 
     disableDoubleClickZoom: true, 
 
     mapTypeControl: true, 
 
     mapTypeControlOptions: { 
 
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, 
 
     }, 
 
     scaleControl: true, 
 
     scrollwheel: false, 
 
     streetViewControl: true, 
 
     draggable : true, 
 
     overviewMapControl: true, 
 
     overviewMapControlOptions: { 
 
      opened: true, 
 
     }, 
 

 
}  
 

 
var image = 'http://aandegrens.appartdev.nl/wp-content/uploads/2016/03/Google_Maps.png'; 
 
var myLatLng = {lat: 51.231245, lng: 6.078348}; 
 
    var marker = new google.maps.Marker({ 
 
    position: myLatLng, 
 
    map: map, 
 
\t title: 'Hello World', 
 
    icon: image 
 
    }); 
 
\t 
 

 
\t var map = new google.maps.Map(document.getElementById('map'), mapOptions)};

Die Karte selbst zeigt sich fein und funktioniert alles gut, nur die Markierung zeigt nicht.

Quelle

2016-03-25 Jordy Senssen

Ihr Icon ist nicht öffentlich verfügbar: http://aandegrens.appartdev.nl/wp-content/uploads/2016/03/Google_Maps.png (es fragt nach einem Passwort) – geocodezip

Sie setzen die map: map auf den Marker, bevor die Karte erstellt wurde. Bewegen Sie einfach var map = new google.maps.Map(document.getElementById('map'), mapOptions); vor var image = ... und es sollte funktionieren.

Geige: https://jsfiddle.net/uj13t71y/

Quelle

2016-03-25 13:59:23 aidangarza

Immer noch nicht die Markierung –

gesetzt Hier ist eine Geige damit arbeiten. Bei Ihrem benutzerdefinierten Bild ist ein Autorisierungsproblem aufgetreten. https://jsfiddle.net/uj13t71y/ – aidangarza

Ah, ich verstehe. Arbeitet jetzt! Vielen Dank! –

Uhm dich von mir selbst
die einfachen benutzerdefinierten Marker erstellt Sie das Ergebnis durch einen Klick in die Karte überprüfen
Es neuen Marker wie diese

mit schönem WIFI-Effekt schaffen

https://i.stack.imgur.com/eM43e.png

function CustomMarker(latlng, map, args) { 
 
\t this.latlng = latlng; \t 
 
\t this.args = args; \t 
 
\t this.setMap(map); \t 
 
} 
 

 
CustomMarker.prototype = new google.maps.OverlayView(); 
 
var cur_node; 
 
CustomMarker.prototype.draw = function() { 
 
\t 
 
\t var self = this; 
 
\t 
 
\t var div = this.div; 
 
\t 
 
\t if (!div) { 
 
\t 
 
\t \t div = this.div = document.createElement('div'); 
 
\t \t 
 
\t \t div.className = 'cd-single-point'; 
 
\t \t div.innerHTML = '<a class="cd-img-replace" title="MN1"></a>'; 
 
\t \t 
 
\t \t if (typeof(self.args.marker_id) !== 'undefined') { 
 
\t \t \t div.dataset.marker_id = self.args.marker_id; 
 
\t \t } 
 
\t \t var cur = this.getPosition(); 
 
\t \t var me = this; 
 
\t \t google.maps.event.addDomListener(div, "contextmenu", function(event) { 
 
\t \t \t //alert('You clicked on a custom marker!'); \t \t \t 
 
\t \t \t //google.maps.event.trigger(self, "click"); 
 
\t \t \t cur_node= cur; 
 
\t \t \t me.remove(); 
 
\t \t \t 
 
\t \t }); 
 
\t \t 
 
\t \t var panes = this.getPanes(); 
 
\t \t panes.overlayImage.appendChild(div); 
 
\t } 
 
\t 
 
\t var point = this.getProjection().fromLatLngToDivPixel(this.getPosition()); 
 
\t 
 
\t if (point) { 
 
\t \t div.style.left = (point.x-7) + 'px'; 
 
\t \t div.style.top = (point.y-7) + 'px'; 
 
\t } 
 
}; 
 

 
CustomMarker.prototype.remove = function() { 
 
\t if (this.div) { 
 
\t \t this.div.parentNode.removeChild(this.div); 
 
\t \t this.div = null; 
 
\t } \t 
 
}; 
 

 
CustomMarker.prototype.getPosition = function() { 
 
\t return this.latlng; \t 
 
};

<!DOCTYPE HTML> 
 
<html> 
 
<head> 
 

 
<title>Google Maps API</title> 
 

 
<style type="text/css"> 
 

 
#map { 
 
\t width: 1000px; 
 
\t height: 1000px; 
 
} 
 

 
.cd-single-point { 
 
    position: absolute; 
 
    list-style-type: none; 
 
    left: 20px; 
 
    top: 20px; 
 
} 
 

 
.cd-single-point>a { 
 
    position: relative; 
 
    z-index: 2; 
 
    display: block; 
 
    width: 15px; 
 
    height: 15px; 
 
    border-radius: 50%; 
 
    background: #0079ff; 
 
    -webkit-transition: background-color 0.2s; 
 
    -moz-transition: background-color 0.2s; 
 
    -o-transition: background-color 0.2s; 
 
    transition: background-color 0.2s; 
 
} 
 

 
.cd-single-point::after { 
 
    content: ''; 
 
    position: absolute; 
 
    border-radius: 50%; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    animation: cd-pulse 2s infinite; 
 
} 
 
    
 
@keyframes cd-pulse 
 
{ 
 
0% {box-shadow:0 0 0 0 #0079ff} 
 
100%{box-shadow:0 0 0 20px rgba(255,150,44,0)} 
 
} 
 

 

 
</style> 
 

 
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> 
 
<script type="text/javascript" src="CustomGoogleMapMarker.js"></script> 
 
<script type="text/javascript"> 
 
var map; 
 
var cen; 
 
function initialize() { 
 
var geocoder = new google.maps.Geocoder(); 
 
     geocoder.geocode({ 'address': 'Ha noi, Vietnam'}, function(results, status) { 
 
\t \t \t \t cen = results[0].geometry.location; 
 
\t \t \t \t 
 
\t \t \t try{ 
 
\t \t \t var myStyles =[ 
 
\t \t \t 
 
     { 
 
     featureType: "administrative", 
 
     elementType: "labels", 
 
     stylers: [ 
 
      { visibility: "off" } 
 
     ] 
 
     },{ 
 
     featureType: "poi", 
 
     elementType: "labels", 
 
     stylers: [ 
 
      { visibility: "off" } 
 
     ] 
 
     },{ 
 
     featureType: "water", 
 
     elementType: "labels", 
 
     stylers: [ 
 
      { visibility: "off" } 
 
     ] 
 
     },{ 
 
     featureType: "road", 
 
     elementType: "labels", 
 
     stylers: [ 
 
      { visibility: "off" } 
 
     ] 
 
     } 
 
     
 
]; 
 
\t \t \t \t map = new google.maps.Map(document.getElementById('map'), { 
 
\t \t \t \t zoom: 15, 
 
\t \t \t \t center: cen, 
 
\t \t \t \t mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
\t \t \t \t streetViewControl: false, styles: myStyles 
 
\t \t \t 
 
\t \t \t \t }); \t 
 
\t \t \t \t }catch(e){alert(e)} 
 
\t \t \t \t var marker = new google.maps.Marker({ 
 
\t \t \t \t position: cen, 
 
\t \t \t \t map: map, 
 
\t \t \t \t title: 'Hello World!' 
 
\t \t \t \t }); 
 
\t \t \t \t /* 
 
var cityCircle = new google.maps.Circle({ 
 
      strokeColor: '#FF0000', 
 
      strokeOpacity: 0.8, 
 
      strokeWeight: 0, 
 
      fillColor: '#FF0000', 
 
      fillOpacity: 0.35, 
 
      map: map, 
 
      center: cen, 
 
      radius: 2 
 
      });*/ 
 
\t \t \t \t 
 
\t \t \t \t map.addListener('click', function(e) { 
 
\t \t \t \t \t var line = new google.maps.Polyline({ 
 
\t \t \t \t \t path: [cen, e.latLng], 
 
\t \t \t \t \t geodesic: true, 
 
\t \t \t \t \t strokeColor: 'blue', 
 
\t \t \t \t \t strokeOpacity: 0.6, 
 
\t \t \t \t \t strokeWeight: 1, 
 
\t \t \t \t \t map: map 
 
\t \t \t \t \t }); 
 
\t \t \t \t \t overlay = new CustomMarker(
 
\t \t \t \t \t \t e.latLng, 
 
\t \t \t \t \t \t map, 
 
\t \t \t \t \t \t { 
 
\t \t \t \t \t \t \t marker_id: '123' 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t); 
 
\t \t \t \t }); 
 
\t \t \t \t 
 
\t \t \t \t map.addListener('rightclick', function(e) { 
 
\t \t \t \t if(cur_node) { 
 
\t \t \t \t \t var line = new google.maps.Polyline({ 
 
\t \t \t \t \t path: [cur_node, e.latLng], 
 
\t \t \t \t \t geodesic: true, 
 
\t \t \t \t \t strokeColor: 'blue', 
 
\t \t \t \t \t strokeOpacity: 0.6, 
 
\t \t \t \t \t strokeWeight: 1, 
 
\t \t \t \t \t map: map 
 
\t \t \t \t \t }); 
 
\t \t \t \t \t overlay = new CustomMarker(
 
\t \t \t \t \t \t e.latLng, 
 
\t \t \t \t \t \t map, 
 
\t \t \t \t \t \t { 
 
\t \t \t \t \t \t \t marker_id: '123' 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t); 
 
\t \t \t \t } 
 
\t \t \t \t }); 
 
\t \t }); 
 
\t 
 

 
\t 
 
\t 
 
} 
 

 
google.maps.event.addDomListener(window, 'load', initialize); 
 

 
</script> 
 

 
</head> 
 
<body> 
 

 
\t <div id="map"> 
 
\t </div> 
 
Hope it helps! 
 
</body> 
 
</html>

Quelle

2017-02-25 08:15:05

Hinzufügen von benutzerdefinierten Marker zu Google Maps

Antwort

Verwandte Themen