Javascript 自定义谷歌地图标记图像未显示
我有以下代码,一切正常,只有标记没有显示。我在MySQL中有一个名为“marker”的字段,其中包含logo_1.png,我尝试了引号、logo的完整路径等等,有什么想法吗Javascript 自定义谷歌地图标记图像未显示,javascript,google-maps,Javascript,Google Maps,我有以下代码,一切正常,只有标记没有显示。我在MySQL中有一个名为“marker”的字段,其中包含logo_1.png,我尝试了引号、logo的完整路径等等,有什么想法吗 <script type="text/javascript"> function initMap() { var myLatLng = {lat: 27.243368, lng: -80.829570}; var opts = { tilt:0, s
<script type="text/javascript">
function initMap() {
var myLatLng = {lat: 27.243368, lng: -80.829570};
var opts = {
tilt:0,
streetViewControl: false,
center: new google.maps.LatLng(27.2437, -80.8324),
zoom: 14
};
map = new google.maps.Map(document.getElementById("map"), opts);
map.setMapTypeId('roadmap');
map.overlayMapTypes.insertAt(0, maptiler);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Sample Title'
});
}
// Display custom map in tiles
var map;
var mapBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(27.137066, -80.942569),
new google.maps.LatLng(27.426763, -80.696534));
// var mapMinZoom = 10;
// var mapMaxZoom = 14;
var mapMinZoom = 0;
var mapMaxZoom = 75;
var maptiler = new google.maps.ImageMapType({
getTileUrl: function(coord, zoom) {
var proj = map.getProjection();
var z2 = Math.pow(2, zoom);
var tileXSize = 256 / z2;
var tileYSize = 256 / z2;
var tileBounds = new google.maps.LatLngBounds(
proj.fromPointToLatLng(new google.maps.Point(coord.x * tileXSize, (coord.y + 1) * tileYSize)),
proj.fromPointToLatLng(new google.maps.Point((coord.x + 1) * tileXSize, coord.y * tileYSize))
);
var y = coord.y;
var x = coord.x >= 0 ? coord.x : z2 + coord.x;
if (mapBounds.intersects(tileBounds) && (mapMinZoom <= zoom) && (zoom <= mapMaxZoom))
return zoom + "/" + x + "/" + y + ".png";
else
return "http://www.maptiler.org/img/none.png";
},
tileSize: new google.maps.Size(256, 256),
isPng: true,
opacity: 1.0
});
// End display custom map in
//--------------------- Sample code written by vIr ------------
var $marker = new google.maps.MarkerImage($marker,
new google.maps.Size(32, 32), new google.maps.Point(0, 0),
new google.maps.Point(16, 32));
var center = null;
var map = null;
var currentPopup;
var bounds = new google.maps.LatLngBounds();
function addMarker(lat, lng, icon, info) {
var image = {
url: icon,
size: new google.maps.Size(25, 25),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(lat, lng),
scaledSize: new google.maps.Size(25, 25)
};
var pt = new google.maps.LatLng(lat, lng);
bounds.extend(pt);
var marker = new google.maps.Marker({
position: pt,
marker: image,
map: map
});
var popup = new google.maps.InfoWindow({
content: info,
maxWidth: 640
});
google.maps.event.addListener(marker, "click", function() {
if (currentPopup != null) {
currentPopup.close();
currentPopup = null;
}
popup.open(map, marker);
currentPopup = popup;
});
google.maps.event.addListener(popup, "closeclick", function() {
map.panTo(center);
currentPopup = null;
});
}
function initMapMarkers() {
var myLatLng = {lat: 27.243368, lng: -80.829570};
var opts = {
tilt:0,
streetViewControl: false,
center: new google.maps.LatLng(27.2437, -80.8324),
//zoom: 14
zoom: 7
};
map = new google.maps.Map(document.getElementById("map"), opts);
map.setMapTypeId('roadmap');
map.overlayMapTypes.insertAt(0, maptiler);
<?php
$query = mysqli_query($conn, "SELECT * FROM my_table")or die(mysql_error());
while($row = mysqli_fetch_array($query))
{
$logo = $row['logo'];
$company = $row['company'];
$lat = $row['lat'];
$lon = $row['lon'];
$marker = $row['marker'];
$desc = $row['desc'];
echo("addMarker(" . $lat . "," . $lon . ",'" . $marker. "'," . "'<b>" . $logo . "</b><b>" . $company ."<br />$desc' );\n");
}
?>
center = bounds.getCenter();
map.fitBounds(bounds);
}
</script>
</head>
<body onload="initMapMarkers()">
<div id="footer">Generated with <a href="http://www.maptiler.com/">MapTiler</a></div>
<div id="map"></div>
</body>
</html>
函数initMap(){
var Mylatng={lat:27.243368,lng:-80.829570};
变量选项={
倾斜:0,
街景控制:错误,
中心:新google.maps.LatLng(27.2437,-80.8324),
缩放:14
};
map=新的google.maps.map(document.getElementById(“map”),opts);
setMapTypeId(“路线图”);
map.OverlyMapTypes.insertAt(0,maptiler);
var marker=new google.maps.marker({
职位:myLatLng,
地图:地图,
标题:“示例标题”
});
}
//以平铺方式显示自定义地图
var映射;
var mapBounds=new google.maps.LatLngBounds(
新的google.maps.LatLng(27.137066,-80.942569),
新的google.maps.LatLng(27.426763,-80.696534));
//var-mapMinZoom=10;
//var mapMaxZoom=14;
var-mapMinZoom=0;
var mapMaxZoom=75;
var maptiler=new google.maps.ImageMapType({
getTileUrl:函数(坐标,缩放){
var proj=map.getProjection();
var z2=数学功率(2,缩放);
变量tileXSize=256/z2;
var tileYSize=256/z2;
var tileBounds=新的google.maps.LatLngBounds(
项目fromPointToLatLng(新的google.maps.Point(coord.x*tileXSize,(coord.y+1)*tileYSize)),
项目fromPointToLatLng(新的google.maps.Point((coord.x+1)*tileXSize,coord.y*tileYSize))
);
变量y=坐标y;
var x=coord.x>=0?coord.x:z2+coord.x;
if(mapBounds.intersects(tileBounds)&(mapMinZoom
函数initMap(){
var uluru={lat:-25.363,液化天然气:131.044};
var map=new google.maps.map(document.getElementById('map'){
缩放:4,
中心:乌卢鲁
});
var marker=new google.maps.marker({
职位:乌卢鲁,
地图:地图,
图片:“icon.png”
});
}
#地图{
高度:400px;
宽度:100%;
}
我的谷歌地图演示
只需检查基本信息,“logo_1.png”是否已保存并可供页面访问?您是否尝试过对图像进行硬编码并在将其从数据库中拉入之前使其正常工作?是的,logo_1.png与所有其他网站文件位于同一文件夹中。我尝试过硬编码,但无法显示。我可以指向logo的url,它就在那里,只是错过了我猜是在echo代码中添加了一些关于标记的内容。echo代码给出了以下内容:addMarker(27.1925,-80.8395,“logo_1.png”,“Some Company
”);此外,companylogo.png在弹出窗口中显示良好,并且与所有站点文件位于同一文件夹中。我做了上述更改,是否需要修改echo?我仍然没有看到标记。echo现在是:addMarker(27.244,-80.8249,logo_1.png,“Some Co Name
”);结尾是否正确:或者应该是谢谢!应该是
修复了我仍然得到一张没有标记的地图。更新了答案。你不能将图标直接传递到标记中。它需要是一个对象。