带有交互式标记的地理位置

Question

我正在尝试创建一个移动应用程序，其目的如下：

通过观察位置显示地理位置，以便位置标记在地图上随您移动。
在地图上的固定位置显示带有交互式*信息窗口的标记。
具有方向可用性，以便显示从地理位置到您选择的标记位置的路线。

交互式我的意思是我希望标记包含从数据库导入的功能。数据库将显示所选缩放区域内各个标记点上可用的感兴趣产品的当前价格，并突出显示价格最低的标记，以便您可以选择获取前往具有最佳报价的位置的方向。

我已经能够创建 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>

带有交互式标记的地理位置

问题描述投票：0回答：1

1个回答

最新问题

带有交互式标记的地理位置

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1