- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个带有 javascript 的谷歌地图,我想在放大 100%(完全缩放)后将模式 map 从 map View 更改为卫星 View ,如何在以下 javascript 代码中完成?
演示: http://jsfiddle.net/keL4L2h0/
//////// Loading Google Map //////////////////////////////////////////////////////////////////////////////////
$(function() {
var latitude = $('input[name="latitude"]').val();
var longitude = $('input[name="longitude"]').val();
var lat = (latitude ? latitude : 38.341656192795924),
lng = (longitude ? longitude : -122.68604278564453),
latlng = new google.maps.LatLng(lat, lng),
image = 'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png';
//zoomControl: true;
//zoomControlOptions: google.maps.ZoomControlStyle.LARGE;
var mapOptions = {
center: new google.maps.LatLng(lat, lng),
zoom: (latitude ? 16 : 7),
panControl: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE
},
mapTypeControl: false,
streetViewControl: false,
overviewMapControl: true,
rotateControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
icon: image,
draggable: true,
animation: google.maps.Animation.DROP
});
var input = document.getElementById('searchTextField');
var autocomplete = new google.maps.places.Autocomplete(input, {
types: ["geocode"]
});
autocomplete.bindTo('bounds', map);
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(autocomplete, 'place_changed', function(event) {
infowindow.close();
var place = autocomplete.getPlace();
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17);
}
moveMarker(place.name, place.geometry.location);
$('.MapLat').val(place.geometry.location.lat());
$('.MapLon').val(place.geometry.location.lng());
});
google.maps.event.addListener(marker, 'dragend', function(event) {
$('.MapLat').val(event.latLng.lat());
$('.MapLon').val(event.latLng.lng());
$("#searchTextField").val('');
});
google.maps.event.addListener(map, 'click', function(event) {
$('.MapLat').val(event.latLng.lat());
$('.MapLon').val(event.latLng.lng());
infowindow.close();
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
"latLng": event.latLng
}, function(results, status) {
console.log(results, status);
if (status == google.maps.GeocoderStatus.OK) {
console.log(results);
var lat = results[0].geometry.location.lat(),
lng = results[0].geometry.location.lng(),
placeName = results[0].address_components[0].long_name,
latlng = new google.maps.LatLng(lat, lng);
moveMarker(placeName, latlng);
$("#searchTextField").val(results[0].formatted_address);
}
});
});
function moveMarker(placeName, latlng) {
marker.setIcon(image);
marker.setPosition(latlng);
infowindow.setContent(placeName);
//map.panTo( new google.maps.LatLng( lat,lng ) );
//infowindow.open(map, marker);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js?libraries=places®ion=uk&language=en&sensor=true"></script>
<div id="map_canvas" style="height: 400px;width: 500px;"></div>
最佳答案
如果当前缩放级别大于或等于 ROADMAP 的最大缩放级别MapType,将mapType更改为SATELLITE:
google.maps.event.addListener(map, 'zoom_changed', function () {
var maptype = map.getMapTypeId();
if (map.getZoom() >= map.mapTypes[maptype].maxZoom) {
if (map.getMapTypeId() != google.maps.MapTypeId.HYBRID) {
map.setMapTypeId(google.maps.MapTypeId.HYBRID)
map.setTilt(0); // disable 45 degree imagery
}
}
});;
代码片段:
//////// Loading Google Map //////////////////
$(function() {
var latitude = $('input[name="latitude"]').val();
var longitude = $('input[name="longitude"]').val();
var lat = (latitude ? latitude : 38.341656192795924),
lng = (longitude ? longitude : -122.68604278564453),
latlng = new google.maps.LatLng(lat, lng),
image = 'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png';
var mapOptions = {
center: new google.maps.LatLng(lat, lng),
zoom: (latitude ? 16 : 7),
panControl: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE
},
streetViewControl: false,
overviewMapControl: true,
rotateControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
icon: image,
draggable: true,
animation: google.maps.Animation.DROP
});
google.maps.event.addListener(marker, 'click', function(evt) {
map.setZoom(20);
});
google.maps.event.addListener(map, 'zoom_changed', function() {
var maptypes = map.mapTypes;
var maptype = map.getMapTypeId();
document.getElementById('info').innerHTML = "[" + maptype + "] zoom: " + map.getZoom();
if (map.getZoom() >= map.mapTypes[maptype].maxZoom) {
if (map.getMapTypeId() != google.maps.MapTypeId.HYBRID) {
map.setMapTypeId(google.maps.MapTypeId.HYBRID)
map.setTilt(0); // disable 45 degree imagery
}
}
});
var infowindow = new google.maps.InfoWindow();
function moveMarker(placeName, latlng) {
marker.setIcon(image);
marker.setPosition(latlng);
infowindow.setContent(placeName);
}
});
body,
html,
#map_canvas {
height: 100%;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.google.com/maps/api/js?libraries=places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>
<div id="info"></div>
关于javascript - 谷歌地图 : change from map view to satellite view,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29582771/
编辑:为了澄清,我想问的是:在什么情况下您会更喜欢一种语法而不是另一种语法? 有什么区别: .trigger('change') 和 .change() 两者都按预期工作。在任何情况下语法都会有所不同
这个问题在这里已经有了答案: Difference between .on('click') vs .click() (12 个答案) 关闭 6 年前。 有什么区别: $('选择器').change
我用的是Select2-4.0.0 和 $gameSelect.select2().on("change",function(e){....} 工作正常。 但是当我将它链接起来时('change')就
有一天在#haskell 上,有人提到了当字符串改变时字符串的类型应该如何改变的概念。这让我想起了我项目中的一些代码。它一直困扰着我,我说不清为什么。我现在推测,原因是我没有实现这个概念。这是下面的代
我使用了 .on("change") 事件函数,因为我的整个代码中有一部分是动态变化的。 .trigger("change") 在 .change() 中工作正常,但在 .on("change") 中
下面是一个非常简单的表单下拉列表设置。但是,on-change 事件拒绝触发...除非它更改为 ng-change。 这让我卡住了大约一个小时,因为我们在网站的其他地方使用了相同的设置(即模型属性/列
我有两个v-model 案例一: 这很好用 案例二: 即使改变 u1 也会触发 onDateChange(); 最佳答案 :change 绑定(bind)属性,如 v-bind:change=
我找到了 .and方法对于链接许多期望非常有用。 expect { click_button 'Update Boilerplate' @boilerplate_original.reload
出于合规性原因,我需要捕获所有数据库更改。我知道 Change Feed 存储此信息(并且我正在等待完全保真度来捕获删除)。目前,我一直在通过 Function 触发器读取 Change Feed 并
我添加了一个data-ng-change='getSubjectsClasswise(classBean.class_id);'上课标签,但主题未在主题 处加载标签。 一切看起来都很好,没有遇到问题
我有一组复选框,当您单击其中一个时,它们应该全部被选中。 当用户单击一个复选框时,它会检查以该类名称开头的所有其他复选框。我想要的是用户单击一个复选框,并且每次单击仅触发一次 $(".atpSelec
我在 Stack Overflow 上阅读了很多有关此问题的内容,并应用了所有建议的解决方案(getShell pack、布局、getparent 布局等...),但没有一个起作用。 我有一个带有文本
我想更改我的索引。我的数据框如下: partA = pd.DataFrame({'u1': 2, 'u2': 3, 'u3':4, 'u4':29, 'u5':4, 'u6':1, 'u7':323,
我有一个像这样的下拉菜单: Grade Year 旁边还有另一个下拉菜单: 3 4
这个问题已经有人问过,但我只停留在最基本的层面上。除了选择标记和尝试通过 jquery 捕获更改事件外,我没有向我的 html 添加任何内容。这是我的代码: $('#target').bin
我只是 Django 的新手几天。现在,当自定义表单中其他字段的值发生变化时,我需要同时更改一个字段中的值和表示形式。此时更改 MyModel 是受限。 我的应用程序/models.py: class
我正在使用 ListView 控件来显示一些数据行。有一个后台任务接收列表内容的外部更新。新收到的数据可能包含更少、更多或相同数量的项目,而且项目本身可能已更改。 ListView.ItemsSour
我在 android studio 中使用 git 插件。我的问题是当我提交更改列表(公开提交)时,但我在更改列表中的评论是错误的/丢失的,我想更改它。 问题: 有没有办法通过 AndroidStud
MyCustomObject * object=new MyCustomObject(); 假设我的许多类都使用了对象指针,但突然间我想在不更改地址的情况下更改指针的内容。 我认为 object =
我正在使用新的 KeyValue Observing。当变量发生变化时,我接到了我的观察者的电话,但 change struct 附带 newValue和 oldValue都为 nil ,所以它永远不
我是一名优秀的程序员,十分优秀!