一、自定义信息窗口、自定义图标以及自定义控件
// 自定义Marker标记点
var marker = new google.maps.Marker({
position: myLatLng,
icon: '../car.png', // 如果为空则显示默认的图标
map: map
});
// 自定义InfoWindow信息窗口
htmlWindow = "<div class='wrapBox'>\
<div>IMEI: " + imei + "</div>\
<div>Address:<span id='map-address'>" + pointToAddress(myCenter.lat, myCenter.lng) + "</span>" + info + "</div>\
<div>Speed:" + speed + " km/h</div>\
<div>Time:" + toDate(2018-12-17 16:12:50) + "</div>\
</div>";
var infowindow= new google.maps.InfoWindow({
content: htmlWindow,
disableAutoPan:true //设置为true时可禁用自动平移功能
});
//打开信息窗体
infowindow.open(map, marker);
//marker点事件,点击关闭信息窗体
marker.addListener('click', function() {
infowindow.close();
});
//监听X关闭按钮事件
google.maps.event.addListener(infowindow,"closeclick", function(){
infowindow.close();
});
自定义标记和自定义信息窗口比较简单,效果如上图(中)。如果我们要改变地图默认的控件位置或需要自定义控件怎么办?接着往下看。
googl map默认开启的控件有:
mapTypeControl // 地图类型控件
zoomControl //地图缩小放大控件
streetViewControl //小黄人街景控件
fullscreenControl //全屏控件
默认没有开启的还有panControl、scaleControl、overviewMapControl、rotateControl:true等
// 关闭地图类型控件,打开缩小放大控件并设置其位置为坐下方
var myOptions2 = {
zoom: 15,
center: myLatLng,
mapTypeControl: false,
zoomControl: true,
zoomControlOptions: {
style:google.maps.ZoomControlStyle.SMALL,
position:google.maps.ControlPosition.LEFT_BOTTOM
}
};
其中,所有控件都有position属性,代表控件的位置,包括的选项有:OTTOM、BOTTOM_CENTER、BOTTOM_LEFT、BOTTOM_RIGHT、CENTER、LEFT、LEFT_BOTTOM、LEFT_CENTER、LEFT_TOP、RIGHT、RIGHT_BOTTOM、RIGHT_CENTER、RIGHT_TOP、TOP、TOP_CENTER、TOP_LEFT、TOP_RIGHT。记不住没有关系,你不妨console.log(google.maps.ControlPosition)试试。
而只有部分控件有style属性,而且各不相同。
地址解析
// 地址解析方法
function pointToAddress(lat, lng, backcall) {
// 实例化Geocoder服务用于解析地址
var geocoder = new google.maps.Geocoder();
// 地理反解析过程
// 请求数据GeocoderRequest为location,值类型为LatLng因此我们要实例化经纬度
geocoder.geocode({ location: new google.maps.LatLng(lat, lng) }, function geoResults(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
backcall(results[0].formatted_address);
} else {
console.log(":error " + status);
}
});
}
// 在需要解析的地方调用方法
pointToAddress(myCenter.lat, myCenter.lng, function (address) {
// 获得地址
console.log(address);
});
我们看到地图上控件名称显示的是中文,如果用户手机系统是英文,地图也会自动切换为英文。