如何将谷歌地图搜索框添加到我的自定义地图? [英] How to add a GoogleMap Search Box to my customized map?
问题描述
我正在用google API和IGN API(法国地图)开发我自己的地图,并且我想添加一个Google Map Search Box,但即使仔细阅读了Google Map 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中工作,而且我是初学者:)
谢谢
Tiphaine
相关(非工作)代码:
< !DOCTYPE html>
< html>
< head>
< meta charset =UTF-8>
< title> La Tarte AuxCrésorsBeta< / title>
< meta name =viewportcontent =initial-scale = 1.0,user-scalable = no>
< script type =text / javascriptsrc =http://maps.google.com/maps/api/js?sensor=false>< / script>
< script type =text / javascript>
使用严格;
$ b $ var ignKey =ljozkgwvms60dtumhx67z6u3
函数makeIGNMapType(layer,name,maxZoom){
return new google.maps.ImageMapType({
getTileUrl :function(coord,zoom){
returnhttp://gpp3-wxs.ign.fr/+ ignKey +/ geoportail / wmts?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),
名称:名称,
maxZoom:maxZoom
});
函数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:{
打开:true,
位置: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(marke r);
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);
< / script>
< style>
html,body,#map_canvas {
width:100%;
身高:100%;
保证金:0;
padding:0;
位置:绝对;
剩下:0;
top:0;
z-index:0;
}
< / style>
< / head>
< body>
< div id =map_canvas>< / div>
< / body>
< / html>
我在你的地图:
Uncaught TypeError:无法读取属性'SearchBox'的未定义
您需要包含地点库。
更改:
< script type =text / javascriptsrc =http://maps.google.com/maps/api/js?传感器=假>< /脚本>
收件人:
< script type =text / javascriptsrc =http://maps.google.com/maps/api/js?libraries=places&sensor=false>< / script>
您的页面上也没有包含id =pac-input的元素。将此添加到您的HTML标记中:
< input id =pac-input>< / input>
代码片段(由于原始日期不再可用,因此可以使用月亮块):
var ignKey =ljozkgwvms60dtumhx67z6u3var markers = []; function makeIGNMapType(layer,name,maxZoom){return new google.maps.ImageMapType({getTileUrl:function(coord,zoom){var normalizedCoord = getNormalizedCoord (coord,zoom); if(!normalizedCoord){return null;} var bound = Math.pow(2,zoom); return'http://mw1.google.com/mw-planetary/lunar/lunarmaps_v1/clem_bw' +'+'+ zoom +'/'+ normalizedCoord.x +'/'+(bound - normalizedCoord.y - 1)+'.jpg';},name:'Moon',tileSize:new google.maps.Size (256,256),maxZoom:9, minZoom:0});} 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:{打开:true,位置: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(输入); 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);} //对于每个地方,获取图标,地点名称和位置marker = []; var bounds = new google.maps.LatLngBounds(); var place = null; var viewport = null; for(var i = 0; 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}); viewport = place.geometry.viewport; markers.push(marker); bounds.extend(place.geometry.location) ;} map.setCenter(bounds.getCenter()) ;}); //将SearchBox结果偏向当前地图视口范围内的地方。 google.maps.event.addListener(map,'bounds_changed',function(){var bounds = map.getBounds(); searchBox.setBounds(bounds);});} //规范tile在x轴上重复的坐标(水平)/ /像标准的谷歌地图tiles.function getNormalizedCoord(coord,zoom){var y = coord.y; var x = coord.x; //在一个方向范围内的瓦片范围取决于缩放级别// 0 = 1瓦片,1 = 2瓦片,2 = 4瓦片,3 = 8瓦片等var tileRange = 1<<放大;如果(y< 0 || y> = tileRange){return null; //不跨Y轴重复(垂直)如果(x <0 || x> = tileRange){x =(x%tileRange + tileRange)%tileRange; } return {x:x,y:y};} google.maps.event.addDomListener(window,'load',initialize);
html,body,#map_canvas {width:100%;身高:100%;保证金:0;填充:0;位置:绝对;左:0; top:0; z-index:0;}
< script type = text / javascriptsrc =http://maps.google.com/maps/api/js?libraries=places&sensor=false>< / script>< div id =map_canvas><<< ; / div>< input id =pac-input>< / input>
b
I'm develloping my own map with google API and IGN API (french map) and I'd like to add a Google Map Search Box but can't find a way to succeed even after reading carefully the Google Map API.
This is what I have: http://www.tiphainebuccino.com/site/Map/LaCarteAuxTresors_2.html
This is what I want to add (without losing my actual settings): https://developers.google.com/maps/documentation/javascript/examples/places-searchbox?hl=fr
I don't understand how to mix the two html codes. Someone could help me ? I work in html+javascript, And I a beginner :)
Thank you
Tiphaine
The relevant (non-working) code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>La Tarte Aux Crésors "Beta"</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/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));
// Create the search box and link it to the UI element.
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));
// Listen for the event fired when the user selects an item from the
// pick list. Retrieve the matching places for that item.
google.maps.event.addListener(searchBox, 'places_changed', function() {
var places = searchBox.getPlaces();
for (var i = 0, marker; marker = markers[i]; i++) {
marker.setMap(null);
}
// For each place, get the icon, place name, and location.
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)
};
// Create a marker for each place.
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);
});
// Bias the SearchBox results towards places that are within the bounds of the
// current map's viewport.
google.maps.event.addListener(map, 'bounds_changed', function() {
var bounds = map.getBounds();
searchBox.setBounds(bounds);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style>
html, body, #map_canvas {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
z-index: 0;
}
</style>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
I get this error on your map:
Uncaught TypeError: Cannot read property 'SearchBox' of undefined
You need to include the places library when you load the API.
Change:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
To:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=places&sensor=false"></script>
You also don't have an element with id="pac-input" on your page. Add this to your HTML markup:
<input id="pac-input"></input>
code snippet (with moon tiles as the originals are no longer available):
var ignKey = "ljozkgwvms60dtumhx67z6u3"
var markers = [];
function makeIGNMapType(layer, name, maxZoom) {
return new google.maps.ImageMapType({
getTileUrl: function(coord, zoom) {
var normalizedCoord = getNormalizedCoord(coord, zoom);
if (!normalizedCoord) {
return null;
}
var bound = Math.pow(2, zoom);
return 'http://mw1.google.com/mw-planetary/lunar/lunarmaps_v1/clem_bw' +
'/' + zoom + '/' + normalizedCoord.x + '/' +
(bound - normalizedCoord.y - 1) + '.jpg';
},
name: 'Moon',
tileSize: new google.maps.Size(256, 256),
maxZoom: 9,
minZoom: 0
});
}
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));
// Create the search box and link it to the UI element.
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));
// Listen for the event fired when the user selects an item from the
// pick list. Retrieve the matching places for that item.
google.maps.event.addListener(searchBox, 'places_changed', function() {
var places = searchBox.getPlaces();
for (var i = 0, marker; marker = markers[i]; i++) {
marker.setMap(null);
}
// For each place, get the icon, place name, and location.
markers = [];
var bounds = new google.maps.LatLngBounds();
var place = null;
var viewport = null;
for (var i = 0; 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)
};
// Create a marker for each place.
var marker = new google.maps.Marker({
map: map,
icon: image,
title: place.name,
position: place.geometry.location
});
viewport = place.geometry.viewport;
markers.push(marker);
bounds.extend(place.geometry.location);
}
map.setCenter(bounds.getCenter());
});
// Bias the SearchBox results towards places that are within the bounds of the
// current map's viewport.
google.maps.event.addListener(map, 'bounds_changed', function() {
var bounds = map.getBounds();
searchBox.setBounds(bounds);
});
}
// Normalizes the coords that tiles repeat across the x axis (horizontally)
// like the standard Google map tiles.
function getNormalizedCoord(coord, zoom) {
var y = coord.y;
var x = coord.x;
// tile range in one direction range is dependent on zoom level
// 0 = 1 tile, 1 = 2 tiles, 2 = 4 tiles, 3 = 8 tiles, etc
var tileRange = 1 << zoom;
// don't repeat across y-axis (vertically)
if (y < 0 || y >= tileRange) {
return null;
}
// repeat across x-axis
if (x < 0 || x >= tileRange) {
x = (x % tileRange + tileRange) % tileRange;
}
return {
x: x,
y: y
};
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map_canvas {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
z-index: 0;
}
<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=places&sensor=false"></script>
<div id="map_canvas"></div>
<input id="pac-input"></input>
这篇关于如何将谷歌地图搜索框添加到我的自定义地图?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!