Question

我正在通过bootstrap建立一个网站，并希望在特定地址上添加带有标记的谷歌地图。我花了很长时间为地图设计和选择颜色，但现在似乎不可能添加标记。我从搜索谷歌尝试了很多选项。这是我的代码：

<script>
window.onload = function () {
var styles = [
{
    featureType: 'water',
    elementType: 'geometry.fill',
    stylers: [
        { color: '#bcd1d5' }
    ]
},{
    featureType: 'poi',
    elementType: 'geometry',
    stylers: [
        { color: '#2e1e0e' }
]
},{
    featureType: 'road',
    elementType: 'geometry',
    stylers: [
        { color: '#d3cabd' }
    ]
},{
    featureType: 'road.local',
    elementType: 'all',
    stylers: [
        { color: '#d3cabd' }
    ]
},{
    featureType: 'landscape',
    elementType: 'all',
    stylers: [
        { color: '#f3e7d9' }
    ]
},

];

var options = {
mapTypeControlOptions: {
    mapTypeIds: ['Styled']
},
    center: new google.maps.LatLng(55.68453, 12.56812),
    zoom: 15,
    disableDefaultUI: true, 
    mapTypeId: 'Styled'
};
var div = document.getElementById('map');
var map = new google.maps.Map(div, options);
var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled' });
map.mapTypes.set('Styled', styledMapType);
};

任何人都可以告诉我，我必须做些什么来获得工作标记或我必须改变/纠正的任何事情？谢谢！

Answer 1

 var styledMap = new google.maps.StyledMapType(styles, { name: "Styled Map" });
 var map = new google.maps.Map(document.getElementById('map'), {
            zoom: zoomType,
            center: new google.maps.LatLng(lati, long),
            panControl: true,
            zoomControl: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        map.mapTypes.set('map_style', styledMap);
        map.setMapTypeId('map_style');

var marker = new google.maps.Marker({
    position: myLatlng,
    title:"Hello World!"
});
marker.setMap(map);

使用for var marker循环来获取动态标记.. 使用https://developers.google.com/maps/documentation/javascript/markers 了解更多信息

Answer 2

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js"></script>
<body>
    <script type="text/javascript">
var styles = [
{
    featureType: 'water',
    elementType: 'geometry.fill',
    stylers: [
        { color: '#bcd1d5' }
    ]
},{
    featureType: 'poi',
    elementType: 'geometry',
    stylers: [
        { color: '#2e1e0e' }
]
},{
    featureType: 'road',
    elementType: 'geometry',
    stylers: [
        { color: '#d3cabd' }
    ]
},{
    featureType: 'road.local',
    elementType: 'all',
    stylers: [
        { color: '#d3cabd' }
    ]
},{
    featureType: 'landscape',
    elementType: 'all',
    stylers: [
        { color: '#f3e7d9' }
    ]
}

];
        function loadMap() {
            var mapOptions = {
                mapTypeControlOptions: {
                      mapTypeIds: ['Styled']
                },
                center: new google.maps.LatLng(55.68453, 12.56812),
                zoom : 16,
                disableDefaultUI: true, 
                mapTypeId: 'Styled'
            };
            var map = new google.maps.Map(document.getElementById("maps-area"), mapOptions);
            var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled' });
            map.mapTypes.set('Styled', styledMapType);
            var marker = new google.maps.Marker({
                position : new google.maps.LatLng(55.68453, 12.56812),
            });
            marker.setMap(map);
        }
        google.maps.event.addDomListener(window, "load", loadMap);
    </script>
</body>
<div class="panel panel-primary">
    <div class="panel-heading">Maps</div>
    <div class="panel-body" id="maps-area" style="height: 500px;" onLoad="loadMap()"></div>
</div>
</html>

将标记添加到Google地图，代码无效

2 个答案: