谷歌地图如何只显示一个标记?

时间:2012-09-01 23:59:59

标签: javascript vb.net visual-studio google-maps windows-applications

我已经处理了这几个小时,我仍然无法知道如何做到这一点。

我的目标是在搜索彼此靠近的地址时只显示一个标记。

下面你有我在我的html中使用的代码,以便搜索地址,注意 - 我正在开发一个这样做的Windows应用程序,在这种情况下,你可能会发现一些缺少的东西,通过单击按钮来执行操作,因为这是通过.NET Windows应用程序完成的

html代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

<script type="text/javascript" src="http://maps.google.com.mx/maps/api/js?sensor=true&language=es"></script>
<script type="text/javascript">

       var G = google.maps;
       var map;
       var geocoder = new G.Geocoder();
       var marker;
       var markersArray = [1];

        function initialize() {
          createMap();
          geocode('Chicago');
        }

        function createMap() {
            var myOptions = {
                center: new G.LatLng(0,0),
                zoom: 17,
                mapTypeId: G.MapTypeId.ROADMAP
            }
            map = new G.Map(document.getElementById("map_canvas"), myOptions);
        }

function geocode(address){
            geocoder.geocode({ 'address': (address ? address : "Miami Beach, Florida")}, function (results, status) {
                if (status == G.GeocoderStatus.OK) {
                    map.setCenter(results[0].geometry.location);

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


                } else {
                    alert("Geocode was not successful for the following reason: " + status);
                }
            });

        }


        </script>
      </head>
      <body onload="initialize()">
        <div id="map_canvas" style="width:100%; height:100%"></div>

      </body>
    </html>

阅读以前的帖子我知道if / else语句必须使用但是不能正确使用。

非常感谢您的帮助。

Leo P。

2 个答案:

答案 0 :(得分:3)

您可以在地理编码功能的开头添加一小段代码,在设置新标记之前删除之前的标记。试试这个:

function geocode(address){
    if (marker) {
        marker.setMap(null);
    }
    geocoder.geocode({ 'address': (address ? address : "Miami Beach, Florida")}, function (results, status) {

答案 1 :(得分:2)

仅创建一个标记作为全局变量,并根据需要更改其位置。这样你也节省了内存,因为你没有在每个请求上创建一个新的标记对象:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style>
    html, body {width:100%; height:100%}
    </style>

    <script type="text/javascript" src="http://maps.google.com.mx/maps/api/js?sensor=true&language=es"></script>
    <script type="text/javascript">

           var G = google.maps;
           var map;
       var marker;
           var geocoder = new G.Geocoder();


            function initialize() {
              createMap();
              geocode('Chicago');
            }

            function createMap() {
                var myOptions = {
                    center: new G.LatLng(0,0),
                    zoom: 17,
                    mapTypeId: G.MapTypeId.ROADMAP
                }
                map = new G.Map(document.getElementById("map_canvas"), myOptions);

// Create a single marker, (global variable), and don't give it a position just yet.
        marker = new G.Marker({
        map: map,
        animation: google.maps.Animation.DROP,
        });

            }

    function geocode(address){
                geocoder.geocode({ 'address': (address ? address : "Miami Beach, Florida")}, function (results, status) {
                    if (status == G.GeocoderStatus.OK) {
                        map.setCenter(results[0].geometry.location);

                //Position the marker
                marker.setPosition(results[0].geometry.location);

                    } else {
                        alert("Geocode was not successful for the following reason: " + status);
                    }
                });

            }


            </script>
          </head>
          <body onload="initialize()">
            <div id="map_canvas" style="width:100%; height:100%"></div>

          </body>
        </html>