インテリジェントマーカーを使用したジオロケーション

-1

次の目的でモバイルアプリを作成しようとしています。 1.場所マーカーがあなたと一緒にマップ上を移動するようウォッチポストでジオロケーションを表示します。 2.マップに沿って、インタラクティブな*情報ウィンドウを持つマーカーを実在の場所に表示します。 3.ジオロケーションから選択したマーカーの位置までのルートを示すように、方向の可用性を確保します。 *対話型では、データベース機能からのインポートをマーカーに含めることを希望します。データベースには、選択したズームエリア内のさまざまなマーカーポイントで利用可能な興味のある商品の現在の価格が表示され、最低価格のマーカーが強調表示され、ベストオファーのある場所にgt方向を選択できます。私はwatchposition（）マップ自体を作成し、固定マップ上に表示するインフォウィンドウを作成することができました。しかし、これらの2人は個別のプロジェクトに取り組んでいますが、それらをまとめようとするとプレビューは空白になります。一緒に働かせる方法は？私はここでインテリジェントマーカーを使用したジオロケーション

出典

2016-09-23 Jonas Silvermosse

お願いしますいくつかのコードサンプルを貼り付けて、あなたの質問を編集して読みやすくしてください。人々がここで助けてくれるでしょう – Entea

ここには、ジオロケーションのコードがあります。 –

は、私はマーカーを追加したいジオロケーションのためのコードであるMyEclipseが2015安定したバージョンを使用しています：

<!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>

出典

2016-09-24 10:22:49

インテリジェントマーカーを使用したジオロケーション

答えて

関連する問題