在谷歌地图上添加标记

-1

我只是想在谷歌地图上添加标记API在谷歌地图上添加标记

我想创建自定义标记和半径圆。我已经使用谷歌地图地理编码服务。基本上我想在选定的城市中显示推文，并在某些半径和个人资料图片中作为标记和信息框。

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Geocoding service</title> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <style> 
     html, body { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
     } 
     #map { 
     height: 100%; 
     } 
     #floating-panel { 
     position: absolute; 
     top: 10px; 
     left: 25%; 
     z-index: 5; 
     background-color: #fff; 
     padding: 5px; 
     border: 1px solid #999; 
     text-align: center; 
     font-family: 'Roboto','sans-serif'; 
     line-height: 30px; 
     padding-left: 10px; 
     } 
    </style> 
    </head> 
    <body> 
    <div id="floating-panel"> 
     <input id="address" type="textbox" placeholder="Bangkok"> 
     <input id="submit" type="button" value="Search"> 
    </div> 
    <div id="map"></div> 
    <script> 

     function initMap() { 
     var place= {lat: 13.7565, lng: 100.5018}; 
     var map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 8, 
      center: place 
     }); 
     var geocoder = new google.maps.Geocoder(); 

     document.getElementById('submit').addEventListener('click', function() { 
      geocodeAddress(geocoder, map); 
     }); 
     } 

     function geocodeAddress(geocoder, resultsMap) { 
     var address = document.getElementById('address').value; 
     geocoder.geocode({'address': address}, function(results, status) { 
      if (status === google.maps.GeocoderStatus.OK) { 
      resultsMap.setCenter(results[0].geometry.location); 
      var marker = new google.maps.Marker({ 
       map: resultsMap, 
       position: results[0].geometry.location 
      }); 
      } else { 
      alert('Geocode was not successful for the following reason: ' + status); 
      } 
     }); 
     } 
    // Create marker 
    var marker = new google.maps.Marker({ 
     map: map, 
     position: new google.maps.LatLng(13.7563, 100.5018), 
     title: 'Some location' 
    }); 


    var circle = new google.maps.Circle({ 
     map: map, 
     radius: 16093, // 10 miles in metres 
     fillColor: '#AA0000' 
    }); 
    circle.bindTo('center', marker, 'position'); 

    </script> 
    <script async defer 
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDPgJahvyB7ZJb8bm-X0Z5KuCp5vtSSx6A&callback=initMap"> 
    </script> 
    </body> 
</html>

来源

2016-03-15 Shurya

能描述一下你的问题吗？请阅读：http://stackoverflow.com/help/how-to-ask –

我只是想添加标记在谷歌地图API – Shurya

这不是你的问题的描述，我们没有代码交付服务... –

-1

//objmap is the map object 
// custom_data is the array of geo_location 
// toolTip is the marker title 

function setMarkers(objmap,custom_data,toolTip) { 

    var image = { 
     url: '../img/icon.png' 
    }; 

    if(custom_data!=null) { 
     for (var i = 0; i < custom_data.length; i++) { 

      var beach = custom_data[i]; 
      var myLatLng = new google.maps.LatLng(parseFloat(beach.lt), parseFloat(beach.lg)); 
      var marker = new google.maps.Marker({ 
       id: beach.vid, 
       position: myLatLng, 
       map: objmap, 
       icon: image, 
       title: toolTip, 
       zIndex: 1 
      }); 

      google.maps.event.addListener(marker, 'click', viewMarker(marker.id)); 

     } 
    } 

}

来源

2016-03-15 11:45:35

地址解析器是异步的，你需要使用返回的数据的回调函数何时/何可用。移动标记/圈定义为地理编码器的回调函数：

proof of concept fiddle

代码片段：

function initMap() { 
 
    var place = { 
 
    lat: 13.7565, 
 
    lng: 100.5018 
 
    }; 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 8, 
 
    center: place 
 
    }); 
 
    var geocoder = new google.maps.Geocoder(); 
 

 
    document.getElementById('submit').addEventListener('click', function() { 
 
    geocodeAddress(geocoder, map); 
 
    }); 
 
    geocodeAddress(geocoder, map); 
 
} 
 

 
function geocodeAddress(geocoder, resultsMap) { 
 
    var address = document.getElementById('address').value; 
 
    geocoder.geocode({ 
 
    'address': address 
 
    }, function(results, status) { 
 
    if (status === google.maps.GeocoderStatus.OK) { 
 
     resultsMap.setCenter(results[0].geometry.location); 
 
     var marker = new google.maps.Marker({ 
 
     map: resultsMap, 
 
     position: results[0].geometry.location 
 
     }); 
 
     var circle = new google.maps.Circle({ 
 
     map: marker.getMap(), 
 
     radius: 16093, // 10 miles in metres 
 
     fillColor: '#AA0000' 
 
     }); 
 
     circle.bindTo('center', marker, 'position'); 
 
    } else { 
 
     alert('Geocode was not successful for the following reason: ' + status); 
 
    } 
 
    }); 
 
} 
 

 
google.maps.event.addDomListener(window, "load", initMap);

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#map { 
 
    height: 100%; 
 
} 
 
#floating-panel { 
 
    position: absolute; 
 
    top: 10px; 
 
    left: 25%; 
 
    z-index: 5; 
 
    background-color: #fff; 
 
    padding: 5px; 
 
    border: 1px solid #999; 
 
    text-align: center; 
 
    font-family: 'Roboto', 'sans-serif'; 
 
    line-height: 30px; 
 
    padding-left: 10px; 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="floating-panel"> 
 
    <input id="address" type="textbox" placeholder="Bangkok" value="Bankok"> 
 
    <input id="submit" type="button" value="Search"> 
 
</div> 
 
<div id="map"></div>

来源

2016-03-15 13:50:19 geocodezip

在谷歌地图上添加标记

回答

相关问题