<style>
body, html,#map {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=您的密钥&callback=initMap"></script>
<script>
function initMap(){
map = new google.maps.Map(document.getElementById('map'), { //创建地图到ID元素容器,并设置初始化配置
center: { //设置中心点坐标
lat: -34.397,
lng: 150.644
},
zoom: 8 //设置地图级别
});
map.setOptions({
draggableCursor: "url('ruler.cur') 3 6, crosshair", //设置鼠标指针样式
draggingCursor: "url('ruler.cur') 3 6, crosshair", //设置拖动时鼠标指针样式
scrollwheel: false, //禁用滚轮缩放
mapTypeControl: false, //禁用地图类型切换控件
zoomControl: false, //禁用地图缩放控件
scaleControl: false, //禁用地图比例
draggable: false, //禁用拖动
disableDoubleClickZoom: true, //禁用双击放大地图,
gestureHandling: 'greedy' //取消iframe页面需要按住ctrl键才能缩放
});
//恢复默认鼠标指针
map.setOptions({
draggableCursor: undefined,
draggingCursor: undefined
});
//获取四个角的坐标
var maxX = map.getBounds().getNorthEast().lng();
var maxY = map.getBounds().getNorthEast().lat();
var minX = map.getBounds().getSouthWest().lng();
var minY = map.getBounds().getSouthWest().lat();
//获取中心点的坐标
map.getBounds().getCenter().lng();
map.getBounds().getCenter().lat();//或下面的获取方式
map.getCenter().lng();
map.getCenter().lat();
//获取点击坐标
google.maps.event.addListener(map,"click",function(event){
console.log(event.latLng.lat() + ',' + event.latLng.lng());
});
//点击创建标记
google.maps.event.addListener(map,"click",function(event){
var myIcon = { //自定义点图标
url: 'mapCircle.png', //图标路径
size: new google.maps.Size(10, 10), //图标尺寸
origin: new google.maps.Point(0, 0), //图标原点
anchor: new google.maps.Point(0,0) //图标偏移量
};
//var mySvgIcon = {url: 'icon.svg', size: new google.maps.Size(48, 48)}; //自定义svg格式图标(svg文件内必须设置宽度和高度,而且与google.maps.Size()设置的大小必须保持一致)
//var mySvgIcon = {url: 'data:image/svg+xml;utf-8,<svg width="48" height="48"...', size: new google.maps.Size(48, 48)}; //url也可以是svg的data数据形式
var point = new google.maps.LatLng(event.latLng.lat(), event.latLng.lng()); //创建坐标点
var marker = new google.maps.Marker({ position: point, icon: myIcon }); //创建标记
marker.setMap(map); //把标记添加到地图
});
//创建折线
var latLng_Arr = []; //创建点数组
google.maps.event.addListener(map,"click",function(event){
latLng_Arr.push({ //获取当前点追加到数组
lat: event.latLng.lat(),
lng: event.latLng.lng()
});
if(latLng_Arr.length >= 2){ //如果有两个点再连线
var polyline = new google.maps.Polyline({
strokeColor: "#fd8044", //颜色
strokeWeight: 2, //宽度
strokeOpacity: .9, //不透明度
path: latLng_Arr
});
polyline.setMap(map); //把折线添加到地图
}
});
//创建文本标记
google.maps.event.addListener(map,"click",function(event){
var point = new google.maps.LatLng(event.latLng.lat(), event.latLng.lng()); //创建坐标点
var marker = new google.maps.Marker({position: point}); //创建标记
if(typeof InfoBox != 'undefined'){ //如果InfoBox构造函数已存在
createLabe(); //直接创建
}else{ //如果InfoBox构造函数不存在
getScript('infobox.js',createLabe); //异步加载infobox.js文件完成后再创建
//插件地址: https://github.com/googlemaps/v3-utility-library/tree/master/infobox
}
});
function createLabe(){ //创建label
var label = new InfoBox({
content: '标记文字',
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(0, 0),//偏移
zIndex: 1,
closeBoxURL: "",
isHidden: false,
pane: "floatPane",
enableEventPropagation: false,
boxStyle: {
color: "#666",
fontSize: "12px",
height: "20px",
padding: "0 5px",
lineHeight: "20px",
fontFamily: "微软雅黑",
borderColor: "#999",
borderRadius: "2px",
border: "1px solid #999",
backgroundColor: "#fff"
}
}
label.open(map,marker); //把标签添加到地图
}
//异步加载js方法
function getScript(url,fn){
var url_json = {};
if(typeof url == 'object' && url.constructor == Array){
for(var i= 0; i< url.length; i++){
if(!url_json[url[i]]){
url_json[url[i]] = url[i];
}
}
}else if(typeof url == 'string'){
url_json[url] = url;
}
function getJsonLength(json){
var length = 0;
for(var i in json){
length++;
}
return length;
}
var script_json = {};
var load_num = 0;
for(var i in url_json){
script_json[i] = document.createElement('script');
script_json[i].src = url_json[i];
document.body.appendChild(script_json[i]);
script_json[i].onload = function(){
load_num++;
if(load_num == getJsonLength(url_json)){
typeof fn == 'function' ? fn() : null;
}
};
}
}
}
</script>
谷歌地图常用API
最新推荐文章于 2024-08-16 17:41:49 发布