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

-2

我一直在尝试一段时间以获取自定义标记到Google地图框架。自定义和标准标记都不会显示。将自定义标记添加到Google地图

我使用下面的代码：

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

地图本身表明了罚款和工作都很好，只是标记不显示。

来源

2016-03-25 Jordy Senssen

您的图标不公开：http：//aandegrens.appartdev.nl/wp-content/uploads/2016/03/Google_Maps.png（要求输入密码） – geocodezip

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

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

来源

2016-03-25 13:59:23 aidangarza

仍未设置标记 –

这是它的一个小提琴工作。您的自定义图片存在授权问题。 https://jsfiddle.net/uj13t71y/ – aidangarza

啊，我明白了。现在工作！谢谢！ –

严正通过我自己的简单的自定义标记
创建您可以通过点击进入地图
这将创造新的标志，像这样

不错的WIFI影响检查结果我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>

来源

2017-02-25 08:15:05

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

回答

相关问题