Question

我已经尝试了一段时间来获取谷歌地图框架的自定义标记。自定义和标准标记都不会显示。

我使用以下代码：

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,
	title: 'Hello World',
    icon: image
  });
	 

	 var map = new google.maps.Map(document.getElementById('map'), mapOptions)};

地图本身显示正常，效果很好，只有标记不显示。

Answer 1

您在创建地图之前在标记上设置了map: map。只需在var map = new google.maps.Map(document.getElementById('map'), mapOptions);之前移动var image = ...即可。

小提琴：https://jsfiddle.net/uj13t71y/

Answer 2

嗯，我自己创造了简单的自定义标记
您可以点击地图检查结果它将创建具有良好WIFI效果的新标记，如此

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

＆＃13;

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

＆＃13;

<!DOCTYPE HTML>
<html>
<head>

<title>Google Maps API</title>

<style type="text/css">

#map {
	width: 1000px;
	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) {
				cen = results[0].geometry.location;
				
			try{
			var myStyles =[
			
       {
         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" }
         ]
       }
     
];
				map = new google.maps.Map(document.getElementById('map'), {
				  zoom: 15,
				  center: cen,
				  mapTypeId: google.maps.MapTypeId.ROADMAP,
				   streetViewControl: false, styles: myStyles 
			
				});	
				}catch(e){alert(e)}
				var marker = new google.maps.Marker({
				  position: cen,
				  map: map,
				  title: 'Hello World!'
				});
				/*
var cityCircle = new google.maps.Circle({
            strokeColor: '#FF0000',
            strokeOpacity: 0.8,
            strokeWeight: 0,
            fillColor: '#FF0000',
            fillOpacity: 0.35,
            map: map,
            center: cen,
            radius: 2
          });*/
				
				map.addListener('click', function(e) {
					var line = new google.maps.Polyline({
					  path: [cen, e.latLng],
					  geodesic: true,
					  strokeColor: 'blue',
					  strokeOpacity: 0.6,
					  strokeWeight: 1,
					  map: map
					});
					overlay = new CustomMarker(
						e.latLng, 
						map,
						{
							marker_id: '123'
						}
					);
				});
				
				map.addListener('rightclick', function(e) {
				if(cur_node) {
					var line = new google.maps.Polyline({
					  path: [cur_node, e.latLng],
					  geodesic: true,
					  strokeColor: 'blue',
					  strokeOpacity: 0.6,
					  strokeWeight: 1,
					  map: map
					});
					overlay = new CustomMarker(
						e.latLng, 
						map,
						{
							marker_id: '123'
						}
					);
				}
				});
		});
	

	
	
}

google.maps.event.addDomListener(window, 'load', initialize);

</script>

</head>
<body>

	<div id="map">
	</div>
Hope it helps!
</body>
</html>

＆＃13;

将自定义标记添加到Google地图

2 个答案: