标记在谷歌地图中不可见

Question

我正在尝试显示带有标记和圆圈的谷歌地图。地图和圆圈显示正确，但标记在地图上不可见。

请建议我应该对我的代码进行哪些更改。

<div id="mapview" style="width: 100%; height: 700px;">
</div>
<script>
    var map;
    var info_window;
    function initialize() {
        var mapOptions = {
            zoom: 11,
            center: new google.maps.LatLng(51.561918, -0.31237799999996696),
            mapTypeId: google.maps.MapTypeId.ROADMAP, scrollwheel: false
        };
        map = new google.maps.Map(document.getElementById('mapview'), mapOptions);
        var image = '../Image/salemarker.png';
        var user = new google.maps.Marker({
            map: map,
            position: new google.maps.LatLng(51.561918, -0.31237799999996696),
            animation: google.maps.Animation.DROP, icon: image
        });
        var circle = new google.maps.Circle({
            map: map,
            radius: 1609.344, // 10 miles in metres
            strokeColor: '#08355A;',
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: '#fffff',
            fillOpacity: 0.2,
        });
        info_window = new google.maps.InfoWindow({
            content: 'loading'
        });
        user.setMap(null);
        function addMarkersc() {
            createLocationOnMap('4 bed semi detached For sale', new google.maps.LatLng(51.5661728, 51.5661728), '<p>48, The fairway, wembley, HA..</p>');
        }
        addMarkersc();
        circle.bindTo('center', user, 'position');
        map.fitBounds(circle.getBounds());
    }
    google.maps.event.addDomListener(window, 'load', initialize);
    var image1 = '../Image/salemarker.png';
    function createLocationOnMap(titulo, posicao, conteudo) {
        var m = new google.maps.Marker({
            map: map,
            title: titulo,
            icon: image1,
            position: posicao,
            html: conteudo
        });
        google.maps.event.addListener(m, 'mouseover', function () {
            info_window.setContent(this.html);
            info_window.open(map, this);
        });
    }
</script>

Answer 1

您的标记不在视线范围内。它位于 51.5661728,51.5661728：

createLocationOnMap('4 bed semi detached For sale', new google.maps.LatLng(51.5661728,51.5661728), '<p>48, The fairway, wembley, HA..</p>');}

您的地图以 51.561918,-0.31237799999996696 为中心

var mapOptions = {
  zoom: 11,
  center: new google.maps.LatLng(51.561918,-0.31237799999996696),
  mapTypeId: google.maps.MapTypeId.ROADMAP,scrollwheel: false
};

working fiddle

Answer 2

你可以试试这个

    function InitializeMap1() {
    geocoderMap = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(48.856614, 2.352222);
    var myOptions =
    {
        zoom: 12,
        minZoom: 12, // panControl: false,   zoomControl: false,   scaleControl: false, streetViewControl: true, //
        center: latlng,
        streetViewControl: false,
        scaleControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: true,
        zoomControl: true
    };
    map = new google.maps.Map(document.getElementById("map"), myOptions);
    var arrayMain = [];
    var markerLatLng = new google.maps.LatLng(48.856614, 2.352222);
    var marker = new google.maps.Marker({
        map: map,
        position: markerLatLng,
        center: markerLatLng
    });
    arrayMain.push(marker);
}

Answer 3

试试这样：

<div id="mapview" style="width: 100%; height: 700px">    
<script>
    var map;
    var info_window;
    function addMarkersc() {
        var titulo = '4 bed semi detached For sale';
        var posicao = new google.maps.LatLng(51.5661728,51.5661728);
        var conteudo = '<p>48, The fairway, wembley, HA..</p>';
        var image = '../Image/salemarker.png';
        var m = new google.maps.Marker({
            map: map,
            title: titulo,
            icon: image,
            position: posicao,
            html: conteudo
        });      
        google.maps.event.addListener(m, 'mouseover', function () {
            info_window.setContent(this.html);
            info_window.open(map, this);
        });
    }
    function initialize() {
        var mapOptions = {
            zoom: 11,
            center: new google.maps.LatLng(51.561918,-0.31237799999996696),
            mapTypeId: google.maps.MapTypeId.ROADMAP,scrollwheel: false
        };
        map = new google.maps.Map(document.getElementById('mapview'),mapOptions);
        var image = '../Image/salemarker.png';
        var user = new google.maps.Marker({
            map: map,
            position: new google.maps.LatLng(51.561918,-0.31237799999996696),
            animation: google.maps.Animation.DROP,
            icon: image
        });
        var circle = new google.maps.Circle({
            map: map,
            radius: 1609.344,    // 10 miles in metres
                  strokeColor: '#08355A;',
                  strokeOpacity: 0.8,
                  strokeWeight: 2,
                  fillColor: '#fffff',
                  fillOpacity: 0.2,
        });
        info_window = new google.maps.InfoWindow({
            content: 'loading'
        });
        user.setMap(null);
        circle.bindTo('center', user, 'position');
        map.fitBounds(circle.getBounds());
        addMarkersc();
    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>