将默认标记更改为谷歌地图API上的特定图像
Changing the default marker to a specific image on google maps API
这段代码的作用是,当用户输入两个坐标时,它用两个标记和一条显示方向的线来设置地图。是否可以将d*错误标记*更改为特定图像不同地用于两个坐标,假设我希望第一个坐标表示"image1.jpeg",第二个坐标表示"image2.jpeg"。
<html>
<head>
<meta charset="utf-8">
<title>Google Maps JavaScript API v3 Example: Marker Animations</title>
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
// var center = new google.maps.LatLng(52.12, -3.2); //center of the map
var center = new google.maps.LatLng(<?php echo $_Mylat?>, <?php echo $_Mylon?>);
var a = [
new google.maps.LatLng(<?php echo $_Mylat?>, <?php echo $_Mylon?>),
new google.maps.LatLng(<?php echo $_Mylat2?>, <?php echo $_Mylon2?>)
];
var marker;
var map;
function initialize() {
var mapOptions = {
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: center
};
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
for (var i=0; i<a.length;i++)
{
marker = new google.maps.Marker({
map:map,
draggable:true,
animation: google.maps.Animation.DROP,
position: a[i]
});
}
var flightPlanCoordinates = [
new google.maps.LatLng(<?php echo $_Mylat?>, <?php echo $_Mylon?>),
new google.maps.LatLng(<?php echo $_Mylat2?>, <?php echo $_Mylon2?>)
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 500px; height: 400px;">map div</div>
</body>
</html>
在这段代码中,我可以将标记更改为我的特定图像,谢谢
您需要执行IF
语句来确定标记应该加载哪个图像。
if(i == 0) iconImage = "image1.jpeg";
else if(i == 1) iconImage = "image2.jpeg";
然后将自定义图标和变量添加到标记中:
marker = new google.maps.Marker({
map:map,
draggable:true,
animation: google.maps.Animation.DROP,
position: a[i],
icon: iconImage
});
相关文章:
- Steam Web API:I'我不知道该如何处理这个看起来像哈希的url来生成图像
- 图像未加载javascript、html、angular、imdb-api
- Imgur API图像搜索未返回数据
- Google Places API显示雷达搜索中的位置图标/图像
- API让'你在编辑/操纵图像吗
- 我如何从一个无限滚动的网站抓取图像,其中api是隐藏的,我无法通过使用Inspect Element获得它->网络
- 从imgur api的另一个浏览器拖放图像
- 如何检索从桌面应用程序发送到Rails API的图像
- 使用Facebook的javascript api发布多部分/表单数据编码的图像
- Instagram API 未加载所有图像
- Google Map JS API-加载地图分幅,但所有图像(标记、缩放控制等)都不加载;t负载2分钟
- 如何通过js将二进制代码的验证图像从api转换为png
- HTML5文件API使用Ajax上传多个图像
- 谷歌地球Api改变图像对比度
- 是否可以调用Google API获取地图图像并将图像保存在某个位置
- 如何使用Node.js显示从http请求到外部API的图像
- HTML5 文件阅读器 API - 图像质量
- ReCAPTCHA Ajax API图像定制
- 节点REST API图像渲染问题
- 如何在javascript中获取文件api图像大小