Google 地图 V3 多个带有方向的标记

发布于 2024-10-19 20:58:10 字数 2839 浏览 0 评论 0原文

我的代码在下面,我只想添加另一个标记,并能够单击该标记并显示该标记的说明。有一个小表格可以在地图下方生成行车路线。我查遍了互联网并搜索了银河系,但我无法弄清楚这件事

    <h2>Get Driving Directions</h2> 
    <p>
        <label> coming from: <input class="roundInput" id="to-input" type="text" value="" /> </label> <input style="position:relative;top:6px;" type="image" src="<?php bloginfo('template_directory'); ?>/img/route_button.gif" value="route" onclick="doDirections()" /> 
    <div id="dynamicDirections" style="margin-left:30px">
    </div>
    </p>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript">
// <![CDATA[

    var psGlobals={
        address:'3908 Aurora Ave N, Seattle, WA 98103 ',
        lat:47.6545077,
        lon:-122.3471123,
        zoomlevel:13
    };


    function initialize() 
    { 
        psGlobals.latlng = new google.maps.LatLng(psGlobals.lat, psGlobals.lon);
        buildMap();
        psGlobals.dirRenderer = new google.maps.DirectionsRenderer();
        psGlobals.dirService = new google.maps.DirectionsService();
    }

    function buildMap()
    {
        var myOptions, marker;
        myOptions = {
              navigationControl: true,
              navigationControlOptions: {
                  style: google.maps.NavigationControlStyle.ZOOM_PAN
                },

              mapTypeControl: true,
              scaleControl: false,
              zoom: psGlobals.zoomlevel,
              center: psGlobals.latlng,
              mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        psGlobals.map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        psGlobals.marker = new google.maps.Marker({
            position: psGlobals.latlng, 
            map: psGlobals.map,
            title:"4Evergreengroup"
        });


    }

    function doDirections()
    {
        var fromStr = $('#to-input').val();

        var dirRequest = {
            origin: fromStr,
            destination: psGlobals.address,
            travelMode: google.maps.DirectionsTravelMode.DRIVING,
            unitSystem: google.maps.DirectionsUnitSystem.IMPERIAL
        };
        psGlobals.dirService.route(dirRequest, handleDirections);
    }

    function handleDirections(dirResult,dirStatus)
    {
        if (dirStatus != google.maps.DirectionsStatus.OK) 
        {
            alert('Directions failed: ' + dirStatus);
            return;
        }

        psGlobals.dirRenderer.setMap(psGlobals.map);
        psGlobals.dirRenderer.setPanel(document.getElementById('dynamicDirections'));
        psGlobals.dirRenderer.setDirections(dirResult);
  }

  $(document).ready(function(){initialize()});

// ]]>

</script> 

My code is below I just want to add another marker and be able to click on that marker and have the directions show up for that one instead. There is a small form that produces driving directions below the map. I've look all across the internet and searched the milky way galaxy and I can't figure this thing out

    <h2>Get Driving Directions</h2> 
    <p>
        <label> coming from: <input class="roundInput" id="to-input" type="text" value="" /> </label> <input style="position:relative;top:6px;" type="image" src="<?php bloginfo('template_directory'); ?>/img/route_button.gif" value="route" onclick="doDirections()" /> 
    <div id="dynamicDirections" style="margin-left:30px">
    </div>
    </p>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript">
// <![CDATA[

    var psGlobals={
        address:'3908 Aurora Ave N, Seattle, WA 98103 ',
        lat:47.6545077,
        lon:-122.3471123,
        zoomlevel:13
    };


    function initialize() 
    { 
        psGlobals.latlng = new google.maps.LatLng(psGlobals.lat, psGlobals.lon);
        buildMap();
        psGlobals.dirRenderer = new google.maps.DirectionsRenderer();
        psGlobals.dirService = new google.maps.DirectionsService();
    }

    function buildMap()
    {
        var myOptions, marker;
        myOptions = {
              navigationControl: true,
              navigationControlOptions: {
                  style: google.maps.NavigationControlStyle.ZOOM_PAN
                },

              mapTypeControl: true,
              scaleControl: false,
              zoom: psGlobals.zoomlevel,
              center: psGlobals.latlng,
              mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        psGlobals.map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        psGlobals.marker = new google.maps.Marker({
            position: psGlobals.latlng, 
            map: psGlobals.map,
            title:"4Evergreengroup"
        });


    }

    function doDirections()
    {
        var fromStr = $('#to-input').val();

        var dirRequest = {
            origin: fromStr,
            destination: psGlobals.address,
            travelMode: google.maps.DirectionsTravelMode.DRIVING,
            unitSystem: google.maps.DirectionsUnitSystem.IMPERIAL
        };
        psGlobals.dirService.route(dirRequest, handleDirections);
    }

    function handleDirections(dirResult,dirStatus)
    {
        if (dirStatus != google.maps.DirectionsStatus.OK) 
        {
            alert('Directions failed: ' + dirStatus);
            return;
        }

        psGlobals.dirRenderer.setMap(psGlobals.map);
        psGlobals.dirRenderer.setPanel(document.getElementById('dynamicDirections'));
        psGlobals.dirRenderer.setDirections(dirResult);
  }

  $(document).ready(function(){initialize()});

// ]]>

</script> 

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

泪意 2024-10-26 20:58:10

不确定这是否能回答您的问题。这是您的代码:

http://bobcravens.com/demos/temp/gmap1.html

单击“路线”按钮生成并插入路线。你原来的代码不适合我。我添加了“map_canvas”div 来为 google.maps 提供目标。看来现在可以工作了。让我知道是否还有更多?

鲍勃

Not certain if this answers your question. Here is your code:

http://bobcravens.com/demos/temp/gmap1.html

Clicking the 'route' button generates and inserts the directions. Your original code was not working for me. I added the 'map_canvas' div to give a target for google.maps. Seems to work now. Let me know if there is more?

Bob

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文