在Google地图上显示标记

时间:2013-12-13 22:03:39

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

我构建了这个脚本,用于初始化特定点的地图:

注意:(x, y)是纬度 - 经度坐标。

<script type="text/javascript">
        var businessMap;

        function showBusinessMap(x, y) {
            var xops = 
            {
                zoom: 15,
                center: new google.maps.LatLng(x, y)
            }

            var chosenPoint = new google.maps.Marker({
                position: new google.maps.LatLng(x, y),
            });

            businessMap = new google.maps.Map(document.getElementById("businessMap"), xops);

            chosenPoint.setMap(businessMap);
            chosenPoint.setVisible(true);


        }
</script>

效果很好,但地图上没有显示标记。

我也有这个调整地图大小的jQuery函数:

            $('#showMap').on('shown', function() {
                google.maps.event.trigger(businessMap, "resize");
            });

如何显示标记chosenPoint

如果我错过了任何信息,请告诉我,我会添加。

提前致谢!

编辑:

    var businessMap;

    function showBusinessMap(x, y) {
        var xops = 
        {
            zoom: 15,
            center: new google.maps.LatLng(x, y)
        }

        businessMap = new google.maps.Map(document.getElementById("businessMap"), xops);

        var chosenPoint = new google.maps.Marker({
            position: new google.maps.LatLng(x, y),
            map: businessMap
        });
    }

仍然无效。

3 个答案:

答案 0 :(得分:0)

编辑: 您需要将创建的chosenPoint添加到地图中。

来自Google Maps API,

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
  zoom: 4,
  center: myLatlng
}
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

// To add the marker to the map, use the 'map' property
var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title:"Hello World!"
});

因此,在您的情况下,首先创建地图对象,然后创建第二个标记对象,并在标记的选项中包含map: businessMap,就像上面的示例一样。

Look here for more information.

答案 1 :(得分:0)

 var address = "Address, City, ProvinceOrState, Country"; 

 geocoder.geocode({ 'address': address }, function (results, status) {
     if (status == google.maps.GeocoderStatus.OK) {
         //console.log("GeocoderStatus.OK  :  " + results[0].geometry.location);
         var mapOptions = {
             zoom: 8,
             center: results[0].geometry.location,
             mapTypeId: google.maps.MapTypeId.ROADMAP
         }
         //load the map
         map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

         var marker = new google.maps.Marker({
             map: map,
             position: results[0].geometry.location
         });

     } //if
     else { console.log("Geocode was not successful for the following reason: " + status); }
 })

以下部分是添加“标记”的部分

         var marker = new google.maps.Marker({
             map: map,
             position: results[0].geometry.location
         });

答案 2 :(得分:0)

作为一个起点,这里有一个基于您的代码的简单示例。我想你的问题是由你向我们展示的东西引起的。

<script type="text/javascript">

        var businessMap;

        function showBusinessMap(x, y) {

            var xops = {
                zoom: 15,
                center: new google.maps.LatLng(x, y)
            };
            var businessMap = new google.maps.Map(document.getElementById("businessMap"),
            xops);

            var chosenPoint = new google.maps.Marker({
                position: new google.maps.LatLng(x, y),
                map: businessMap
            });

        }

        function initialize() {
            showBusinessMap(-34.397, 150.644);
        }

        google.maps.event.addDomListener(window, 'load', initialize);

</script>