向 Google 地圖添加自定義標記
[英]adding custom marker to Google Maps
問題描述
我已經嘗試了一段時間來為谷歌地圖框架添加自定義標記。 自定義和標准標記都不會顯示。
我正在使用以下代碼：
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)};
地圖本身顯示良好並且一切正常，只有標記不顯示。
2 個解決方案
解決方案1
1 已采納 2016-03-25 13:59:23
您正在設置map: map在創建地圖之前在標記上設置map: map 。 只需移動var map = new google.maps.Map(document.getElementById('map'), mapOptions); 在var image = ...之前它應該可以工作。
小提琴： https : //jsfiddle.net/uj13t71y/
解決方案2
0 2017-02-25 08:15:05
嗯，我自己創建了簡單的自定義標記
您可以點擊地圖查看結果
它將創建具有良好 WIFI 效果的新標記，如下所示
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 Maps標記
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.