Question

我正在尝试创建一个具有以下用途的移动应用： 1.使用watchpostion显示地理位置，以便位置标记随您一起移动到地图上。 2.沿着地图上的交互式* infowindows显示标记，位于固定位置。 3.具有方向可用性，以便显示从地理位置到您选择的标记位置的路线。 *与交互式我的意思是我希望标记包含从数据库功能导入。数据库将显示所选缩放区域内各种标记点上可用的感兴趣的产品的当前价格，并突出显示具有最低价格的标记，以便您可以选择gt方向到具有最佳报价的位置。我已经能够创建watchposition（）地图本身并创建一个显示在固定地图上的信息窗口。然而，这两个正在处理单个项目，但当我尝试将它们放在一起时，预览变为空白。如何让它们一起工作？我正在使用myeclipse 2015稳定版

Answer 1

以下是地理位置的代码我希望在以下位置添加标记：

<!DOCTYPE HTML>
<html>
<head>
<title>Geolocation watchPosition()</title>

<!-- for mobile view -->
<meta content='width=device-width, initial-scale=1' name='viewport'/>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" >        </script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"></script>

<script type="text/javascript">

    // you can specify the default lat long
    var map,
        currentPositionMarker,
        mapCenter = new google.maps.LatLng(57.736585899999994, 12.956377999999999), 
        map;

    // change the zoom if you want
    function initializeMap()
    {
        map = new google.maps.Map(document.getElementById('map_canvas'), {
           zoom: 18,
           center: mapCenter,
           mapTypeId: google.maps.MapTypeId.ROADMAP
         });
    }

    function locError(error) {
        // tell the user if the current position could not be located
        alert("The current position could not be found!");
    }

    // current position of the user
    function setCurrentPosition(pos) {
        currentPositionMarker = new google.maps.Marker({
            map: map,
            position: new google.maps.LatLng(
                pos.coords.latitude,
                pos.coords.longitude
            ),
            title: "Current Position"
        });
        map.panTo(new google.maps.LatLng(
                pos.coords.latitude,
                pos.coords.longitude 
            ));
    }

    function displayAndWatch(position) {

        // set current position
        setCurrentPosition(position);

        // watch position
        watchCurrentPosition();
    }

    function watchCurrentPosition() {
        var positionTimer = navigator.geolocation.watchPosition(
            function (position) {
                setMarkerPosition(
                    currentPositionMarker,
                    position
                );
            });
    }

    function setMarkerPosition(marker, position) {
        marker.setPosition(
            new google.maps.LatLng(
                position.coords.latitude,
                position.coords.longitude)
        );
    }

    function initLocationProcedure() {
        initializeMap();
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(displayAndWatch, locError);
        } else {
            // tell the user if a browser doesn't support this amazing API
            alert("Your browser does not support the Geolocation API!");
        }
    }

    // initialize with a little help of jQuery
    $(document).ready(function() {
        initLocationProcedure();
    });

</script>

<!-- display the map here, you can changed the height or style -->
<div id="map_canvas" style="height:25em; margin:0; padding:0;"></div>

具有互作标记的地理定位

1 个答案: