向 Google 地图添加自定义标记

Question

I have been trying for some time now to get a custom marker to a google maps frame.我已经尝试了一段时间来为谷歌地图框架添加自定义标记。 Both custom and standard markers won't show.自定义和标准标记都不会显示。

I am using the following code:我正在使用以下代码：

 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)};

The map itself shows up fine and works all good, only the marker doesn't show.地图本身显示良好并且一切正常，只有标记不显示。

Answer 1

You are setting the map: map on the marker before the map has been created.您正在设置map: map在创建地图之前在标记上设置map: map 。 Just move var map = new google.maps.Map(document.getElementById('map'), mapOptions);只需移动var map = new google.maps.Map(document.getElementById('map'), mapOptions); before var image = ... and it should work.在var image = ...之前它应该可以工作。

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

Answer 2

Uhm I created by my self the simple custom marker嗯，我自己创建了简单的自定义标记
You can check the result by clicking into the map您可以点击地图查看结果
It will create new marker with nice WIFI effect like this它将创建具有良好 WIFI 效果的新标记，如下所示

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

 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; };

 <!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>

向 Google 地图添加自定义标记

问题描述

2 个解决方案

解决方案1
1 已采纳 2016-03-25 13:59:23

解决方案2
0 2017-02-25 08:15:05

向 Google 地图添加自定义标记

问题描述

2 个解决方案

解决方案1 1 已采纳 2016-03-25 13:59:23

解决方案2 0 2017-02-25 08:15:05

解决方案1
1 已采纳 2016-03-25 13:59:23

解决方案2
0 2017-02-25 08:15:05