如何将Google地图搜索框添加到我的自定义地图中?
如何将Google地图搜索框添加到我的自定义地图中?
我正在使用Google API和IGN API(法国地图)开发自己的地图,并且我想添加一个Google地图搜索框,但是即使仔细阅读了Google地图API,也找不到成功的方法。
这是我目前的情况:
http://www.tiphainebuccino.com/site/Map/LaCarteAuxTresors_2.html
这是我想要添加的内容(不想丢失我的当前设置):
https://developers.google.com/maps/documentation/javascript/examples/places-searchbox?hl=fr
我不明白如何将这两个HTML代码结合起来。有人可以帮助我吗?
我使用的是HTML + JavaScript。
以下是相关(不起作用)的代码:
"use strict";
var ignKey = "ljozkgwvms60dtumhx67z6u3"
function makeIGNMapType(layer, name, maxZoom) {
return new google.maps.ImageMapType({
getTileUrl: function(coord, zoom) {
return "http://gpp3-wxs.ign.fr/" + ignKey + "/geoportail/wmts?LAYER=" +
layer +
"&EXCEPTIONS=text/xml&FORMAT=image/jpeg&SERVICE=WMTS&VERSION=1.0.0" +
"&REQUEST=GetTile&STYLE=normal&TILEMATRIXSET=PM&TILEMATRIX=" +
zoom + "&TILEROW=" + coord.y + "&TILECOL=" + coord.x;
},
tileSize: new google.maps.Size(256,256),
name: name,
maxZoom: maxZoom
});
}
function initialize() {
var map_canvas = document.getElementById("map_canvas");
var map = new google.maps.Map(map_canvas, {
mapTypeId: 'IGN',
scaleControl: true,
streetViewControl: true,
panControl: true,
mapTypeControl:true,
overviewMapControl: true,
overviewMapControlOptions: {
opened: true,
position: google.maps.ControlPosition.BOTTOM_CENTER
},
mapTypeControlOptions: {
mapTypeIds: [
'IGN', 'IGNScanExpress',
google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.TERRAIN, google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.ROADMAP],
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
},
center: new google.maps.LatLng(47, 3),
zoom: 6,
draggableCursor: "crosshair"
});
map.mapTypes.set('IGN', makeIGNMapType("GEOGRAPHICALGRIDSYSTEMS.MAPS", "IGN", 18));
map.mapTypes.set('IGNScanExpress', makeIGNMapType("GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN-EXPRESS.CLASSIQUE", "IGN Scan Express", 16));
// 创建一个搜索框并将其与UI元素链接起来。
var input = /** @type {HTMLInputElement} */(
document.getElementById('pac-input'));
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
var searchBox = new google.maps.places.SearchBox(
/** @type {HTMLInputElement} */(input));
// 监听当用户从选择列表中选择一个项目时触发的事件。检索该项目的匹配位置。
google.maps.event.addListener(searchBox, 'places_changed', function() {
var places = searchBox.getPlaces();
for (var i = 0, marker; marker = markers[i]; i++) {
marker.setMap(null);
}
// 对于每个位置,获取图标、位置名称和位置。
markers = [];
var bounds = new google.maps.LatLngBounds();
for (var i = 0, place; place = places[i]; i++) {
var image = {
url: place.icon,
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(25, 25)
};
// 为每个位置创建一个标记器。
var marker = new google.maps.Marker({
map: map,
icon: image,
title: place.name,
position: place.geometry.location
});
markers.push(marker);
bounds.extend(place.geometry.location);
}
map.fitBounds(bounds);
});
// 将SearchBox的结果偏向在当前地图视口范围内的位置。
google.maps.event.addListener(map, 'bounds_changed', function() {
var bounds = map.getBounds();
searchBox.setBounds(bounds);
});
}
google.maps.event.addDomListener(window, 'load', initialize);