Question

我在我的网站上为用户提供了一些活动那些活动有一个位置我想为此放一张谷歌地图这是我的代码

<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>

<script>

var myCenter = new google.maps.LatLng(51.508742, -0.120850);

function initialize() {
    var mapProp = {
        center: myCenter,
        zoom: 5,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
    var marker = new google.maps.Marker({
        position: myCenter,
    });
    marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);

</script>

</head>

<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>

但我有2个问题

第一个问题是：我如何将地图设置为专注于沙特阿拉伯第二个问题是：如果我们在某个地方有事件我怎么把地点放在地图上？

Answer 1

这是javascript（比如说script.js文件），用于在事件的地图上放置标记（在您的情况下）：

var map = false;
var markers = [];

(function () {
    var s = document.createElement('script');
    s.type = 'text/javascript';
    s.src = 'http://maps.googleapis.com/maps/api/js?key=AIzaSyDualhHxdg8nNCo4xY6gIfedyaHffW99UI&libraries=geometry,places&sensor=false&callback=initialize';
    document.body.appendChild(s);

})();


function initialize() {

    var geocoder = false;

    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 15,
        mapTypeId: 'grayscale',
        scrollwheel: false,
        overviewMapControl: false,
        panControl: false,
        rotateControlOptions: false,
        streetViewControl: false,
        mapTypeControl: false
    });

    map.mapTypes.set("grayscale", new google.maps.StyledMapType([{
        featureType: 'all',
        elementType: 'all',
        stylers: [{
            saturation: -80
        }]
    }], {
        name: 'Grey Scale'
    }));


    geocoder = new google.maps.Geocoder();

    geocoder.geocode({
        address: 'Saudi Arabia'
    }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {

            //this get the longitude and latitude of the saudi arabia
            var center = new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng());




            //this focuses on the saudi arabia
            map.setCenter(center);


            // Get the coordinates of the center of the map
            var center = map.getCenter();



            google.maps.event.addListenerOnce(map, 'bounds_changed', function () {

            //ajax to get event location with longitude and latitude from database
                xhr = $.ajax({
                    url: '/joey/event',
                    data: {
                        param:"your param"
                    },
                    dataType: 'json',
                    success: function (data) {

                        //then run loop over json data to add the markers on the map for the events
                        //code in loop start

                        // Here you can put the latitude and longtitude associated with event
                        var center = new google.maps.LatLng(latitude, longitude);


                        var event = new google.maps.Marker({
                            map: map,
                            title: "event name",
                            zIndex: 10000,
                            icon: 'event-icon.png',
                            position: new google.maps.LatLng(jlat, jlng)
                        });
                        markers.push(event);
                        //code in loop end

                    }
                });
            });
        }
    });



}

在html页面中只需输入：

<div id="map"></div>
    <script type="text/javascript" src="script.js" defer></script>

我希望这对你有所帮助。

谷歌地图和活动场所

1 个答案: