Question

我设法通过javascript自定义谷歌地图的颜色，但我的图例和标记不会出现。我并不太担心这个传说，我主要关注的是我的标记出现了。我试过放一个定制的标记。为什么我的标记不出现？这是正确的尺寸，具有透明度。请帮忙！

 <script type="text/javascript">

    window.onload = function () {

  }


function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(32.817323, -96.788059),
        zoom: 16,
        mapTypeId: google.maps.MapTypeId.map
    };
    var map = new google.maps.Map(document.getElementById("map"), mapOptions);

    var point = new google.maps.LatLng(32.817323, -96.788059);
    var marker = new google.maps.Marker({
        position: point,
        map: map,
        title: "Commercial Ideas"
    });
}


        var latlng = new google.maps.LatLng(32.817323, -96.788059);



        var styles = [

            {

                featureType: "landscape",

                stylers: [

                    { color: '#ffffff' }

                ]


            },{
                featureType: 'road',
elementType: 'geometry',
stylers: [
  { color: '#d90000' },
  { weight: .1 }
]
},{
                featureType: "natural",

                stylers: [

                    { hue: '#ff0000' }
                ]

            },{

                featureType: "road",

                stylers: [

                    { hue: '#610000' },

                    { saturation: -60 }
               ]
}, {
featureType: 'road',
elementType: 'labels',
stylers: [
  { saturation: -50 },
]

            },{

                featureType: "building",

                elementType: "labels",

                stylers: [

                    { hue: '#FC7067' }

                ]

            },{

                featureType: "poi", //points of interest

                stylers: [

                    { hue: '#d90000' }

                ]

            }


        ];

        var myOptions = {

            zoom: 14,

            center: latlng,

            mapTypeId: google.maps.MapTypeId.ROADMAP,

            disableDefaultUI: true,

            styles: styles

        };



        map = new google.maps.Map(document.getElementById('map'), myOptions);
    }
   var iconBase = 'images/assets/icons/';
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: iconBase + 'mapmarker.png',
shadow: iconBase + 'mapmarkershadow.png'
});
</script>

我把这个网址联系起来了。我找错了吗？地图显示出来。

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>

正文中的HTML如下：

<div id="map"></div>

地图ID的CSS样式如下：

 #map {

        width: 100%;
        height: 600px;
        margin-bottom:15px;

    }

Answer 1

自定义标记没有出现，假设图像的URL正确并且图像实际存在，因为myLatLng未定义，应该从javascript控制台中报告的错误中显而易见。

改变这个：

var marker = new google.maps.Marker({
  position: myLatLng,
  map: map,
  icon: iconBase + 'mapmarker.png',
  shadow: iconBase + 'mapmarkershadow.png'
});

对此：

var marker = new google.maps.Marker({
  position: latlng,
  map: map,
  icon: iconBase + 'mapmarker.png',
  shadow: iconBase + 'mapmarkershadow.png'
});

Answer 2

不确定为什么这两个都在那里

    var marker = new google.maps.Marker({
    position: point,
    map: map,
    title: "Commercial Ideas"

和

    var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    icon: iconBase + 'mapmarker.png',
    shadow: iconBase + 'mapmarkershadow.png'

我试过这个并且它有效：

<script type="text/javascript">
function init() {
  var myLatlng = new google.maps.LatLng(32.817323, -96.788059);
  var myOptions = {zoom: 16,center: myLatlng,mapTypeId: google.maps.MapTypeId.ROADMAP,styles: [

        {

            featureType: "landscape",

            stylers: [

                { color: '#ffffff' }

            ]


        },{
            featureType: 'road',
elementType: 'geometry',
stylers: [
{ color: '#d90000' },
{ weight: .1 }
]
},{
            featureType: "natural",

            stylers: [

                { hue: '#ff0000' }
            ]

        },{

            featureType: "road",

            stylers: [

                { hue: '#610000' },

                { saturation: -60 }
           ]
}, {
featureType: 'road',
elementType: 'labels',
stylers: [
{ saturation: -50 },
]

        },{

            featureType: "building",

            elementType: "labels",

            stylers: [

                { hue: '#FC7067' }

            ]

        },{

            featureType: "poi", //points of interest

            stylers: [

                { hue: '#d90000' }

            ]

        }


    ]};
  var map = new google.maps.Map(document.getElementById('map'), myOptions);
  var contentString = '<div class="addresspopup">'+
  '<p>Commercial Ideas</p>'+
  '</div>';
  var markerimage = 'mapmarker.png';
  var infowindow = new google.maps.InfoWindow({content: contentString, maxWidth: 350});
  var marker = new google.maps.Marker({icon: markerimage, animation:     google.maps.Animation.DROP,position: myLatlng,map: map,title: 'Commercial Ideas'});
  google.maps.event.addListener(marker, 'click', function(){infowindow.open(map,marker);});
}

  google.maps.event.addDomListener(window, 'load', init);
</script>

这也假设'mapmarker.png'与你的html页面在同一个目录中。

Answer 3

您需要在定义市场对象后立即调用marker.setMap（map）。

完整版：

var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    icon: iconBase + 'mapmarker.png',
    shadow: iconBase + 'mapmarkershadow.png'
});

marker.setMap(map);

谷歌地图标记在自定义地图上丢失

3 个答案: