添加標記，谷歌地圖與socket.io和jQuery

我是新&初學socket.io 我可以發出事件與插座& Node.js的現在我想從用戶與緯度的數組，郎&然後設置標記在谷歌地圖上動態添加標記，谷歌地圖與socket.io和jQuery

這裏是我的代碼

<!doctype html> 
<html> 
    <head> 
    <title>Socket.IO chat</title> 
    <style> 
     * { margin: 0; padding: 0; box-sizing: border-box; } 
     body { font: 13px Helvetica, Arial; } 
     form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; } 
     form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; } 
     form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; } 
     #messages { list-style-type: none; margin: 0; padding: 0; } 
     #messages li { padding: 5px 10px; } 
     #messages li:nth-child(odd) { background: #eee; } 
     #messages { margin-bottom: 40px } 
    </style> 
    </head> 
    <body> 

<div id="map" style="width:;height:700px;background:yellow"></div> 

<script> 
function myMap() { 
var mapOptions = { 
    center: new google.maps.LatLng('23.11', '71.00'), 
    zoom: 10, 
    mapTypeId: google.maps.MapTypeId.HYBRID 
} 
var map = new google.maps.Map(document.getElementById("map"), mapOptions); 
} 
</script> 
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCm2vXXUTO627j8UHqDIKvvETwuNT1dqxQ&callback=myMap"></script> 

    <form action=""> 
     <input id="m" autocomplete="off" /><button>Send</button> 
    </form> 
    <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script> 
    <script src="https://code.jquery.com/jquery-1.11.1.js"></script> 
    <script> 
     $(function() { 
     var socket = io('http://localhost:3000'); 
     $('form').submit(function(){ 
      socket.emit('chat message', $('#m').val()); 
      $('#m').val(''); 
      return false; 
     }); 
     socket.on('chat message', function(msg){ 
     //I want to add marker here 
     }); 
     }); 
} 
    </script> 
    </body> 
</html>

你可以看到我的事件的d谷歌地圖腳本

來源

2017-07-10 ari ari

點簡單的東西一個良好的開端：

<!doctype html> 
<html> 
    <head> 
    <title>Socket.IO chat</title> 
    <style> 
     * { margin: 0; padding: 0; box-sizing: border-box; } 
     body { font: 13px Helvetica, Arial; } 
     form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; } 
     form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; } 
     form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; } 
     #messages { list-style-type: none; margin: 0; padding: 0; } 
     #messages li { padding: 5px 10px; } 
     #messages li:nth-child(odd) { background: #eee; } 
     #messages { margin-bottom: 40px } 
    </style> 
    </head> 
    <body> 
    <div id="map" style="width:;height:700px;background:yellow"></div> 
    <script> 
     function myMap() { 
     var mapOptions = { 
      center: new google.maps.LatLng('23.11', '71.00'), 
      zoom: 10, 
      mapTypeId: google.maps.MapTypeId.HYBRID 
     } 
     map = new google.maps.Map(document.getElementById("map"), mapOptions); 
     } 
    </script> 
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCm2vXXUTO627j8UHqDIKvvETwuNT1dqxQ&callback=myMap"></script> 
    <form action=""> 
     <input id="m" autocomplete="off" /><button>Send</button> 
    </form> 
    <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script> 
    <script src="https://code.jquery.com/jquery-1.11.1.js"></script> 
    <script> 
     $(function() { 
     var socket = io('http://localhost:3000'); 
     $('form').submit(function(){ 
      socket.emit('chat message', $('#m').val()); 
      $('#m').val(''); 
      return false; 
     }); 
     socket.on('chat message', function(msg){ 
      var marker = new google.maps.Marker({ 
      position: new google.maps.LatLng('23.11', '71.00'), 
      title: msg, 
      label: 'a', 
      map: map 
      }); 
      marker.setMap(map); 
     }); 
     }); 
    </script> 
    </body> 
</html>

以及服務器，你只需要這樣：

socket.on('chat message', function(msg) { 
    socket.emit ('chat message', msg); 
});

你將不得不增加一些花裏胡哨如發送你的位置，用戶名，標記圖標等等。

來源

2017-07-10 16:30:52 mk12ok

添加標記，谷歌地圖與socket.io和jQuery

回答

相關問題