如何在streetview中显示左下角迷你小部件(Google Map JS API)

时间:2015-12-15 20:07:01

标签: google-maps google-street-view

任何人都知道如何在通过Google Maps JS API调用的自定义街景中显示左下角的迷你地图?

Google Map minimap widget

1 个答案:

答案 0 :(得分:2)

前一段时间我遇到了同样的问题,最终在街景全景中进行了自定义控制。似乎用API做这种事情并不容易。

在此代码中:http://codepen.io/chmartinez/pen/pJLVRK您会看到一张允许您使用街景的地图。一旦你使用它,街景全景图将加载其控件,包括一个自定义控件,这是一个带有红色标记的新地图,让你可以在maps.google.com中完成你可以用pegman做的大部分事情。 / p>

“酷”部分是:

// this is the main map (which will include a streetview panorama)
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
// this is the panorama
var panorama = new google.maps.StreetViewPanorama(document.getElementById('map-canvas'), panoramaOptions);
// this is the DOM element that will "contain" our custom control
var controlDiv = document.getElementById("map");

// this is the map inside the custom control
var mapControl = new google.maps.Map(controlDiv, {
    zoom: 16,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    draggable: true,
    mapTypeControl: false,
    zoomControl: false,
    rotateControl: false,
    scaleControl: false,
    panControl: false,
    streetViewControl: false
});
// setting the custom control in the panorama
panorama.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(controlDiv);
// set the panorama as streetview of the 'main' map 
map.setStreetView(panorama);

之后,您只需要向自定义控件添加内容(我添加了标记和标记阴影。您还可以更改地图外观和感觉,设置新控件(control-ception)等等!) ,设置你想要的听众,就是这样。

希望它有所帮助!