标签: google-maps-api-3

var infoBubble = new InfoBubble({
map: map,
content: '<div>Some label</div>',
position: new google.maps.LatLng(26.890076,75.755000),
shadowStyle: 1,
padding: 0,
backgroundColor: 'rgb(57,57,57)',
borderRadius: 4,
arrowSize: 0,
borderWidth: 1,
borderColor: '#2c2c2c',
disableAutoPan: true,
hideCloseButton: true,
pixelOffset: new google.maps.Size(-100,0)
});
infoBubble2.open(map,marker);

Run Code Online (Sandbox Code Playgroud)

google-maps google-maps-api-3 infobubble

Tri*_*hul

lucky-day

-1
推荐指数

1
解决办法

1099
查看次数

使用Javascript在Google Map中围绕标记绘制圆圈

我有以下javascript使用googlemap在Web应用程序中围绕标记绘制一个圆圈.位置详细信息来自数据库,对于每个位置,我创建一个标记,其周围有一个固定的半径圆圈.出于某种原因,圆圈没有出现.有什么建议吗？

       var marker, i, center;
        for (i = 0; i < locations.length; i++) {
            center = new google.maps.LatLng(locations[i][1], locations[i][2]);
            marker = new google.maps.Marker({
                position: center,
                map: map

            });

            var circle = new google.maps.Circle({
                center: center,
                map:map,
                radus:160930,
                strokeColor: "red",
                strokeOpacity:0.8,
                strokeWeight: 2,
                fillColor: "red"
            });
            circle.bindTo('center',marker,'position');
            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {
                    infowindow.setContent(locations[i][0]);
                    infowindow.open(map, marker);
                };
            })(marker, i));


        }

Run Code Online (Sandbox Code Playgroud)

javascript google-maps google-maps-api-3 google-maps-markers

jpr*_*jpr

lucky-day

-1
推荐指数

1
解决办法

1万
查看次数

getCenter不是一个功能jquery谷歌地图v3

我正在尝试使用jQuery来使用下面的中心值latlong

JQUERY

$('.mapcentre').click(function(){   
    var mapElement = document.getElementById('map');
    var valMap = mapElement.getCenter();
    console.log(valMap);
});

Run Code Online (Sandbox Code Playgroud)

我的console.log输出 TypeError: mapElement.getCenter is not a function var valMap = mapElement.getCenter();

我不确定问题是什么,因为我正在使用的地图显示正常,点击.mapcenter时此按钮应该是中心纬度和长度的区域#map

编辑:上面的jQuery位于活动页面的底部.

再次编辑:

google.maps.event.addDomListener(window, 'load', init);
        function init() {
            var mapOptions = {
                zoom: 2,
                center: new google.maps.LatLng(40.697299 , -73.809815),
            };
            var mapElement = document.getElementById('map');
            var map = new google.maps.Map(mapElement, mapOptions);
        }

Run Code Online (Sandbox Code Playgroud)

jquery google-maps-api-3

ngp*_*und

2013 11-05

-1
推荐指数

1
解决办法

3446
查看次数

多个"InfoWindow"用于Google地图上的"标记"数组？

使用Google Maps API将infoWindow添加到每个标记.标记来自阵列.

虽然,infoWindow只显示第一个标记,而不显示其他标记.为什么？谢谢.

function set_markers(array) {
    var mapOptions = {
        zoom: 13
    }
    for (var i = 0; i < array.length; i++) {
        var single_location = array[i];
        var myLatLng = new google.maps.LatLng(single_location[1], single_location[2]);
        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            title: single_location[0]
        });
        var infowindow = new google.maps.InfoWindow({
            content: ""
        });
    }

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent('<h3>'+this.title+'</h3>');
        infowindow.open(map,this);
    });
}

Run Code Online (Sandbox Code Playgroud)

javascript maps google-maps google-maps-api-3

trs*_*trs

lucky-day

-1
推荐指数

1
解决办法

3329
查看次数

带有Infowindows的Google Maps API多个标记 - 点击相互冲突的事件

我正在尝试制作一个带有多个标记的地图,每个标记都有一个infowindow.到目前为止没什么好看的.

所有的信息都应该打开.没问题.

如果我点击,每个信息都会关闭

在它自己的标记上
在它的infowindow的X.

后者也没问题.

但是,如果我点击标记,它的表现就不应该.

页面已加载.infowindows是开放的.现在我单击Marker 1并关闭Marker 2的infowindow.如果我再次点击Marker 1,Marker 1上会打开第二个infowindow.Marker 1上的"初始"infowindow只能用infowindow中的X关闭.

如果我通过X关闭所有infowindows然后我可以通过他们的标记打开和关闭每个infowindow.但是:打开的infowindows将被点击另一个标记关闭,这不是我想要的.只需单击自己的标记即可打开和关闭信息窗.

这是我的代码:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Circles</title>
    <style>
      html, body {
        height: 100%;		
        margin: 0px;
        padding: 0px
      }
	  #map-canvas {
        height: 500px;
		width:800px;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script>
	function initialize() {
	    var infos = [];
		var locations = [
			['Marker 1', 54.08655, 13.39234, 2],
			['Marker 2', 53.56783, 13.27793, 1]       
		];
		
		var map = new google.maps.Map(document.getElementById('map-canvas'), {
			mapTypeId: google.maps.MapTypeId.ROADMAP,
			zoomControl: …

Run Code Online (Sandbox Code Playgroud)

javascript google-maps infowindow google-maps-api-3 google-maps-markers

Sve*_*ven

2017 05-23

-1
推荐指数

1
解决办法

4380
查看次数

谷歌地图动态创建标记点击事件使用相同的标记

所以我有一个ajax帖子,从我的数据库中获取了很多目的地.我遍历它们并在我的地图上为每一个添加一个标记.我还为每一个添加了一个点击事件,这样我就可以点击它们,但点击事件会将最后一个标记作为输入创建,所以无论我按哪一个我都会得到相同的标记无关紧要在我的点击事件中.这是我的代码:

    success: function (data) {
        for (destination in data) {
            var latlng = { lat: data[destination].Latitude, lng: data[destination].Longitude }
            console.log(data[destination].Id);
            console.log(data[destination]);
            var marker = new google.maps.Marker({
                map: map,
                postion: new google.maps.LatLng(latlng.lat, latlng.lng),

            });
            marker.set("id", data[destination].Id);

            marker.setIcon( /** {google.maps.Icon} */({
                url: '/Content/Markers/green_MarkerX.png',
                size: new google.maps.Size(71, 71),
                origin: new google.maps.Point(0, 0),
                anchor: new google.maps.Point(17, 34),
                scaledSize: new google.maps.Size(35, 35)
            }));
            marker.setPosition(latlng);
            marker.setVisible(true);

            google.maps.event.addListener(marker, 'click', function () {
                console.log("MARKER");
                console.log(marker);
                console.log("MarkerID");
                console.log(marker.get('id'));
            });
        }
    },

Run Code Online (Sandbox Code Playgroud)

所以console.log(marker.get('id')); 始终是相同的,console.log(标记)始终是相同的标记.如何让听众添加特定标记？

javascript jquery google-maps google-maps-api-3

Dan*_*son

lucky-day

-1
推荐指数

1
解决办法

1908
查看次数

如何动态添加infowindows到谷歌地图上的标记？

下面的代码是我对这个问题的设置,它运作良好

var map;
var markers   = [];
var contentString = '<h1>This is the Title!</h1>';

function initialize() {
  var losAngeles = new google.maps.LatLng(34.0500, -118.2500);
  var mapOptions = {
    zoom: 10,
    center: losAngeles,
    disableDefaultUI: true,
    mapTypeControlOptions: google.maps.MapTypeId.SATELLITE
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}

function addMarker(location) {

  var markerOptions = {
    position: location,
    map: map
  }
  var marker = new google.maps.Marker(markerOptions);
  markers.push(marker);
}

function setAllMap(map) {
  for (var i = 0; i < markers.length;i++) {
    markers[i].setMap(map);
  }
}

function clearMarkers() {
  setAllMap(null); …

Run Code Online (Sandbox Code Playgroud)

javascript google-maps google-maps-api-3

Dea*_*imp

2017 10-21

-1
推荐指数

1
解决办法

1750
查看次数

如何在谷歌地图上绘制正确的折线

我已经成功地从点a到点b绘制了折线,但由于某种原因,它显示的是直线而不是正确的航点

这是代码

let path = GMSMutablePath()
        path.addLatitude(3.1970044, longitude:101.7389365)
        path.addLatitude(3.2058354, longitude:101.729536)
        let polyline = GMSPolyline(path: path)
        polyline.strokeWidth = 5.0
        polyline.geodesic = true
        polyline.map = mapView

Run Code Online (Sandbox Code Playgroud)

我期待它会做一些航点,但它只显示直线折线