Tag: 谷歌 MAPS API 3

在jquery mobile中使用谷歌地图的清晰方向示例？

尝试获得一个有效的jquery移动地图方向页面。 列出了这个例子： http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-mobile.html#directions_map 但是示例代码很乱并且无法使其工作:(。宜家使用它。 http://m.ikea.com/nl/nl/stores/415/map/ 但他们也非常定制js所以很难看到会发生什么。 有谁知道一个很容易理解的干净的例子或实现？

在自动完成选项中解析Google地图中的address_components

当选择自动完成列表时，我有以下代码来解析country ： $(‘#spot_address’).autocomplete({ // This bit uses the geocoder to fetch address values source: function(request, response) { geocoder.geocode( {‘address’: request.term }, function(results, status) { // Get address_components for (var i = 0; i < results[0].address_components.length; i++) { var addr = results[0].address_components[i]; var getCountry; if (addr.types[0] == 'country') getCountry = addr.long_name; } response($.map(results, function(item) { return […]

从谷歌地图drawingManager V3中删除多边形

我有一个用户可编辑的谷歌地图，用户可以使用绘图管理器在地图上绘制叠加多边形。 这工作正常，控制台记录我需要的lat lngs。 但是，我需要添加一个清除多边形地图的按钮，以便在出错时再次绘制..我的实现代码粘贴在下面： geocoder = new google.maps.Geocoder(); var latlng = new google.maps.LatLng(, ); var myOptions = { zoom: , center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById(“map_canvas”), myOptions); marker = new google.maps.Marker({ map:map, draggable:true, animation: google.maps.Animation.DROP, position: latlng }) pos = marker.position; //alert(pos); document.getElementById(“gpsite-surgery-latitude”).value = pos.lat(); document.getElementById(“gpsite-surgery-longitude”).value = pos.lng(); google.maps.event.addListener(marker, “dragend”, function() […]

从谷歌地图外部的外部链接打开infoWindows

我目前正在使用Google Maps API来创建属性映射。 我通过自定义post类型控制它，它将标记带到地图上，infoWindows在点击时打开。 我现在需要实现某种方式来列出地图下面的属性（最终进入滑块），这样当在地图外部单击属性时，地图会平移到标记并打开infoWindow。 目前我根本无法让它工作 – 我不是一个非常强大的JavaScript编码器所以任何帮助将非常感激。 我目前在地图下面有一个post类型条目列表，但无法链接它们。 这是目前为止地图的代码片段.. /* MARKER 1 */ function add_marker( $marker, map ) { // var var image = ‘http://www.masonyoung.co.uk/wp-content/uploads/2015/08/mason-new.png’; var latlng = new google.maps.LatLng( $marker.attr(‘data-lat’), $marker.attr(‘data-lng’) ); // create marker var marker = new google.maps.Marker ({ position : latlng, map : map, icon: image }); // add to […]

Google Maps api V3更新标记

我有一张加载的地图。 我想添加一个标记，从文本框中获取它的纬度和长度，我无法理解它。 单击updatemap按钮时没有任何反应。 到目前为止，这是我的代码： $(document).ready(function () { alert(“Dom, dom dom dom dom”); var map; var marker; function initialize() { var myLatlng = new google.maps.LatLng(40.65, -74); var myOptions = { zoom: 2, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP, } var map = new google.maps.Map(document.getElementById(‘map_canvas’), myOptions); } $(“#updateMap”).click(function(){ var newLatLng = new google.maps.LatLng(lat, lng); marker.setPosition(newLatLng); var lat = parseFloat(document.getElementById(‘markerLat’).value); […]

检查地图标记是否在选定范围内

我有一个带有各种标记的地图，我需要能够在地图上绘制一个矩形并选择矩形边界内的标记。 到目前为止，我在这里找到了一些很好的信息： 如何在鼠标拖动选择的区域内获取标记？ 我已经实现了keymapzoom插件。 像这样 $(‘#dispatcher’).gmap3({action:’get’}).enableKeyDragZoom({ boxStyle: { border: “dashed black”, //backgroundColor: “red”, opacity: 0.5 }, paneStyle: { backgroundColor: “gray”, opacity: 0.2 } }); var dz = $(‘#dispatcher’).gmap3({action:’get’}).getDragZoomObject(); google.maps.event.addListener(dz, ‘dragend’, function (bnds) { alert(bnds); }); 这给了我以下（（ lat，long ），（ lat，long ））格式的警报（bnds）; 我需要知道我现在如何检查是否有任何标记？ 由于其他原因，我已经有一个存储标记的对象。 喜欢： markers[name] = {}; markers[name].lat = lati; markers[name].lng = longi; 哪个可能有用？ 我不明白如何使用GLatLngBounds和containsLatLng（latlng：GLatLng）。

将多个地图canvas添加到窗口 – Google Maps Javascript API v3

我想在一个窗口中显示多个谷歌地图canvas，但它不起作用。 在for循环中创建的地图都显示为灰色，没有任何内容，我无法弄清楚原因。 HTML jQuery的/ JavaScript的 var margin = 50; var maps = []; for (var i = 0; i < 5; i++) { $("#routeContainer").append("hello world”); var mapOptions = { zoom: 10, scrollwheel: false }; maps[i] = new google.maps.Map(document.getElementById(‘map-canvas’+i),mapOptions); }; 如果有人能告诉我，我做错了什么会很棒！

带有点击处理程序和滚动条的Google地图信息框

我有一个使用Google Maps javscript API和Infobox插件的应用程序（本机InfoWindow的可自定义版本）。 它工作正常，直到我有以下用例：如果内容很大，我需要一个带滚动条的信息框，并且它还需要包含一些带有点击监听器的HTML元素。 我通常需要做的是支持信息框内的点击处理程序，设置enableEventPropagation = true，并使用jQuery委托来设置点击处理程序。 如果我不允许事件传播，则jQuery委托不起作用。 这工作正常，直到我必须将它与具有正常运行的滚动条组合！ 我发现滚动条仅在我有enableEventPropagation = false时才有效，因为如果启用了事件传播，则拖动事件只会传递给地图并被解释为平移。 有谁知道我能做些什么才能在信息框内容上有一个正常运行的滚动条，并且能够在某些内容上设置点击处理程序？ 对我来说听起来合乎逻辑的是，enableEventPropagation = false会解决这两个问题，因为我不明白为什么需要将click事件传播到地图以触发我附加到html元素的处理程序。 这是我的信息框的设置对象： { content: “[my html in here]”, disableAutoPan: false, pixelOffset: new google.maps.Size(-77, 10), boxClass: “infoBox”, infoBoxClearance: new google.maps.Size(18, 30), closeBoxMargin: “14px 6px”, pane: “floatPane”, enableEventPropagation: true };

固定中心的标记和拖动地图以获得lat，long

我是一个示例地图显示当前位置，点击一个按钮显示lat，long和地图上的标记可拖动更新lat，long，但我需要在地图上稍作修改 我希望标记固定在地图的中心，地图可以拖动以获得新的lat，就像JSFIDDLE链接一样 。 我的代码是： var map = null; var marker; function showlocation() { // One-shot position request. navigator.geolocation.getCurrentPosition(callback); } function callback(position) { if (marker != null) { marker.setMap(null); } var geocoder = new google.maps.Geocoder(); var lat = position.coords.latitude; var lon = position.coords.longitude; document.getElementById(‘default_latitude’).value = lat; document.getElementById(‘default_longitude’).value = lon; var latLong = new google.maps.LatLng(lat, lon); marker […]

获取鼠标光标在Google Maps V3 API Marker的鼠标hover上的位置

当光标鼠标hover在使用jQuery的标记上时，我试图在光标位置显示div 。 它有点像工具提示。 但是我似乎无法弄清楚如何获得光标下方点的X / Y坐标。 现行代码： google.maps.event.addListener(marker, “mouseover”, function(event) { $(“#tooltip”).css({ position: “absolute”, top: event.pageY, left: event.pageX }).toggle(); 我相信event在jQuery中pageX像pageY和pageX这样的属性。 我如何获得鼠标光标的位置？