如何在Google地图中添加标记?

时间:2017-04-28 13:29:22

标签: javascript google-maps google-maps-api-3

请帮帮我如何在此代码中添加多个标记?我搜索了很多,但我不知道如何在此代码中添加标记?我是谷歌地图API的新手。如果我在这个问题上犯了任何语法错误或拼写错误,我很抱歉。

JS代码:

function initialize() {
    var mapCenter = new google.maps.LatLng(52.5167, 13.3833);
    $('#user_latitude').val(52.5167);
    $('#user_longitude').val(13.3833);

    var mapOptions = {
        zoom: 3,
        center: mapCenter,
        zoomControl: true,
        zoomControlOptions: {
            position: google.maps.ControlPosition.LEFT_CENTER
        },
        streetViewControl: true,
        streetViewControlOptions: {
            position: google.maps.ControlPosition.LEFT_TOP
        },
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        minZoom: 3,
        scrollwheel: false
    };


    var infowindow = new google.maps.InfoWindow();


    var map = new google.maps.Map(document.getElementById("map"), mapOptions);


}

1 个答案:

答案 0 :(得分:0)

您可以使用所有标记在初始化函数中定义一个数组:

 var locations = [
      ['Marker 1', 41.0, 12.4], 
      ['Marker 2', 47.0, 15.4],
     ...
    ];

第一个值可以是标题,第二个是纬度和第三个经度 然后,您可以创建一个循环来添加标记

 for (i = 0; i < locations.length; i++) {
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

示例:

function initialize() {
            var locations = [
                ['Marker 1', 41.0, 12.4],
                ['Marker 2', 47.0, 15.4],
            ];
            var mapCenter = new google.maps.LatLng(52.5167, 13.3833);
            $('#user_latitude').val(52.5167);
            $('#user_longitude').val(13.3833);

            var mapOptions = {
                zoom: 3,
                center: mapCenter,
                zoomControl: true,
                zoomControlOptions: {
                    position: google.maps.ControlPosition.LEFT_CENTER
                },
                streetViewControl: true,
                streetViewControlOptions: {
                    position: google.maps.ControlPosition.LEFT_TOP
                },
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                minZoom: 3,
                scrollwheel: false
            };


            var infowindow = new google.maps.InfoWindow();


            var map = new google.maps.Map(document.getElementById("map"), mapOptions);

            for (i = 0; i < locations.length; i++) {
                marker = new google.maps.Marker({
                    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                    map: map
                });
}

参考:Simple markers | Google maps apiAdding multiple markers to Google Map