标签: google-maps-api-3

根据http://code.google.com/intl/sk-SK/apis/maps/documentation/javascript/places.html#places_autocomplete,我已成功在输入框中实施了Google Maps Places V3自动填充功能.它工作得很好,但我很想知道如何在用户按下回车时从建议中选择第一个选项.我想我需要一些JS魔法,但我对JS很新,不知道从哪里开始.

提前致谢!

我正在忙着一个脚本,它会在我的网站上制作一个带有多个标记的谷歌地图画布.我希望当你点击一个标记时,会打开一个信息窗口.我已经这样做了,代码就是这样:

 var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    function addMarker(map, address, title) {
     geocoder = new google.maps.Geocoder();
     geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          map.setCenter(results[0].geometry.location);
          var marker = new google.maps.Marker({
     position: results[0].geometry.location,
              map: map,
              title:title
    });
    google.maps.event.addListener(marker, 'click', function() {
     var infowindow = new google.maps.InfoWindow();
            infowindow.setContent('<strong>'+title + '</strong><br />' + address);
             infowindow.open(map, marker);

          });
        } else {
          alert("Geocode was …

我有这个渲染地图的代码.

function initialize() {
    var myOptions = {
      center: new google.maps.LatLng(45.4555729, 9.169236),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP,

panControl: true,
mapTypeControl: false,
panControlOptions: {
            position: google.maps.ControlPosition.RIGHT_CENTER
        },
zoomControl: true,
zoomControlOptions: {
    style: google.maps.ZoomControlStyle.LARGE,
    position: google.maps.ControlPosition.RIGHT_CENTER
},
scaleControl: false,
streetViewControl: false,
streetViewControlOptions: {
    position: google.maps.ControlPosition.RIGHT_CENTER
            }
        };
    var map = new google.maps.Map(document.getElementById("mapCanvas"),
        myOptions);



var Item_1 = new google.maps.LatLng(45.5983128 ,8.9172776);

var myPlace = new google.maps.LatLng(45.4555729, 9.169236);

var marker = new google.maps.Marker({
    position: Item_1, 
    map: map});

var marker = new google.maps.Marker({
    position: myPlace, 
    map: map}); …

我在Twitter Bootstrap模式对话框中有一个Google Maps Autocomplete输入字段,并且不显示自动完成结果.但是,如果我按向下箭头键,它会选择下一个自动完成结果,因此似乎自动完成代码正常工作,只是结果未正确显示.也许它隐藏在模态对话框后面？

这是截图:

在自动填充字段中键入内容不会提供任何内容

按向下箭头键可得到第一个结果

和代码:

<div class="modal hide fade" id="map_modal">
<div class="modal-body">
    <button type="button" class="close" data-dismiss="modal">×</button>
    <div class="control-group">
        <label class="control-label" for="keyword">Cari alamat :</label>
        <div class="controls">
            <input type="text" class="span6" name="keyword" id="keyword">
        </div>
    </div>
    <div id="map_canvas" style="width:530px; height:300px"></div>
</div>
<div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
</div>

<script type="text/javascript">
$("#map_modal").modal({
    show: false
}).on("shown", function()
{
    var map_options = {
        center: new google.maps.LatLng(-6.21, 106.84),
        zoom: 11,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("map_canvas"), map_options);

    var …

有没有办法在Google地图上获取所有标记？

在Google地图中叠加shapefile的最佳方法是什么？

经过一些阅读建议,将shapefile转换为KML并在Google地图中叠加KML是一种选择.如果是这种情况,我如何将shapefile转换为KML？

我相信会有一些开源工具可用于此转换.任何人都可以指向一个工具来将shapefile转换为KML而不会丢失任何数据吗？

我想要的只是一些简单的示例代码,它向我展示了如何从输入的邮政编码或城市/州获得latlng元素.

我正在将一个非常基本的Google地图插入到我的页面中,并且缩放控件和街道图图标不可见,但是如果我将鼠标放在应该放置的位置,我可以缩放地图并输入街景.所以控件就在那里不可见.

<script type="text/javascript"
    src="//maps.googleapis.com/maps/api/js?key=<apikey>&sensor=false&region=IT">
</script>

var myOptions = {
    zoom: 17,
    center: latlng,
    panControl: true,
    zoomControl: true,
    zoomControlOptions: {
        style: google.maps.ZoomControlStyle.LARGE
    },
    scaleControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

任何想法可能是什么问题？

我正在使用react js来实现这个地图.让我解释一下,默认情况下,我将在谷歌地图中有一条红色的路线,在同一路线中,我需要突出显示一些特定的路径,它将以黑色突出显示它会是这样的:

在图像的右侧,当我点击图标时会出现笔图标我需要突出显示红线上的特定路径,高亮显示路径将显示为黑色,如图所示,然后我需要根据默认路径计算高亮路径的距离.

注意: 默认路径路径在同一点开始和结束,起始点用标志图标表示.开始和结束点一次不会相同,将根据用户响应进行更改.

class MappedRoutes extends React.Component {
  constructor(props) {
    super(props);

    this.drawFreeHand = this.drawFreeHand.bind(this);
  }
  componentDidMount() {
    const routeCoordinatesArr = [];
    map(routeMapped.route.routeCoordinates, el => {
      routeCoordinatesArr.push({
        lat: parseFloat(el.lat),
        lng: parseFloat(el.lng)
      });
    });
    this.mapLocation(routeCoordinatesArr);
  }

  mapLocation(routecoordinates) {
    let currentMarker;
let snapToRoute;
this.map = new google.maps.Map(document.getElementById('map'), {
  center: { lat: routecoordinates[0].lat, lng: routecoordinates[0].lng },
  minZoom: 3,
  zoom: 14,
  disableDoubleClickZoom: true,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
});

// Google map direction service for draw routes
const flightPath = new google.maps.Polyline({
  path: routecoordinates,
  geodisc: true, …

这是我编写的代码,通过提供纬度和经度将标记添加到谷歌地图.问题是我得到了一个非常高度缩放的谷歌地图.我已经尝试将缩放级别设置为1,但这对高度缩放的地图没有影响.

 <script src="http://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript"></script>
     <script type="text/javascript">
        var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/blue.png",new google.maps.Size(32, 32), new google.maps.Point(0, 0),new google.maps.Point(16, 32));
        var center = null;
        var map = null;
        var currentPopup;
        var bounds = new google.maps.LatLngBounds();
        function addMarker(lat, lng, info) {
            var pt = new google.maps.LatLng(lat, lng);
            bounds.extend(pt);
            var marker = new google.maps.Marker({
                position: pt,
                icon: icon,
                map: map
            });
            var popup = new google.maps.InfoWindow({
                content: info,
                maxWidth: 300
            });
            google.maps.event.addListener(marker, "click", function() {
                if (currentPopup != null) {
                    currentPopup.close();
                    currentPopup = null; …