0

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

<!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 个问题

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

4

1 回答 1

3

这是用于在事件的地图上放置标记的 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>

我希望这可以对你有所帮助。

于 2013-06-12T10:12:30.490 回答